CODEWITHSUNDEEP
youtube
Connor Anderson
Connor Anderson

Reputation: 33

Play Youtube videos one after the other

Is there any way to play one youtube video after another, or better yet, play a sequence of videos one after another with no breaks inbetween? I'm unsure how to do this using the youtube API, but I know it can be done somehow.

Upvotes: 1

Views: 2599

Answers (3)

Ranjeet Singh
Ranjeet Singh

Reputation: 9

I am having an array of video IDs that want to play. In your onStageChange function, on the video ended state, pick next video from array and start playing it. At the end of all array videos it will start again from initial.

<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var videoId = ['gCFpK_z0Y1o', '2XXzYCfBiAg', 'H-N2SynCSEs', '6PDBRoRFYvo'];
var player; currentVideoId = 0;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            autoplay: 1,
           // loop: 1,
           // rel: 0,
           // showinfo: 0,
           // autohide: 0,
           // modestbranding: 1,

        },            
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    event.target.loadVideoById(videoId[currentVideoId]);
}

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
        currentVideoId++;
        if (currentVideoId < videoId.length) {
            player.loadVideoById(videoId[currentVideoId]);
        } else {
            currentVideoId = 0;
            event.target.loadVideoById(videoId[currentVideoId]);
        }
    }
}

Upvotes: 1

Praneet Sharma
Praneet Sharma

Reputation: 81

This is simple. I am assuming you have an array of video IDs you want to play. In your onStageChange function, listen for video ended state and once that happens, pick next video from array and start playing it. To play the next video, you need to call loadVideoById function followed by playVideo() call. Hope this helped.

And as @rupps said, whether your videos will run without any breaks one after another depends on factors like internet speed. You cannot buffer all videos of a playlist beforehand.

Visit this post to view the sample - Play a 2nd youtube video after first one has finished playing

Upvotes: 1

rupps
rupps

Reputation: 9907

The easiest way is using Youtube API method to specify a playlist (check the docs). The harder way is to play the videos yourself, listening for the Video End event, then playing the next one.

About no breaks, that depends on a lot of things:

  • The speed of the internet connection
  • wether the videos have ads or not

If the videos have no ads, and you are not satisfied with the breaks you are getting, you might try to cue the next video say 5 seconds before the former video ends, then when you get the Video Finish event, just send a play to the next video. To do this, you have to sequence the videos yourself.

Upvotes: 1

Related Questions