youtube iframe api nicht pausieren video

Question

Ich arbeite gerade an einer Seite mit einem Schieberegler mit verschiedenen iframe youtube bettet.

Ich versuche, mein JS zu pausieren, wenn Sie den "nächsten" Knopf auf dem Schieberegler drücken. Ich denke, ich habe alles nach der API eingerichtet. Aber es scheint nicht die Videos zu pausieren, wenn Sie auf den Schieberegler klicken.

<script type="text/javascript"> 
// https://developers.google.com/youtube/iframe_api_reference 

// global variable for the player 
var player; 

// this function gets called when API is ready to use 

function onYouTubePlayerAPIReady() { 
    // create the global player from the specific iframe (#video) 
    player = new YT.Player('video', { 
    events: { 
     // call this function when player is ready to use 
     'onReady': onPlayerReady 
    } 
    }); 
} 

function onPlayerReady(event) { 

    // bind events 

    var pauseButtonRight = document.getElementByID("pause-right"); 
    pauseButtonRight.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 
    var pauseButtonLeft = document.getElementByID("pause-left"); 
    pauseButtonLeft.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 
} 

// Inject YouTube API script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
</script> 

meine iframes:

<iframe src="https://www.youtube.com/embed/6QB6jVjA2js?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe> 

Jede Richtung würde geschätzt.

Answer 1

Ein paar Dinge:

• dies document.getElementById nicht document.getElementByID

• Sie ein Youtube-Player mit id 'video' aber Ihre iframe id jede nicht haben instanziiert haben:

  <iframe id="video" src="https://www.youtube.com/embed/6QB6jVjA2js?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe> 
  

• Verwenden Sie onYouTubeIframeAPIReady anstelle von onYouTubePlayerAPIReady

werden Sie haben so etwas wie:

var player; 

function onYouTubeIframeAPIReady() { 

    // create the global player from the specific iframe (#video) 
    player = new YT.Player('video', { 
    events: { 
     // call this function when player is ready to use 
     'onReady': onPlayerReady 
    } 
    }); 
} 

function onPlayerReady(event) { 
    var pauseButtonRight = document.getElementById("pause"); 
    pauseButtonRight.addEventListener("click", function() { 
    player.pauseVideo(); 
    }); 
    var pauseButtonLeft = document.getElementById("play"); 
    pauseButtonLeft.addEventListener("click", function() { 
    player.playVideo(); 
    }); 
} 

// Inject YouTube API script 
var tag = document.createElement('script'); 
tag.src = "//www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

mit:

<iframe id="video" src="https://www.youtube.com/embed/6QB6jVjA2js?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe> 
<input id="pause" type="submit" value="pause" /> 
<input id="play" type="submit" value="play" /> 

prüfen this fiddle

prüfen Youtube iframe API reference