HTML 5 Video with Flash Fallback

HTML5 has some exciting new changes, most notably tags for embedding audio and video. Currently not all browsers will fully support these tags, but with the ability to fallback on different formats until one that works for your browser you can start using them today. The greatest benefit of using HTML5 video tags right now is its compatibility across multiple devices, notably mobile devices. The majority of mobile devices, including the iPad and iPhone, are currently unable to run flash based players. Adding the video tag allows these browsers to play your videos with their built in controls, expanding your potential audience.

Video Formats

The first item to look at when setting up the video tag is your video formats. Web browsers don’t currently agree on which video format should be the leader for the web so to support them all we’re currently stuck providing video in multiple formats. The two most common formats right now are H.264 (typically .mp4) and Theora (typically .ogv). H.264 is great format and common across the web as YouTube and the iTunes store both use it, but has a disadvantage in that MPEG LA owns the patent to the format and could potentially charge to encode videos in the future. Theora has the benefit of being royalty-free, but isn’t currently as widely used or integrated into as many tools. Currently Firefox and Opera only support Theora, while Safari (iPhone & iPad), Android, and Flash only support H.264. Internet Explorer is behind in supporting the video tag, which makes the ability to fallback to a Flash based player very useful.

Encoding HTML5 Video

To encode .ogg files I’ve used Firefogg, which is a plugin for Firefox. This tool makes it very simple to create ogg files (for batch encoding try ffmpeg2theora). Simply install the plugin and then in FireFox go to the “Tools” menu and select “Make Web Video”. From there select a file that you’ll convert and if you want you can change the output settings for quality or video size. Make sure to leave the default video and audio codecs of Theora and Vorbis both set.

To encode h.264 files I recommend HandBreak. To get started open the video file you want to convert. Choose the iPhone & iPod Touch Default settings in the right menu (window > presets drawer if its not up). Next you’ll want to set the dimensions of your video (Picture tab on PC / Window > Picture Settings on mac). Choose either a specific size you want or change it to match the source settings (as they have changed to a size specific to the iPhone). Check the “Web Optimized” box and in the video you can adjust the quality if necessary to keep your file small. If your video has audio click on that tab and change the setting to “AAC (faac)”. Now you’re ready to encode, either click start or add to queue and repeat this process with another video.

handbreak screenshot

Setting up the Video Tag

If you got all the conversions done correctly, now is the easy part. Simply add a video tag with the height and width of your video. Adding “controls” to the tag will allow the user to pause/play the video and adjust the volume (other options for the video tag include preload, loop and autoplay). Then list the source location of the videos you created above in the order you want browsers to attempt to play them. If they are unable to play the first file they will continue to the next one.

<video width="710" height="400" controls="controls"><source src="video_file.mp4" type="video/mp4" /><source src="video_file.ogv" type="video/ogg" /><object width="710" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.kylejlarson.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/blog/wp-admin/video_file.mp4&amp;poster=/blog/wp-admin/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="710" height="400" type="application/x-shockwave-flash" src="http://www.kylejlarson.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/video_file.mp4&amp;poster=/blog/wp-admin/" allowfullscreen="true" allowscriptaccess="true" /></object>

     </video>

Tips: The iPhone currently reads only the first video source so you’ll want your mp4 file listed first. If you’re maintaining your own server you’ll want to make sure you have these MIME types added: video/ogg .ogv & video/mp4 .mp4.

Falling back to Flash

The next step to cover yourself for old browsers and the always behind Internet Explorer is adding a Flash Player to the end of the video tag. The nice thing is this will work just like it did for the video files, if the first two don’t work it’ll move right on to the Flash. You can add in whichever Flash player you’d like to use, but my preferred player is the JWPlayer, so thats what I’ll be using.

<video width="710" height="400" controls="controls"><source src="video.mp4" type="video/mp4" /><source src="video.ogv" type="video/ogg" /><object width="710" height="400" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.kylejlarson.com/blog/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/video.mp4&amp;poster=/blog/wp-admin/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="710" height="400" type="application/x-shockwave-flash" src="http://www.kylejlarson.com/blog/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/blog/wp-admin/video.mp4&amp;poster=/blog/wp-admin/" allowfullscreen="true" allowscriptaccess="true" />     </object>

     </video>

That’s all there is to setting up an html 5 video tag. Here’s a sample:

Related Links

Here’s a few projects and informational sites to check out for html video:

Tags: , ,

« Older     Newer »

Leave a Comment

Back to top
More Posts