HTML5 Game - Creating simple video events

Description

Creating simple video events
Demo

<!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>
HTML5 Game - Creating simple video events

Description

Demo

Related Topic
