youtube-iframe-api loadVideoById() Fehler
Ich bin das hinzufügen von youtube-Videos auf einer Firmen-website und möchte diese zum anzeigen auf nicht-flash-Geräte. Ich Spiele mit dem youtube-iframe-API und aktualisiert einem Ihrer Beispiele, die es einem Benutzer erlauben, auf einen link zu klicken, die video im iframe. Der bearbeitete code:
<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'JW5meKfy3fY',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
function loadVideo(videoID) {
if(player) { player.loadVideoById(videoID); }
}
</script>
<a href="javascript:loadVideo('kGIjetX6TBk');">Click me to change video</a>
</body>
</html>
Das einzige, was ich Hinzugefügt wurde:
function loadVideo(videoID) {
if(player) { player.loadVideoById(videoID); }
}
Diese funktioniert in Safari, Chrome und Firefox, aber nicht im IE7, 8 oder 9. Im IE7 und 8 gibt es einen Fehler "Objekt unterstützt diese Eigenschaft oder Methode nicht".
Ist das ein Problem mit der API oder mache ich etwas falsch?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte ein ähnliches problem, und es stellte sich heraus, dass Sie sollten nicht, rufen Sie eine der Methoden auf dem YT.Player-Objekt (einschließlich
loadVideoById
) solangeonPlayerReady
wurde noch nicht genannt.Tun einen Scheck
if(player) {...}
ist nicht ausreichend, diePlayer
- Objekt erstellt und einige Eigenschaften werden bereits in sich, ohne die Methoden, die Sie benötigen, zur Verfügung stehen.... events: { 'onReady': function() { ...}
Müssen Sie rufen Sie die load-video-Funktion aus der onPlayerReady Veranstaltung.
Zum Beispiel, wenn Sie möchten, laden Sie ein video bei Klick auf eine Miniaturansicht, die dies tun (dies würde erfordern, jquery, aber es sollte den Punkt quer):
Diese Weise können Sie sicher sein, dass der player geladen wird.
Verhindern, klicken Sie auf Vermehrung mit
return false
nach dem Aufrufplayer.loadVideoById
in meiner click-Ereignis-handler hat den trick für mich.