HTML5 Game - Rotating a video

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

Description

Rotating a video

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<head>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
let videoElement;// ww w .j a v 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() {
  let rotation = 0;
  function  drawScreen () {

    //Background
    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
    //*** Start rotation calculation
    context.save();
    context.setTransform(1,0,0,1,0,0); //resets the transformation back to the "identity" - basically clears it.
    
    
    let angleInRadians =rotation * Math.PI / 180;
    let x=100;
    let y=100;
    let videoWidth=320;
    let videoHeight=240;
    context.translate(x+.5*videoWidth, y+.5*videoHeight); // move the origin of the transform to the center of the video window;
    context.rotate(angleInRadians);
    //**** 
    context.drawImage(videoElement ,-.5*videoWidth, -.5*videoHeight);
    //*** restore screen
    context.restore();
    rotation++;
  }
  
  let theCanvas = document.getElementById('canvasOne');
  let context = theCanvas.getContext('2d');
  
  videoElement.setAttribute("loop", "true");
  videoElement.loop = true;
  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="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
</div>


</body>
</html>

Related Topic