Overlaying data on a video
I got asked by Gordon Rae on twitter today:>
@thebeebs Martin, can you recommend a good tutorial for overlaying data on video in HTML5 ?
— Gordon Rae (@socialtechno) February 21, 2012
Firstly beware that just because a browser supports HTML5 video it might not be capable of overlays… this is true particularly on mobile devices. This is because to save battery many HTML5 capable mobile browsers pass the video playing over to the phones native player. These players are external to the web page and so can’t display DOM elements over the video.
On most desktop browsers, tablets and a small selection of phones it is possible to place content over the top of the video element.
If you don’t fancy writing your own framework to handle this you could use Popcorn.js there is a great tutorial on the framework over on net tuts which shows how easy it is to synchronise video and your content.