如何在我的APP中获取YouTube视频? (使用Phonegap构建)

时间:2015-01-05 15:27:37

标签: javascript android cordova youtube

我正在使用Phonegap构建一个APP,我想在我的APP中使用YouTube视频。我以为我可以使用cordova插件媒体,但它不起作用。任何人都知道我的代码有什么问题或如何在我的APP中获取youtube视频?感谢

    <!doctype html>
<html>
    <head>       
        <title> KVL Leermomenten </title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="phonegap.css">
        <script src="phonegap.js"></script> 
        <script src="javascript.js"></script> 
    </head>

    <body onload="loadScript()">
        <!-- pagina 0 homepagina -->
        <section class="show" id="page0">
            <h1><img  src="img/banner.png" alt="banner" /> </h1>

            <div class="tekst" >
                <p> Welkom bij de expo ‘KVL-Leermomenten’. Afgelopen jaar zijn Oisterwijkers uitgenodigd in de huiskamer van het Leerlokaal KVL om mee te denken over de toekomst van dit gebouw. Hier is het idee ontstaan om een expositie over de geschiedenis van de Koninklijke Verenigde Lederfabriek (KVL) te organiseren. Het Leerlokaal KVL heeft dit idee vertaald in deze expo samen met ruim 240 leerlingen van 2College Durendeal uit Oisterwijk.De expo ‘KVL-Leermomenten’ maakt de geschiedenis op twee manieren zichtbaar. Zo is er enerzijds een tijdlijn van de leerfabriek te zien en anderzijds worden herinneringen aan de draaiende leerfabriek verteld, door mensen die er zelf mee te maken hebben gehad.  Deze verhalen worden nu aan jullie doorgegeven en krijgen zo weer een nieuwe toekomst.  </p>
            </div>
        </section>

        <!-- pagina 1 rondleiding: native functie: vibrate -->
        <section class="hide" id="page1">
            <h1><img  src="img/banner_rondleiding.png" alt="banner" /> </h1>
            <div class="tekst" >
                <p> Bekijk hieronder de video waarbij je een rondleiding krijgt in de expositie.  </p>
            </div>
            <div id="playAudio" src="https://www.youtube.com/watch?v=P6qFCqOy3HU" />

            <button id="volgende" />    <button id="vorige"/> 

        </section>

        <!-- pagina 2 op locatie: native functie: gps -->
        <section class="hide" id="page2">
            <h1><img  src="img/banner_oplocatie.png" alt="banner" /> </h1>
            <div class="tekst" >
                <p> Bekijk hier uw locatie.  </p>
            </div>
            <div id="GPS"> </div>
            <!-- <img id="myImage" src=""/> -->
        </section>

        <!-- pagina 3 mijn expo, native functie: camera-->
        <section class="hide" id="page3">
            <h1><img  src="img/banner_mijnexpo.png" alt="banner" /> </h1>
            <div class="tekst" >
                <p> Maak je eigen expositie over erfgoed! </p>
            </div>
            <button id="foto"> </button>
            <img id="myImage" src=""/>

        </section>

        <!-- pagina 4 rondleiding; filmpje 2 -->
        <section class="hide" id="page4">
            <h1><img  src="img/banner_rondleiding.png" alt="banner" /> </h1>
            hier komt filmpje 2

        </section>

        <!-- navigatie -->
        <nav>
            <button class="up" id="nav1"></button>
            <button class="up" id="nav2"></button>
            <button class="up" id="nav3"></button>
        </nav>

    </body>

</html>

的Javascript

function loadScript() {
// Wait for device to be ready loading everything

onDeviceReady();
    };

// When device is ready
function onDeviceReady() {


    document.getElementById('nav1').addEventListener('mousedown', nav1Down, false); //mousedown = touchstart for app
    document.getElementById('nav1').addEventListener('mouseup',  page1Show, false); //mouseup = touchend for app
    document.getElementById('nav2').addEventListener('mousedown', nav2Down, false);
    document.getElementById('nav2').addEventListener('mouseup',  page2Show, false);
    document.getElementById('nav3').addEventListener('mousedown', nav3Down, false);
    document.getElementById('nav3').addEventListener('mouseup',  page3Show, false);
    document.getElementById('volgende').addEventListener('mousedown', volgendeDown, false);
    document.getElementById('volgende').addEventListener('mouseup',  page4Show, false);
    document.getElementById('foto').addEventListener('mousedown', fotoDown, false);
    document.getElementById('foto').addEventListener('mouseup',  fotoShow, false);
    document.getElementById('GPS').addEventListener('loadScript',  getGPS, false);
    document.getElementById('playAudio').addEventListener('loadScript',  playAudio, false);
    //document.getElementById('volgende').addEventListener('mousedown',  vibrateOn, false);
};

// Add some GUI to the touch events
function nav1Down() {
    document.getElementById('nav1').className='down';
};
function nav2Down() {
    document.getElementById('nav2').className='down';
};
function nav3Down() {
    document.getElementById('nav3').className='down';
};
function volgendeDown() {
    document.getElementById('volgende').className='down';
};

function fotoDown() {
    document.getElementById('foto').className='down';
};



// Activate the tabs
function page1Show() {
    document.getElementById('page0').className='hide';
    document.getElementById('page1').className='show';
    document.getElementById('page2').className='hide';
    document.getElementById('page3').className='hide';
    document.getElementById('page4').className='hide';
    document.getElementById('nav1').className='up';
};
function page2Show() {
    document.getElementById('page0').className='hide';
    document.getElementById('page1').className='hide';
    document.getElementById('page2').className='show';
    document.getElementById('page3').className='hide';
    document.getElementById('page4').className='hide';
    document.getElementById('nav2').className='up';
};

function page3Show() {
    document.getElementById('page0').className='hide';
    document.getElementById('page1').className='hide';
    document.getElementById('page2').className='hide';
    document.getElementById('page3').className='show';
    document.getElementById('page4').className='hide';
    document.getElementById('nav3').className='up';
};

function page4Show() {
    document.getElementById('page0').className='hide';
    document.getElementById('page1').className='hide';
    document.getElementById('page2').className='hide';
    document.getElementById('page3').className='hide';
    document.getElementById('page4').className='show';
    document.getElementById('volgende').className='up';
};

//Camera
function fotoShow(){
    navigator.camera.getPicture(onSuccess, onFail, { quality: 50,destinationType: Camera.DestinationType.FILE_URI });
}

function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}

function onFail(message) {
    alert('Failed because: ' + message);
}


//GPS

// onSuccess Callback
// This method accepts a Position object, which contains the
// current GPS coordinates
//
function getGPS() {
navigator.geolocation.getCurrentPosition(onSuccess, onError);
}


var onSuccess = function(position) {
    alert('Latitude: '          + position.coords.latitude          + '\n' +
          'Longitude: '         + position.coords.longitude         + '\n' +
          'Altitude: '          + position.coords.altitude          + '\n' +
          'Accuracy: '          + position.coords.accuracy          + '\n' +
          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
          'Heading: '           + position.coords.heading           + '\n' +
          'Speed: '             + position.coords.speed             + '\n' +
          'Timestamp: '         + position.timestamp                + '\n');
};

// onError Callback receives a PositionError object
//
function onError(error) {
    alert('code: '    + error.code    + '\n' +
          'message: ' + error.message + '\n');
}






//Media

function playAudio(url) {
    // Play the audio file at url
    var my_media = new Media(url,
        // success callback
        function () {
            console.log("playAudio():Audio Success");
        },
        // error callback
        function (err) {
            console.log("playAudio():Audio Error: " + err);
        }
    );
    // Play audio
    my_media.play();
}

1 个答案:

答案 0 :(得分:1)

虽然我没有对此进行测试,但您应该能够使用IFRAME来嵌入视频,因为Cordova只是将您的应用程序放入webview中。 Youtube有一个用于IFRAME用法的JS API,可在https://developers.google.com/youtube/iframe_api_reference

找到