Tag Archives: video

Changing the aspect ratio of html5 video.


You can not directly change the video aspect of a video in a html5 video tag; however you can read the video (assuming it is on the same domain) and place it into a canvas … first create a canvas to hold the aspect ratio of the video 640 x 480 and use the style to size it in this case to a 100 x 100 box.

<canvas id=”processCanvas” height=”480″ width=”640″ style=”width:100px; height:100px”>

</canvas>

Now use straight javascript with canvas functions to copy the video from the video tag onto the canvas.

function draw( )

{

gold = document.getElementById(‘vid’);

process.drawImage(gold, 0,0,640,480);

}

var canvas = document.getElementById(‘processCanvas’);

var process = canvas.getContext(‘2d’);

setInterval ( “draw()”, 30 );

The aspect has now been changed from 640×480 to a 1 by 1 aspect or any other aspect ratio that I need. And is displayed in the canvas tag.

Using HTML5 video tag with IE8


<meta http-equiv=”X-UA-Compatible” content=”chrome=1″>

<video src=”1.ogv” controls=”controls” width=”640″ height=”480″>
your browser needs an update to support html5
to enable html5 install Google’s <a href=”http://code.google.com/chrome/chromeframe/&#8221; target=”new”>Chrome frame</a> and refresh this page.
</video>