youtube iframe api不暂停视频

Question

我目前正在使用各种iframe youtube嵌入滑块的页面。

我想让我的JS暂停视频，当你点击滑块上的“下一步”按钮。我想我已经根据api设置了一切...但是，当您单击滑块按钮时，它似乎没有暂停视频。

<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> 

我的I帧：

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

任何方向将不胜感激。

Answer 1

有几件事情：

• 这是document.getElementById不document.getElementByID你实例化一个YouTube播放器ID 'video'但你的iframe中没有任何标识

• ：

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

• 使用onYouTubeIframeAPIReady而不是onYouTubePlayerAPIReady

你会碰到这样的：

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); 

有：

<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" /> 

检查this fiddle

检查Youtube iframe API reference