How to get your video formats right

HTML5 and CSS3 have made a whole bunch of new things possible on websites, including the playing of streaming native video.

Video before HTML5

Prior to HTML5, if you wanted to play a video on a browser you needed a 3rd party plugin.  Probably the most popular video plugin was Flash.  For the web developer to create a video in Flash, he/she needed to do some conversion work and use some non-standard HTML to embed the video into the webpage.  

It was a bit of work for the developer, requiring some additional skills but in the mid-2000s, Flash was pretty cool because it was just about the only way you could do animation and video. It became the default way of showing website video.

That was fine when all the browsers had a Flash plugin, but it all kind of changed in 2009 when Apple said it wouldn't support Flash on the iPhone.  If you visit a website containing video with your smartphone and get a message saying 'Can't play this media' or similar, it's probably because the video is being delivered in Flash format.  Try the BBC video pages, for example.

The <video> tag

Enter HTML5.  It has the <video> tag to allow you to put video into a page.   Here's what the tag might look like in a HTML page (simple version):

<video>
<source src="./video/vid.mp4" type='video/mp4' >
<source src="./video/vid.webm" type='video/webm' >
<source src="./video/vid.ogv" type='video/ogg' >
</video>

Why are there three video files listed, you may well ask?

It's to cater for different browsers because certain browsers will only play certain formats.  The browser works by looking at the each file in the sequence and if it finds a format it can play, it will choose it and play it.

Which browsers play which formats?  Good question - it's a moving target and it's related to licensing, ownership and browser versions.  Suffice to say, if you've got these 3 formats, the major browsers on desktop, tablet and smartphone will usually find a format that can play.

Getting your video formats right

So, that means if you are going to put a video on a webpage you will need to do some video conversion.  You're going to need to get it in the right formats.

There are plenty of video software converters around, but we've found that some may produce files in the formats required, but sometimes  (maybe the combination of video container and codec) they won't play in a browser.  So here is a process we've used:

1. We get the video into a known 'good' format as a baseline starting point.  We use Sony's Vegas Movie Studio to load up the video, maybe do a little editing and add titles, then generate a MP4 video/audio that we know is in a good baseline state.
2. Then we use the free Miro Video Converter to generate a WebM format.  
3. Miro can also generate Ogg/Theora format, but the quality setttings are currently too low, so we use the open source Theora Converter .NET to produce our Ogg format.

No HTML5 support

What about those poor souls who have old browsers not capable of handling the <video> tag?  Yes, I'm talking to you Mr Internet Explorer 8!

Well, it degrades gracefully - old browsers will just ignore the <source> items.  All you need to do is get your video into Flash and stick in the Flash embedding HTML code at the bottom of the video tag section, and the old browsers will play it (providing they have a Flash plug-in):

<video>
<source src="vid.mp4" type='video/mp4'>
<source src="vid.webm" type='video/webm'> 
<source src=".vid.ogv" type='video/ogg'>

<object>
<param name="quality" value="high" />
<param name="scale" value="exactfit" />
<param name="wmode" value="window" />
<param name="allowFullScreen" value="true" />
<param name="src" value="vid.swf" />
<embed type="application/x-shockwave-flash" src="vid.swf"></embed>
</object>

</video>

YouTube?

Yes, YouTube.  It's a very useful way of putting video on a webpage and you don't need to think about conversion at all.  YouTube is some very smart software.

You load up your video in just about any format.  In the background, YouTube converts it to all the formats it needs.  You embed the YouTube reference into your webpage, then whenever anyone looks at the video, it works out what format to deliver and sends it down to the viewer.

The downside is that it takes away your control and at the end of the video, it may well show a link to a related video from your competitor!  Not a good thing.

comments powered by Disqus