JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<div>
<button onclick="startvideoHandler()" type=button>Start</button></div>

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c8/Sneak_Preview_-_Wikipedia_VisualEditor.webm/Sneak_Preview_-_Wikipedia_VisualEditor.webm.240p.vp9.webm" height="240" width="386" controls preload="">
</video>

JavaScript

const newVid = "https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c8/Sneak_Preview_-_Wikipedia_VisualEditor.webm/Sneak_Preview_-_Wikipedia_VisualEditor.webm.360p.vp9.webm"

function eventLogger( e ) {
 console.log( e.type );
}

const videoEl = document.querySelector( 'video');
videoEl.addEventListener( 'loadedmetadata', eventLogger );
videoEl.addEventListener( 'loadeddata', eventLogger );
videoEl.addEventListener( 'loaded', eventLogger );
videoEl.addEventListener( 'canplay', eventLogger );
videoEl.addEventListener( 'canplaythrough', eventLogger );
videoEl.addEventListener( 'timeupdate', eventLogger );
videoEl.addEventListener( 'progress', eventLogger );
videoEl.addEventListener( 'playing', eventLogger );

startvideoHandler = function() {
   videoEl.play();
   setTimeout( function() {
     videoEl.src = newVid;
   }, 3000);
}