HTML5 Game - Display HTML5 Video Properties

  1. HOME
  2. HTML5 Game
  3. Video
  4. Video Element

Description

Display HTML5 Video Properties

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
let videoElement;/*from   w w  w. j  a  v a  2s. c om*/
let videoDiv;
function eventWindowLoaded() {
  
  videoElement = document.createElement("video");
  let videoDiv = document.createElement('div');
  document.body.appendChild(videoDiv);
  videoDiv.appendChild(videoElement);
  videoDiv.setAttribute("style", "position: absolute; top: 50px; left: 600px; ");
  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.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,  100 ,290);
    context.fillText  ("Muted: " + videoElement.muted,  180 ,290);
    context.fillText  ("Controls: " + videoElement.controls,  260 ,290);
    context.fillText  ("Volume: " + videoElement.volume,  340 ,290);
        
  }
  
  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>

Related Topic