The <video> element JavaScript API

The JavaScript API is useful for implementing playlists, making custom user interfaces and many other interesting things. The "enhanced HTML5 multimedia players" lesson presented further on in the courses relies heavily on this API.

Example #1: how to use external buttons to control the player's behavior

This example gives the first steps towards writing a custom video player. It shows basic usage of the JavaScript API for adding custom buttons to play/pause the video or to go back to the beginning by setting the currentTime property to zero.

Try it online:

The JavaScript API is useful for implementing playlists, making custom user interfaces and many other interesting things. The "enhanced HTML5 multimedia players" lesson presented further on in the courses relies heavily on this API.

Example #1: how to use external buttons to control the player's behavior

This example gives the first steps towards writing a custom video player. It shows basic usage of the JavaScript API for adding custom buttons to play/pause the video or to go back to the beginning by setting the currentTime property to zero.

Try it online:

HTML:

<!DOCTYPE html>

<head>

<title>Example #1: Video/Canvas Demo</title>

</head>

<body>

<!-- <video> tag, with the @controls attribute giving it the play/pause/seeker controls. Try removing the controls attribute, adding autoplay or loop

-->

<!-- I have three versions of the video encoded with different codecs. The browser will automatically choose the first one it knows it can play.

-->

</video>

<p>Example of custom controls:</p>

<button onclick="pauseVideo();" style="cursor: pointer;">Pause</button>

Retour au début</button>

vid = document.querySelector("#vid");

function playVideo() {

vid.play();

}

function pauseVideo() {

vid.pause();

}

function rewindVideo() {

vid.currentTime = 0;

}

</script>

</body>

</html>

Source code extract:

<source src=https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.webm

type=video/webm>

...

</video>

<p>Example of custom controls:</p>

<button onclick="pauseVideo();" style="cursor: pointer;">Pause</button>

Back to beginning</button>

vid = document.querySelector("#vid");

function playVideo() {

vid.play();

}

function pauseVideo() {

vid.pause();

}

function rewindVideo() {

vid.currentTime = 0;

}

</script>

Explanations:

Lines 7, 9 and 11: we add a click listener to each button, in order to call a JavaScript function when each button is clicked.
Line 14: using the DOM API, we get the JavaScript object that corresponds to the video element we inserted in the HTML document. This line is not within a function, so will be executed when the page loads.
Lines 17 and 20: we call methods from the API for playing/pausing the video.
Line 24: we modify the currentTime property in order to rewind the video. Note that vid.load() also rewinds the video and shows the poster image again, but it also pauses the video. By using currentTime=0, the playback does not stop.

Example #2: how to detect the end of a video and start another one

This example listens to the ended event, and calls a callback function when the video is ended.

video not supported

</video>

var vid = document.querySelector('#myVideo');

vid.addEventListener('ended', playNextVideo, false);

function playNextVideo(e) {

// Whatever you want to do after the event, change the src attribute

// of the video element, for example, in order to play another video

}

</script>

Example #3: how to manage playlists - sequential movies

This example detects the end of a video, then loads the next video, changes the src attribute of the video element and plays the video.

Check the online example below: use the progress cursor to go near the end of the first video that is being played, and see how it continues with the next video.

Source code:

<!DOCTYPE html>

<head>

<title>Sequential Movies</title>

var myVideo;

var currentVideo = 0;

var sources = [

"https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4",

"https://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4"

];

// Set the src of the video to the next URL in the playlist

// If at the end we start again from beginning (the modulo

// source.length does that)

function loadNextVideo() {

myVideo.src = sources[currentVideo % sources.length]

myVideo.load();

currentVideo++;

}

// listener plays the video

function loadAndplayNextVideo() {

console.log("playing " + sources[currentVideo % sources.length])

loadNextVideo();

myVideo.play();

}

// Called when the page is loaded

function init(){

// get the video element using the DOM api

myVideo = document.querySelector("#myVideo");

// Defines a callback function called each time a video ended

myVideo.addEventListener('ended', loadAndplayNextVideo, false);

// Loads the first video when the page is loaded

loadNextVideo();

}

</script>

</head>

<video id="myVideo"

controls>

</video>

</body>

</html>

Explanations:

Line 9: the JavaScript array that contains the URLs of the videos in the playlist. In this example, we've got only two of them, but if the array is larger the example still works.
Line 44: when the page is loaded, an init() function is called.
Lines 34-40: we use the DOM to get the JavaScript object corresponding to the video element, then define a listener for the ended event. Each time a video ends, the loadAndplayNextVideo() callback is called. As the video element has no src attribute by default, we also preload the first video (call to loadNextVideo() at line 38).
Lines 17-21: the loadNextVideo() function uses a variable called currentVideo that corresponds to the index of the current video. By setting myVideo.src = sources [currentVideo % sources.length], we set the src of the video element to sources[0], then to sources[1], and, as we increment the currentVideo index each time (line 19), if it becomes greater than 1, the modulo (the "%" symbol is the modulo in JavaScript) will make it "loop" between 0 and the number of videos in the playlist. In other words, when the last video ends, it starts back at the first one.