Site icon StackBlogger

How to play multiple videos one after another using HTML5 and JavaScript

StackBlogger

Its a common question if you gonna make an application that requires to play multiple videos using HTML5 and JavaScript then this is the correct place you are. Here I will explain how you can play multiple videos using HTML5 and JavaScript.

Play Multiple Videos using JavaScript

Step 1

test.html

Copy paste the below code in test.html file-

1
<video autoplay playsinline loop controls="controls" id="videoPlayer" height="200">

Step 2

script.js

Script file should look like this-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
let videoSource = new Array();
videoSource[0] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4';
videoSource[1] = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4';
let i = 0; // global
const videoCount = videoSource.length;
const element = document.getElementById("videoPlayer");
 
function videoPlay(videoNum) {
    element.setAttribute("src", videoSource[videoNum]);
    element.autoplay = true;
    element.load();
}
document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);
 
videoPlay(0); // load the first video
ensureVideoPlays(); // play the video automatically
 
function myHandler() {
    i++;
    if (i == videoCount) {
        i = 0;
        videoPlay(i);
    } else {
        videoPlay(i);
    }
}
 
function ensureVideoPlays() {
    const video = document.getElementById('videoPlayer');
 
    if(!video) return;
    
    const promise = video.play();
    if(promise !== undefined){
        promise.then(() => {
            // Autoplay started
        }).catch(error => {
            // Autoplay was prevented.
            video.muted = true;
            video.play();
        });
    }
}

Step 3

Save the file and call the script.js file on test.html file. Open the test.html file in browser and you are set!

Here is a code snippet I have prepared on jsFiddle for testing-


Conclusion

This article explains how to play multiple videos one after another using JavaScript and HTML5. If you want to get more JavaScript codes, I would recommend checking them here.

Related Posts: