Hi there fellow SO users, I have started to develop a music archive site where users can share YouTube video's (Limited to music only).
I would like to incorporate a system which allows a list of these videos to be played automatically when the previous has finished.
The following code can be used to auto play a set array of videos, which will use one player rather than a list of them. In pseudo terms, the system I would like to create would be laid out in the following manner;
Player 1, Video 1
Player 2, Video 2
Player 3, Video 3
Player 4, Video 4
<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 player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player1', {
height: '350',
width: '425',
videoId: 'uO7kCUjUaUE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
player2 = new YT.Player('player2', {
height: '350',
width: '425',
videoId: 'Bt9tTEZjYG8'
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player2.playVideo();
}
}
</script>
An existing topic Get Multiple Embedded Youtube Videos to Play Automatically in Sequence touches on this question (script source), however extended ideas from the OP are not answered. Including the idea that when one video is played, all others are paused.
My questions are, would there be a simple way of modifying this code to achieve this or will a new script have to be written? Does this system exist elsewhere? Could JWPlayer be the solution?
Discussion and advice on this topic will be greatly appreciated!
Here is another example that does more of what you want:
<!DOCTYPE html>
<html>
<head>
<title>4 Videos</title>
</head>
<body>
<script src="http://p.jwpcdn.com/6/11/jwplayer.js" type="text/javascript"></script>
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<div id="player4"></div>
<script type="text/javascript" language="javascript">
jwplayer("player1").setup({
file: "http://www.youtube.com/watch?v=xSE9Qk9wkig"
});
jwplayer("player2").setup({
file: "https://www.youtube.com/watch?v=NKPiIoLNMpA"
});
jwplayer("player3").setup({
file: "https://www.youtube.com/watch?v=hS5CfP8n_js"
});
jwplayer("player4").setup({
file: "https://www.youtube.com/watch?v=MZoO8QVMxkk"
});
jwplayer("player1").onComplete(function(){
jwplayer("player2").play();
});
jwplayer("player2").onComplete(function(){
jwplayer("player3").play();
});
jwplayer("player3").onComplete(function(){
jwplayer("player4").play();
});
jwplayer("player4").onComplete(function(){
jwplayer("player1").play();
});
jwplayer("player1").onPlay(function(){
jwplayer("player2").stop();
jwplayer("player3").stop();
jwplayer("player4").stop();
});
jwplayer("player2").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player3").stop();
jwplayer("player4").stop();
});
jwplayer("player3").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player2").stop();
jwplayer("player4").stop();
});
jwplayer("player4").onPlay(function(){
jwplayer("player1").stop();
jwplayer("player2").stop();
jwplayer("player3").stop();
});
</script>
</body>
</html>
or
jwplayer("player1").onComplete(function(){
jwplayer("player2").play();
jwplayer("player1").stop();
});
etc.