DESIGNED DEVELOPED DELIVERED

Mob: 07760 392284edward@ee-web.co.uk

ee-web thinks... a bit

Go on, make my day ... leave a comment

Adding html5 video

March 2nd, 2011 by Edward

This post attempts to document my journey to getting video to work on those lovely iDevices – ie by using html5. I am indebited to the work of others, and clearly am only presenting the basics. But it does work. My next steps will be things like adding a poster image, and perhaps giving the player a unique look!

Getting Started…

I have add html5 video to some of my clients sites now. Previously, they had only had flash – so weren’t viewable on iPads and other mobiles. Now I use the <video> tag to add support for html5, with a fallback to flash. Much of what I did was taken from video for everybody – thanks!

Here’s the complete code:

&lt;video width="320" height="240" controls&gt;
&lt;!-- MP4 must be first for iPad! --&gt;
&lt;source src=".... rootsAndReflections002b_qtp.mp4" type="video/mp4" /&gt; &lt;!--Safari / iOS video    --&gt;
&lt;source src=".... rootsAndReflections002.theora.ogv" type="video/ogg" /&gt; &lt;!--Firefox / Opera / Chrome10 --&gt;

&lt;!-- fallback to Flash: --&gt;
&lt;script src=".... Scripts/swfobject_modified.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="300"&gt;
&lt;param name="movie" value=".... rootsAndReflectionsPlayer.swf"&gt;
&lt;param name="quality" value="high"&gt;
&lt;param name="wmode" value="opaque"&gt;
&lt;param name="swfversion" value="9.0.45.0"&gt;

&lt;!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. --&gt;
&lt;param name="expressinstall" value=".... Scripts/expressInstall.swf"&gt;
&lt;!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --&gt;
&lt;!--[if !IE]&gt;--&gt;
&lt;object type="application/x-shockwave-flash" data=".... rootsAndReflectionsPlayer.swf" width="320" height="300"&gt;
&lt;!--&lt;![endif]--&gt;
&lt;param name="quality" value="high"&gt;
&lt;param name="wmode" value="opaque"&gt;
&lt;param name="swfversion" value="9.0.45.0"&gt;
&lt;param name="expressinstall" value=".... Scripts/expressInstall.swf"&gt;
&lt;!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --&gt;
&lt;div&gt;
&lt;h4&gt;Content on this page requires a newer version of Adobe Flash Player.&lt;/h4&gt;
&lt;p&gt;&lt;a href="http://www.adobe.com/go/getflashplayer"&gt;&lt;img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;!--[if !IE]&gt;--&gt;
&lt;/object&gt;
&lt;!--&lt;![endif]--&gt;
&lt;/object&gt;

&lt;script type="text/javascript"&gt;
&lt;!--
swfobject.registerObject("FlashID");
//--&gt;
&lt;/script&gt;

&lt;/video&gt;

Note that MOST of this is just the code for fallback to flash – all that lovely code that flash generates…. You put <video width=”” height=”” controls > and then the source for the videos. I used mp4 for safari and apple stuff, ogv for ff, opera, chrome. This is likely to change of course as the situation develops. Its important to put the mp4 one first due to a bug in one of the iDevices meaning it can read multiple sources.The biggest issue turned out to be the encoding.

I used “Miro Video converter” – which was a dead simple drag and drop – with very few options. “Handbreak” gives more options for resizing and so on. Just convert and upload, all works well except …

Firefox wouldn’t work…

Firefox didn’t want to recognize the video – this is to do with mime types, and is easily sorted by either adding a .htaccess or editing the existing one thus:

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

You might not notice any difference at first – clear that cache – several times!!!

Getting safari to stream…

The next problem took rather longer to sort – everything appeared fine except safari seemed to want to download the whole video before it started playing – all the others buffered. In the end it turns out that sometimes the meta data on the mp4 file is at the end of the file. I downloaded QTIndexSwapper2 – which seemed to do the trick – now safari buffers like you’d expect.

categories

Edward owns and runs ee-web design and has been building websites for over 12 years. He is passionate about... most things really

Was this post helpful or interesting? Spread the news.

Leave a comment

*


tag