我在网页上嵌入了多个YouTube iFrame.如果其中一部电影已经播放,然后用户决定开始播放另一部电影,是否可以停止播放第一部电影,这样一次只播放一部电影？
我查看过’iframe嵌入的YouTube播放器API参考’https://developers.google.com/youtube/iframe_api_reference,但如果我说实话,我就是不明白.我的开发人员技能非常有限……很明显.
可怜的我知道,但这就是我现在所拥有的(只是iFrames)…… http://jsfiddle.net/YGMUJ/
<iframe width="520" height="293" src="http://www.youtube.com/v/zXV8GMSc5Vg?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <iframe width="520" height="293" src="http://www.youtube.com/v/LTy0TzA_4DQ?version=3&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
我认为我需要做的就是在视频网址的末尾添加’& enablejsapi = 1′.
任何帮助将非常感激.
先感谢您.
解决方法
您实际上想要使用iFrame Player API,而不是使用iframe.根据您实际想要嵌入的视频数量,您可能希望使这个javascript更具动态性,但是这个工作示例应该足以让您开始使用.
基本上我在这里做的是初始化两个玩家,并在玩家状态改变播放时暂停相反的视频.
您可以在http://jsfiddle.net/mattkoskela/Whxjx/播放以下代码
<script>
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1',{
height: '293',width: '520',videoId: 'zXV8GMSc5Vg',events: {
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2',videoId: 'LTy0TzA_4DQ',events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
stopVideo(event.target.a.id);
}
}
function stopVideo(player_id) {
if (player_id == "player1") {
player2.stopVideo();
} else if (player_id == "player2") {
player1.stopVideo();
}
}
