Sometimes, we want to create a HTML 5 video or audio playlist with JavaScript.
In this article, we’ll look at how to create a HTML 5 video or audio playlist with JavaScript.
How to create a HTML 5 video or audio playlist with JavaScript?
To create a HTML 5 video or audio playlist with JavaScript, we can load the next video after the current one ends.
For instance, we write
<video
id="videoPlayer"
src="path/of/current/video.mp4"
autoplay
autobuffer
controls
/>
to add a video element.
Then we write
const nextVideo = "path/of/next/video.mp4";
const videoPlayer = document.getElementById("videoPlayer");
videoPlayer.onended = () => {
videoPlayer.src = nextVideo;
};
to select the video element with getElementById.
And then we set its onended property to a function that updates the src attribute to the path of the next video to play.
Conclusion
To create a HTML 5 video or audio playlist with JavaScript, we can load the next video after the current one ends.
