How to create Video Playlists with api.video's Player SDK

Sometimes your video content flows nicely from one video to another. If this is the case, having the player automatically load the 'next' video in a sequence would be convenient.

In this post, we'll use the JavaScript Player SDK to control the videos that appear in the player. The demo application is available at watch.a.video/playlist/, and the code is on GitHub.

Video Playlist

Each video at api.video has a unique videoId. You can get this value from the video API, or you can extract it from the go.api.video URL for each video. I selected four videos from my account, and created an array with their videoIds:

var videos = [
            "vi7RSVfjmrCmQZgS12j7VW5X", //Edinburgh bagpipes
            "vi4uIigPjKOXiVnBGLjHDIMs", //clouds from a plane
            "vi3DZ8BOJBt3DxqenDSDXL1Z", //Zurich Christmas church
            "vi1rdVw3OxmAzpCM7mJmlz2c" //Munich surfing
        ];
var counter = 0;

This array will be our playlist. We also create a counter that we will use to loop through the array.

Creating a video player instance

The SDK makes it very easy to create a video on a page. The first step is to include the SDK script file:

<script src="sdk.js"></script>

In the above example, I simply have a div with the ID myVideo:

<div id="myVideo" ></div>

when the page loads, we call the createVideo function. This will use the player SDK to create a player instance in the myVideo div. The videoId is set to the first video in the videos array, and we tell the player to autoplay - so the video starts as soon as it has loaded.

window.onload = createVideo(counter);

        function createVideo(counter) {
            console.log("video", counter +videos[counter]);
            window.player = new PlayerSdk("#myVideo", { 
               id: videos[counter], 
                autoplay: true
                // ... other optional options s
            });
            player.addEventListener('play', function() { 
                //console.log("playing");
                onPlay(counter);
            });
            player.addEventListener('ended',function() { 
                console.log("ended");
                counter ++;
                //if we hit the end of the array - start over again
                if (counter == videos.length){
                    counter = 0;
                }
                onEnd(counter);
            });
    
        }

There are 2 listeners attached to the player we created: 'play' and 'ended'

Play Listener

The play listener fires when the video starts playing. Obviously, this happens at the start, but also when unpaused, and also whenever there is a 'seek' - the user jumps ahead or behind in the video.

the onPlay() function simply updates the 'videoInfo' div:

        function onPlay(counter) {
           // console.log("onPlay");
            console.log("counter" ,counter);
            document.getElementById('videoInfo').innerHTML = "video playing " + counter;
            console.log("video playing");
        }

Ended Listener

When the video ends, this event fires. We increment the counter (or if we are an the end of the array - we reset counter to 0), and call onEnd():

        function onEnd(counter){
            //console.log("onEnd");
            document.getElementById('videoInfo').innerHTML = "video over" ;
            //console.log("video over");
            player.destroy();
            //video is over - so start another one...
            createVideo(counter);
        }

onEnd destroys the current player, and then calls the createVideo function to create a new player with the new video in it.

Jump to the next/previous video

There are 2 arrow images to the left and to the right of the video. Clicking these will cause the video to skip to the next video (the right arrow) or the previous video (left arrow).

This is controlled with a clicklistener. Here's how we move to the "previous" video:

        document.getElementById("prev").onclick = function() {
            counter--;
            if( counter < 0){
                counter = videos.length -1;
            }
            player.destroy();
            createVideo(counter);
        }

It simply decreases the counter by 1 (and handles the case if we are at counter=0 by going to the last video), destroys the current player, and creates a new player with the new counter value.

The "next" clickListener works the same way (and the code is in the repo.

Playlist

onEnd calling createVideo creates a loop: after the video ends, start the next video. This effectively creates a playlist that can be controlled by the array.

Conclusion

Using the api.video Player SDK, we have created a way to play one video after another. Give it a try, and let us know what you think on our community page!