After an article about the audio, it’s time to write also about HTML5 Video.

Working with HTML5 Video

The <video> element of HTML5 specification allows the user to play videos in the browser without installing additional plug-ins.

Example of use:

<video controls>
 <source src="video.webm" type="video/webm">
 <source src="video.ogv" type="video/ogg">
 <source src="video.mp4" type="video/mp4">
 No video support.
</video>

As in the case of audio, we can add the controls attribute, to show the basic UI elements for video playback control.

For details about the parameters, and other basic information, please take a look on W3Schools:

http://www.w3schools.com/tags/tag_video.asp

and

http://www.w3schools.com/html/html5_video.asp

Let’s consider yet another example, in which the video is played only when user puts the mouse cursor on it:

<video id="vid" onmouseover="this.play()" onmouseout="this.pause()"
  autobuffer="true" width="400px" height="300px">
  <source src="my.ogv" type='video/ogg; codecs="theora, vorbis"'>
  <source src="my.mp4" type='video/mp4; codecs="mp4a.40.2"'>
</video>

For source elements we set also the type and codes attributes.

Ready solutions

There is a lot of good, ready solutions, based on HTML Video and JavaScript. And if so, why not take advantage of them?

JW Player

Working with this player was a pleasure. Unfortunately free version is for non-commercial use only.

WWW:

http://www.jwplayer.com/

Popcorn.js

For those looking for something stronger — Popcorn.js. It’s the HTML5 Media Framework, provided by Mozilla:

http://popcornjs.org/

Video.js

Yet another video player, already mentioned in one of previous articles:

http://www.videojs.com/

Resources

At the end — additional resources related with HTML5 Video:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

http://www.smashingmagazine.com/2011/03/11/syncing-content-with-html5-video/

Summary

Historically, enabling video playback on a website for as much as possible the number of users, was quite a complicated task. Today, with HTML5 video and libraries based on it, only few lines of code is enough.

Programmer is able to reach desired (and working) effect quickly, without strange workarounds.

thank_you.avi