Edinburgh Web Development

Replacing Flash animation with HTML5 video

Flash is going, but how do we replace it

by Iain Wilson

3 July 2012
html5 video

HTML5 and CSS3 is a watershed in web functionality and presentation.  It's a quantum leap from XHTML and CSS2 in terms of what developers can now do on a web page, assuming a recent version of a standards based browser on desktop, tablet or mobile device.

Part of the specification introduces the video element and attributes, which with a few lines of code will allow the developer to embed video into the web page.  In theory, this means that we will be able to have video animation where in the past we've had to use Flash.

A bit of history

In the bad old days, we've had to convert videos to Flash format (once of Macromedia, now Adobe) and then embed the Flash animation into the page using not-so-standard html code.

This worked pretty well and not that many years ago, many sites were developed entirely in Flash - it could do beautiful, moving things!  

Unfortunately for iPhone and iPad users, Apple decided not to support Flash - their public reasons were technical, but there may have been some commercial reasons too.

This meant that your beautiful Flash animation would simply be replaced by a blank area if you viewed the page on iPhone or iPad.  Goodness only knows what you thought about that if your entire site was built in Flash.  We wrote about it back in April 2010.

HTML5 to the rescue?

With HTML5 a lot of the Flash problems should go away, at least for self contained animations.  And they do, almost (if you have a site using interactive Flash, you're still looking at a re-write).

We can fairly easily convert most Flash animations into a video file, then place that into a web page using the video element and attributes.  A bit of Javascript to check if the user agent is iPhone or iPad and if so enable the video and things should be dandy (we'll just leave Flash if it's not either of them).  If we use the autoplay, preload and no controls, the video should start playing when the page loads in the same way as the Flash animation did.  

iPhone problem

Try it on the iPad and it works well, but try it on the iPhone and there's a problem.   The Apple developers decided that Safari on the iphone should ignores video autoplay and display a 'play' graphic instead.  You click on 'play' and it opens the video and plays it in a separate Quicktime window

There's no workaround.  All you can do is perhaps add in a little basic animation with jQuery.  Maybe IOS6 might help? 

Liked this article? Please share it with your friends and colleagues.

comments powered by Disqus
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT
Terms, Cookies & Privacy