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″ />

</video>

Advertisements

Posted on 03/22/2012, in making it work, video editing, web. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: