JSFiddle - React, Tailwind, and code Playground
by redlaw
HTML
<video id="urlVideo" width="100%" height="460" controls autoplay src="https://www.w3schools.com/JsrEF/movie.ogg">
Your browser does not support the video tag.
</video>
JavaScript
//add video playlist functionality to auto play next video based on id
//will only work if video src is inside video tag
var vid = document.getElementById("urlVideo");
vid.onended = function() {
var video1 = "https://www.w3schools.com/JsrEF/movie.ogg";
var video2 = "https://media.w3.org/2010/05/sintel/trailer.mp4";
var video3 = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4";
var video4 = "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4";
var video5 = "https://www.w3schools.com/html/mov_bbb.mp4";
var videoTags = document.getElementById("urlVideo").src;
console.log(videoTags);
if (videoTags === video1) {
document.getElementById("urlVideo").src = video2;
}
if (videoTags === video2) {
document.getElementById("urlVideo").src = video3;
}
if (videoTags === video3) {
document.getElementById("urlVideo").src = video4;
}
if (videoTags === video4) {
document.getElementById("urlVideo").src = video5;
}
};