W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML onprogress attribute example</title>
    <meta charset="utf-8" />
</head>
<body>
    <h3>HTML onprogress attribute example</h3>
    <div class="example">
        <video controls id="myvideoid" width="250">
        
            <source src="source-video-path.mp4"
                type="video/mp4"> 
        </video>
    </div>
    <div>
    	<button type="button" class="loadButton">Load video</button>
    </div>
    <div class="event-log">
        Event log:<p readonly id="eventLog"></p>
    </div>
    <script>
        let source="";
        const video = document.querySelector("video");
        const loadButton = document.querySelector(".loadButton");
        const eventLog = document.querySelector("#eventLog");

function handleEvent(event) {
            eventLog.innerHTML += event.type + "<br>";
        }
        
        video.addEventListener("loadeddata", handleEvent);
        video.addEventListener("loadedmetadata", handleEvent);
        video.addEventListener("durationchange", handleEvent);
        video.addEventListener("progress", handleEvent);
        video.addEventListener("loadstart", handleEvent);
        video.addEventListener("canplay", handleEvent);
        video.addEventListener("canplaythrough", handleEvent);
        
        
        if(video.children[0]==null || video.children[0].getAttribute('src')==null ){
           loadButton.addEventListener("click",()=>{
           source = document.createElement("source");
           //"https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4"
    	   source.setAttribute("src", "video-source.mp4",);
    		source.setAttribute("type", "video/mp4");
            video.appendChild(source);
            });
        }
        
    </script>
    <p>Note: If you set src correctly, the handler will generate a response.</p>
</body>
</html>