HTML5 Video

HTML5 Video or Flash?

The first iteration of Clipper a few years ago was written using Adobe Flex as an installable Adobe AIR based application controlling Flash video. At the time Flash was the obvious solution for delivering cross platform video to the plethora of browsers out there. But then along came the iPhone and as I’m sure you’re aware, things changed. Enter HTML5 video. For the better? Yes. But…

We have still had to deliberate over the most efficient way to deliver video as universally as possible. Questions which need to be answered before adopting HTML5 video as the method of delivery are:-

  • Do the users have access to a modern browser?
  • If they are in a restricted IE environment, do they have at least IE9?

If the answer is yes to both of the above then HTML5 video is definitely the way to go. If the users are situated in a larger institution with a lethargic IT department they might well be limited to IE7 or worse. In which case Flash would still be the appropriate solution.

We decided to follow the trends of the majority of web development teams globally and think to the future rather than be restricted by the fewer and fewer institutions tied to old technology. HTML5 video will be the delivery mechanism of video for all future versions of Clipper.

What is HTML5 Video?

Do you remember the cartoon Hong Kong Phooey? If you were old enough to watch television in the 80’s you probably will and you will maybe remember Hong Kong Phooey had a helper called Spot the Cat. Spot the Cat did all the work and solved all the cases. Hong Kong Phooey got all the credit. HTML5 plays the role of Hong Kong Phooey in this particular episode. Let me introduce HTML5 video..

<source src=”path/to/video”>

That’s it. Apart from a couple of optional attributes that we can include, HTML5 has done its job. Over to you Spot the Cat to get the job done..

Spot the Cat

If you just want your users to play the video the following will do..

<video controls>
<source src=”path/to/video”>

Users will be able to stop and start the video. And go full screen. But for a tool like clipper we need to be able to manipulate and read the current state of the video playing in the web page. We need to load videos to be edited based on user search results. Spot the Cat deals with all this extra complexity and in this particular episode is played by the web developers’ old friend Javascript.

Happily these days the modern browser allows us to natively control any supported video using Javascript. When I say any supported video by the browser we do have to be aware that at the time of writing we will be requiring H.264/MP4 format for all browsers except Firefox which requires the OGG/Theora format. OK I’m ignoring Opera here. Anybody using Opera? Please let us know. You’ll see the Ogg videos anyhow.

This will be an issue to consider when an institution is at the point of encoding an existing library of videos into a web ready video library. It is obviously an important factor for us to consider with the more advanced stages of Clipper’s development when we will be developing an encoding service into the application. Maybe by then Mozilla will have talked themselves out of the patent issues of the MP4 format. What patent issues? Well when Apple, Google and Mozilla were trying to release the majority of web video from the proprietary clutches of Adobe, they all had their preferred ‘open’ video format solution. They were the following:-

  • Google – WebM
  • Mozilla (Firefox) – Ogg
  • Apple – MP4

Oh didn’t Apple make it clear. H.264 patent roster includes Apple along with Panasonic, Sony, Dolby, Thomson, and Toshiba. Big names indeed. To be clear on the issue of royalties here is a more comprehensive article discussing where the term ‘open’ comes from..

In my next post I intend to record our experience of 3rd party javascript libraries. Time saving frameworks which relieve the developer of cross platform issues? Theoretically yes. Actually not quite so clear cut. I’ll go away and take a deep breath first as we’ve recently decided that it can be a short term gain but long term headache.