Creating simple video events
<!doctype html> <html lang="en"> <head> <script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); let videoElement;//www . j av a 2 s .c o m let videoDiv; function eventWindowLoaded() { videoElement = document.createElement("video"); videoDiv = document.createElement('div'); document.body.appendChild(videoDiv); videoDiv.appendChild(videoElement); videoDiv.setAttribute("style", "display:none;"); let videoType = supportedVideoFormat(videoElement); if (videoType == "") { alert("no video support"); return; } videoElement.addEventListener("canplaythrough",videoLoaded,false); videoElement.setAttribute("src", "http://java2s.com/style/demo/your." + videoType); } function supportedVideoFormat(video) { let returnExtension = ""; if (video.canPlayType("video/webm") =="probably" || video.canPlayType("video/webm") == "maybe") { returnExtension = "webm"; } else if(video.canPlayType("video/mp4") == "probably" || video.canPlayType("video/mp4") == "maybe") { returnExtension = "mp4"; } else if(video.canPlayType("video/ogg") =="probably" || video.canPlayType("video/ogg") == "maybe") { returnExtension = "ogg"; } return returnExtension; } function videoLoaded() { canvasApp(); } function canvasApp() { function drawScreen () { context.fillStyle = '#ffffaa'; context.fillRect(0, 0, theCanvas.width, theCanvas.height); //Box context.strokeStyle = '#000000'; context.strokeRect(5, 5, theCanvas.width-10, theCanvas.height-10); //video context.drawImage(videoElement , 85, 30); // Text context.fillStyle = "#000000"; context.font = "10px sans"; context.fillText ("Duration:" + videoElement.duration, 10 ,280); context.fillText ("Current time:" + videoElement.currentTime, 260 ,280); context.fillText ("Loop: " + videoElement.loop, 10 ,290); context.fillText ("Autoplay: " + videoElement.autoplay, 80 ,290); context.fillText ("Muted: " + videoElement.muted, 160 ,290); context.fillText ("Controls: " + videoElement.controls, 240 ,290); context.fillText ("Volume: " + videoElement.volume, 320 ,290); //Display Message for (let i =0; i < messages.length ; i++) { let tempMessage = messages[i]; if (videoElement.currentTime > tempMessage.time) { context.font = "bold 14px sans"; context.fillStyle = "#FFFF00"; context.fillText (tempMessage.message, tempMessage.x ,tempMessage.y); } } } let messages = new Array(); messages[0] = {time:0,message:"", x:0 ,y:0}; messages[1] = {time:1,message:"Message 1", x:90 ,y:200}; messages[2] = {time:4,message:"Message 2", x:240 ,y:240}; messages[3] = {time:8,message:"Message 3", x:100 ,y:100}; let theCanvas = document.getElementById('canvasOne'); let context = theCanvas.getContext('2d'); videoElement.play(); function gameLoop() { window.setTimeout(gameLoop, 20); drawScreen(); } gameLoop(); } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="500" height="300"> Your browser does not support the HTML 5 Canvas. </canvas> </div> </body> </html>