Video Youtube嵌入-播放视频2时暂停视频1
我试图通过Youtube API找到一种方法,在播放另一个视频时暂停一个视频,我在同一页面上嵌入了多个Youtube。 是否有一个简单的代码,我完全错过了呢Video Youtube嵌入-播放视频2时暂停视频1,video,youtube,youtube-api,embed,Video,Youtube,Youtube Api,Embed,我试图通过Youtube API找到一种方法,在播放另一个视频时暂停一个视频,我在同一页面上嵌入了多个Youtube。 是否有一个简单的代码,我完全错过了呢 <div id="video_youtube" style="min-height:600px; margin-top:1%;"> <iframe id='player1' style="margin-right:2%; padding-bottom:1%;" width="500px" hei
<div id="video_youtube" style="min-height:600px; margin-top:1%;">
<iframe id='player1' style="margin-right:2%; padding-bottom:1%;" width="500px" height="281px" src="http://www.youtube.com/embed/rZye11nxOOQ" frameborder="0" allowfullscreen>
</iframe>
<iframe id='player2' style="padding-bottom:1%;" width="500px" height="281px" src="http://www.youtube.com/embed/8Q89hEnkYH4" frameborder="0" allowfullscreen>
</iframe>
</div>
我找到了一个显示代码的程序,它允许你对两个视频进行同样的操作,
但我认为如果我必须添加更多的视频,这段代码太手工了,会变得更长更复杂
<div id="player1"></div>
<div id="player2"></div>
<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', {
height: '293',
width: '520',
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();
}
}
</script>
如果您创建了一个包含所有玩家对象的对象,并确保引用每个玩家的属性名称与该玩家的ID匹配,该怎么办?然后你的stop方法就可以为。。。在里面通过属性名称而不是值进行循环的循环:
<div id="player1"></div>
<div id="player2"></div>
<!-- add as many as you need -->
<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() {
player.player1 = new YT.Player('player1', {
height: '293',
width: '520',
videoId: 'zXV8GMSc5Vg',
events: {
'onStateChange': onPlayerStateChange
}
});
player.player2 = new YT.Player('player2', {
height: '293',
width: '520',
videoId: 'LTy0TzA_4DQ',
events: {
'onStateChange': onPlayerStateChange
}
});
// add more here, ensuring that in player.[whatever] the 'whatever' is the same as the ID. You could very easily script this process as well so you don't repeat yourself.
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
stopVideos(event.target.a.id);
}
}
function stopVideos(player_id) {
for (p in player) {
if (p!==player_id) {
player[p].stopVideo(); // all videos will stop playing except the one that triggered the event
}
}
}
</script>