Video tag in HTML5
Alright, so we’ve made it through working with audio in html5 and have moved onto video. Though we went over this in lab today, I figured it would be useful to have the code out there on our blog.
So video in html5 is handled much like audio. In order to make as many browsers happy as possible, we need to create both a .mp4 and a .ogv copy of our video. You can get a .mp4 straight out of Final Cut, just remember to watch file size. For the .ogv file we use firefogg – one of the few free ways to get the .ogv we need. Firefogg is a plugin for firefox and can be found at: http://www.firefogg.org/
Why is all of this necessary you may ask. Basically, firefox (mozilla) uses the .ogg/.ogv because the codecs involved are open source and therefore has no copyrights, whereas Safari, IE 9+, Chrome, and Opera have opted for more widely used/accessible codecs which are copyrighted and therefore may not always be free to use.
Once you have both files (remember to watch file size), its time to create your video webpage. Step 1: make sure your page is html5, this will not work if its not. Step 2: use the <video> tag and if you want the browser to include controls, use the controls attribute. Step 3: point to your video with the source command and use the type attribute – it tells the browser which file to access. It should look like this:
<video controls width=”videowidth” height=”videoheight”>
<source src=”videoname.ogv” type=”video/ogg” />
<source src=”videoname.mp4″ type=”video/mp4″ />