HTML5: video 0
HTML5 promises to make putting a video on a website as easy as placing an image on a it. Say goodbye to plugins like Quicktime and Flash (which is dead anyway 
) and get excited about this native way of embedding video’s!
A huge advantage of embedding a video natively is that you can manipulate it just a easily.
To embed a video, first it must be in a format that the browser will understand:
- H.264 – supported by Safari, Mobile Safari, Chrome and IE9.
H.264 is not an open standard, so there is no promiss that it will remain free. Firefox does not support it.
Use, for example, HandBrake to convert to an H.264 video. - Ogg Theora – supported by Firefox and Chrome.
Ogg Theora is an open standard (free forever).
Use, for example, firefogg to convert to an ogg video. - webm – not much support yet
Webm is a video codec from Google, it’s high quality and open standard.
As you can see, we’ll have to include at least 2 video formats in our website if we want all users to be able to view it.
Using the tag:
Just one video:
<video src=”videos/myvideo.ogv” width=”500″ height=”500″ controls></video>
The controls attribute will add basic controls to the video.
Multiple videos:
<video width=”500″ height=”500″ controls>
<source src=”videos/myvideo.ogv” type=’video/ogg; codecs=”theora, vorbis” ‘>
<source src=”videos/myvideo.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″ ‘>
</video>
The type attribute will tell the browser which codecs are required to play the video. This way, the video will only be downloaded if the browser supports the codec. The codec may vary depending on what software you used to convert the video. If you omit the type attribute, then the browser will try each codec to see if it can play the video, which could result in the use of a lot of unnecessary bandwidth.
Interacting with the video is possible with the use of JQuery. You can have a look at JQuery UI elements as a starting point.
