Dealing with HTML5 video.

Working with HTML5 video objects is currently on top of website trends. How to do it properly?

How to include it in code:

<video width="300" height="200" controls>
       <source src="url2file.mp4" type="video/mp4">
       <source src="url2file.ogv" type="video/ogv">
       <source src="url2file.webm" type="video/webm">

In almost all cases you will need to add mp4 and ogv video.

In some cases you will need to get aspect ratio of you video. You cant use .height() or .width() functions from jQuery. You have to use .videoWidth and .videoHeight properties. Access to them is possible after triggered event loadedmetadata.

var el = $('video');

el.bind("loadedmetadata", function () {
   var width = this.videoWidth;
   var height = this.videoHeight;

If you want to play video you will need to get adequate instantion.

var el = $('video');