Video is now being consumed in more devices than ever before. However, the disparity in video formats, technology and licensing on some devices and platforms has resulted in inconsistent online video viewing experiences. A new approach called ‘Video For Everyone’ now makes it possible to embed your video in different formats, delivering only the version a device supports ensuring that your video reaches your target audience.

‘Video For Everyone’ or VFE (developed by Kroc Camen) is a simple piece of HTML code that combines the video element from HTML5 with the code we normally use to embed a piece of media within it. The benefit of VFE is that it allows us to easily deliver video in multiple formats without the use of client or server side code. The video plays as Flash, QuickTime, Mp4 or OGG depending on what the device supports. It’s an elegant solution that takes less than 20 lines of code whereas before it would require logic to recognize the platform, browser and version to achieve the same result.

<video width="640" height="360" poster="__POSTER__.JPG" controls> <source src="__VIDEO__.OGV" type="video/ogg"></source> <source src="__VIDEO__.MP4" type="video/mp4"></source><!--[if gt IE 6]> <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! [endif]--><!--[if !IE]><!--> <object width="640" height="375" type="video/quicktime" data="__VIDEO__.MP4"> <!--<![endif]--> <param name="src" value="__VIDEO__.MP4" /> <param name="showlogo" value="false" /> <param name="autoplay" value="false" /> <object width="640" height="384" type="application/x-shockwave-flash" data="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4"> <param name="movie" value="__FLASH__.SWF?image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__POSTER__.JPG" width="640" height="360" alt="__Title of video__" title="No video playback capabilities, please download the video below" /> </object><!--[if gt IE 6]><!--></object><!--<![endif]--> </video> <p>Download Video: <a href="__VIDEO__.MP4">Apple iTunes "MP4"</a> | <a href="__VIDEO__.OGV">Open Format "OGG"</a></p>

Visit 'Video For Everyone' page for full documentation.

At its core, VFE combines the HTML5 video tag, which is yet to be finalized but it’s already supported in some browsers, with the object tag and Internet Explorer’s version logic. As the page loads, the browser reads through the code until it finds the implementation it supports. If the browser fails to support the code set, it can display a predetermined image instead. This image can be a screen-shot of your video linked to a page on your site where you can then provide your content by other means. For users with browsers that don’t support any of these formats, it’s recommended that a link to the video file is provided below so they can download it.

Download Video: Apple iTunes "MP4" | Open Format "OGG"

‘Video For Everyone’ is a great technique that can be used to address video format issues and ensure a pleasant experience for everyone. Feel free to check this page out on other devices to see VFE in action. Being able to see your video play on iPhone’s is great and we can’t wait to see it in action on an iPad.