我正在使用 Phonegap 构建一个应用程序，我想在我的应用程序中播放 YouTube 视频。我以为我可以使用 cordova 插件媒体来实现此目的，但它不起作用。有人知道我的代码有什么问题或者如何在我的应用程序中获取 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();
}
最佳答案
虽然我还没有对此进行测试，但您应该能够使用 IFRAME 来嵌入视频，因为 Cordova 只是将您的应用程序放入 Web View 中。 YouTube 有一个用于 IFRAME 使用的 JS API，可以在 https://developers.google.com/youtube/iframe_api_reference 找到。
关于javascript - 如何在我的APP中获取youtube视频？ (使用 Phonegap 构建)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27782621/