Coding Everyday: How to play a video on HTML5 canvas tag

How to play a video on HTML5 canvas tag

Step-by-step tutorial on how to play a video on HTML5 canvas tag

First you need a video file. Actually, two. One video file in ogg format (for Chrome and Firefox) and the other one in mp4 format (for Safari). To get any video in these file formats you can use a website like www.online-convert.com or www.mediaconverter.org.

Once you have the video files, the next step is to create a simple HTML page with one canvas tag, and one video tag. Just like the code below.

 <!DOCTYPE html>  
 <head>  
 <title>Playing YouTube video on HTML5 canvas</title>  
 </head>  
 <body>  
  <video id="video" autoplay="true" loop="true">  
   <source src="./video/BigBuckBunny_640x360.ogv" type="video/ogg" />  
   <source src="./video/BigBuckBunny_640x360.mp4" type="video/mp4" />  
  </video>  
  <canvas id="canvas"></canvas>  
 </body>  
 </html>

Right now, you should be able to test the video and check if it is playing well on Chrome Safari and Firefox.

Next, we add some CSS and a new hidden div wrapping the video tag.

 <!DOCTYPE html>  
 <head>  
 <title>Playing YouTube video on HTML5 canvas</title>  
 </head>  
 <body>  
  <video id="video" autoplay="true" loop="true">  
   <source src="./video/BigBuckBunny_640x360.ogv" type="video/ogg" />  
   <source src="./video/BigBuckBunny_640x360.mp4" type="video/mp4" />  
  </video>  
  <canvas id="canvas"></canvas>  
 </body>  
 </html>

Since we will be rendering the video on canvas, we need to make the video hidden. But we will be using the audio from the video tag.

Now the only missing piece is the javascript that renders the video on canvas. To do this we need to grab a image from the video and then paint this image on canvas. If we repeat this process every X milliseconds... TA-DA! We have the video playing on canvas.

Here is the full source code:

 <!DOCTYPE html>  
 <head>  
 <title>Playing YouTube video on HTML5 canvas</title>  
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />  
 <style type="text/css">  
  html, body {  
   width: 100%;  
   height: 100%;  
   padding: 0px;  
   margin: 0px;  
  }  
  #canvas {  
   padding: 0px;  
   margin: 0px;  
   top:0;  
   left:0;  
   z-index: 30;  
   position: absolute;  
   width: 100%;  
   height: 100%;  
  }  
 </style>  
 </head>  
 <body>  
  <div style="display: none;">  
   <video id="video" autoplay="true" loop="true">  
    <source src="./video/BigBuckBunny_640x360.ogv" type="video/ogg" />  
    <source src="./video/BigBuckBunny_640x360.mp4" type="video/mp4" />  
   </video>  
  </div>  
  <canvas id="canvas"></canvas>  
  <script>  
  document.addEventListener('DOMContentLoaded', function(){  
   var v = document.getElementById('video');  
   var canvas = document.getElementById('canvas');  
   var context = canvas.getContext('2d');  
   //var cw = Math.floor(canvas.clientWidth / 100);  
   //var ch = Math.floor(canvas.clientHeight / 100);  
   var cw = Math.floor(canvas.clientWidth);  
   var ch = Math.floor(canvas.clientHeight);  
   canvas.width = cw;  
   canvas.height = ch;  
   v.addEventListener('play', function(){  
    draw(this,context,cw,ch);  
   },false);  
  },false);  
  function draw(v,c,w,h) {  
   if(v.paused || v.ended) return false;  
   c.drawImage(v,0,0,w,h);  
   setTimeout(draw,20,v,c,w,h);  
  }  
  </script>  
 </body>  
 </html>

If you want to play a video from YouTube, check this tutorial: Playing YouTube videos on HTML5 canvas with Javascript.

If you want to download a video from YouTube, check this one: Download YouTube video files with Javascript

Next, I'll show you how to make a simple HTML5 game puzzle. Stay tuned!

Coding Everyday

Thursday, October 18, 2012

How to play a video on HTML5 canvas tag

How to play a video on HTML5 canvas tag

Step-by-step tutorial on how to play a video on HTML5 canvas tag

6 comments: