If you want to add video to your site, the easy way is to upload it to YouTube or a similar service. CMS systems like WordPress have JavaScript solutions to make it all compatible. But what if you don’t want to use YouTube? If you’re making your own CMS or web application, you can try HTML5 Video.
The above video was thrown-together for this post, so please forgive the shabby graphics.
<video width="640" height="360" style="border: 1px solid black;" poster="http://www.thescriptiest.com/img/logo_vid.png" controls="controls">
<source src="http://www.thescriptiest.com/vid/theScriptiest.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" />
<source src="http://www.thescriptiest.com/vid/theScriptiest.webm" type="video/webm; codecs="vp8, vorbis"" />
<source src="http://www.thescriptiest.com/vid/theScriptiest.ogv" type="video/ogg; codecs="theora, vorbis"" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="640" height="360" id="theScriptiest" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://www.thescriptiest.com/vid/theScriptiest.swf" />
<param name="quality" value="high" />
</object>
</video>`
The code starts with a video tag with a poster link. That’s the image you see before you hit play. Play controls should be added here also. See the controls=”controls”; You can also just say controls without the =”controls” but I prefer consistency.
Next are three source videos; .mp4, .webm and .ogv.
A video converter will come in handy. I’m on a mac so I use the free Miro Video Converter. It has no settings – period. So if you need that you’re out of luck. As for me, it does the job so I’m happy (it’s free).
These three video types are necessary because browsers don’t yet support each type. You will also need to add a fourth flash option to the video list for anything less than IE9.
The upside is that Apple products are supported with less code. The down side is you still need the flash, so more code.
HTML5 Video seems more like a fix for the iPhone (thanks Apple) instead of a replacement for flash (thanks IE), but there’s good news on the horizon (maybe a year away). Future Versions of IE might update without the user’s consent.
I know, sounds dodgy, but that’s the problem with IE. A lot of people don’t want to – are afraid to – are unable to update their browser. Until they do, we have to keep supporting the outdated versions. Firefox and Chrome update quietly and more often, which is part of why they are so progressive.
Pingback: theScriptiest » HTML5 Video – Fun with IE