在每次幻灯片放映转换时暂停多个youtube Iframe视频

Question

我是YouTube Iframe API的新手，当用户移动到不同的幻灯片时，我正在尝试暂停幻灯片中的几个嵌入Iframe视频(jQuery flexreader插件)。如果播放器没有暂停，视频将继续播放，并且由于幻灯片中会有多个视频，所以当新幻灯片显示时，我需要每个视频都暂停。Iframe不是通过API插入的，但由于我使用的CMS，它们已经存在于html中。

我已经阅读了API参考资料和我在这里找到的几个答案，但当用户转换到新幻灯片时，我很难弄清楚如何暂停任何/每个Iframe视频。

在我最近的一次尝试中，如下面的代码所示，每当单击链接时，我都会尝试暂停Iframes，因为页面上唯一的链接将用于导航到下一张和上一张幻灯片。我还尝试过暂停通过flexreader API提供的幻灯片转换事件上的所有视频，但没有成功。

var players = {}; //players storage object
function onYouTubeIframeAPIReady(){
$('iframe[id]').each(function(){
var identifier = this.id;
var frameID = getFrameID(identifier);
if (frameID) { // if iframe exists
players[frameID] = new YT.Player(frameID, {
events: {
"onStateChange" : createYTEvent(frameID, identifier)
}
});            
}
});
}
//returns a function to enable  multiple events
function createYTEvent(frameID, identifier){
return function (event){
var player = players[frameID]; //set player reference
var done = false;
$('a').click(function(){
player.pauseVideo();
return false;
});        
}
}

如有任何帮助，将不胜感激

Answer 1

对不起我的英语，我是法国人，但我最近遇到了同样的问题，也许我认为我将来可以帮助你或其他人。

与你不同的是，我只使用了1个播放器加载4个视频的列表，而不是4个播放器。

有我的HTML：

<div id='videos'>
<div id="player">
<!-- the iframe drectly write in the html, with a list of videos (4 in the example) -->
<iframe id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/youtubeVideoId1?playlist=youtubeVideoId2,youtubeVideoId3,youtubeVideoId4&version=3" frameborder="0" allowfullscreen></iframe>
</div>
<!-- below, the buttons for switching the 4 videos -->
<span id='pagination'>
<a onclick='video_slide(0);' id='puce1'></a>
<a onclick='video_slide(1);' id='puce2'></a>
<a onclick='video_slide(2);' id='puce3'></a>
<a onclick='video_slide(3);' id='puce4'></a>
</span>
</div>
</div>

和我的Javascript：

<script type="text/javascript">
// call the youtube API
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// init the player
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
// the function "onPlayerStateChange is call when the player load, 
play, pause or stop a video
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
// if a new video is buffering (the event.data is -1 when buffering, 
1 when playing, 2 when paused ...)
if (event.data == -1) {
// it mean that the player pass at the next video, 
so we call the bellow function to turn on the corresponding button
getTheRightPuce();
}
}
// I add a function to recognize the current video playing, 
and turn on the right button automatically when at the end of a video, 
the player pass on the next one
function getTheRightPuce(){
var vidIndex = player.getPlaylistIndex();
$("#pagination a").css('backgroundColor','#000000');
if (vidIndex==0){$("#puce1").css('backgroundColor','red');}
else if (vidIndex==1){$("#puce2").css('backgroundColor','red');}
else if (vidIndex==2){$("#puce3").css('backgroundColor','red');}
else if (vidIndex==3){$("#puce4").css('backgroundColor','red');}
}
// the function called by the buttons, change the current video 
on the player and turn on the corresponding button, 
the parameter is the index of the video in the play-list 
(0 for the first, 1 for second...)
function video_slide(sld){
player.playVideoAt(sld);
$("#videos").css('display','none');
$("#pagination a").css('backgroundColor','#000000');
$("#videos").fadeIn(500);
if (sld==0){$("#puce1").css('backgroundColor','red');}
else if (sld==1){$("#puce2").css('backgroundColor','red');}
else if (sld==2){$("#puce3").css('backgroundColor','red');}
else if (sld==3){$("#puce4").css('backgroundColor','red');}
}
</script>

我尽量把它说得更清楚。

我希望这将帮助你或其他人：)