如何使2个YouTube视频自动播放一个接一个
How do you make 2 YouTube videos automatically play one after the other?
我想弄清楚如何使2个视频自动播放一个接一个,即一旦第一个视频结束,第二个视频开始。如何做到这一点?http://jsfiddle.net/neowot/8hc3mf27/
HTML<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/zgQaEAhMIOI" frameborder="0" allowfullscreen></iframe>
</div>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/zgQaEAhMIOI" frameborder="0" allowfullscreen></iframe>
</div>
CSS .videosetter{
}
.videowrapper {
/*float: none;
clear: both;
width: 100%;
height:100%;
position: absolute;
background-color:blue;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;*/
}
.videowrapper iframe {
position: relative;
top: 2px;
left: 12px;
margin-bottom:3px;
margin-left:0px;
width:250px;
height:145px;
border-width:1px;
border-style:solid;
border-color:black;
}
jQuery $(document).ready(function() {
this.player = new YT.Player('player', {
height: pxHeight,
width: pxWidth,
playerVars: {
'rel': 0,
'controls': 0,
'fs':0
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError': onError
}
});
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
LOG("Youtube Playing");
} else if (event.data == YT.PlayerState.ENDED) {
LOG(">>>Youtube Ended");
this.player.loadVideoById(ID, 0, "default");
} else if (event.data == YT.PlayerState.PAUSED) {
LOG("Youtube Paused");
} else if (event.data == YT.PlayerState.BUFFERING) {
LOG("Youtube Buffering");
} else if (event.data == YT.PlayerState.CUED) {
LOG("Youtube Cued");
}
}
});
这是我制作的一个jsFiddle,在第一个视频结束后立即播放第二个视频。
var player1, player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '195',
width: '320',
videoId: 'zgQaEAhMIOI',
events: {
'onReady': onPlayer1Ready, //Called first
'onStateChange': onPlayer1StateChange //Called when #player1 state changes
}
});
player2 = new YT.Player('player2', {
height: '195',
width: '320',
videoId: 'zgQaEAhMIOI',
events: {
'onReady': null, //Set to null as it is controlled by #player1
'onStateChange': null //Set to null as it is controlled by #player1
}
});
}
function onPlayer1Ready(event) {
event.target.playVideo();
}
function onPlayer1StateChange(event) {
if (event.data == YT.PlayerState.ENDED) { //When #player1 video ends,
player2.playVideo(); //#player2 video starts
}
}
它完全基于YouTube API。
相关文章:
- 我可以使此幻灯片图像自动播放吗?
- 在jquery中生成一个自动前缀编号
- 如何使jquery自动播放
- 我可以共享一个HTML播放器吗
- 在移动设备中自动播放视频
- 需要帮助自定义幻灯片自动播放
- Javascript自动播放声音文件,单击其中一个按钮时停止
- 制作一个html5音频播放列表,自动播放一首又一首歌曲
- HTML5视频上一个 - 下一个和自动播放
- 试图在Chrome扩展中添加一个功能,以防止scmplayer在页面访问时自动播放
- 更多的Vimeo视频在一个单一的播放器自动播放
- 自动播放YouTube在羽毛轻灯箱时,一个按钮被点击
- 如何使2个YouTube视频自动播放一个接一个
- HTML自动播放一个视频然后循环另一个
- & lt; cfmediaplayer>如何自动播放下一个曲目
- 如何保持只有一个图像在SlidesJS没有自动播放
- HTML5音频播放器-自动播放下一个类实例
- 不管怎样,我可以把一个电影剪辑放在鼠标上自动播放我的电影吗
- 将自动播放 + 上一个和下一个按钮添加到滑块
- 我需要帮助创建一个HTML5视频播放器与播放列表,自动播放播放列表中的所有视频