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.

In general most people want to synchronise DOM elements to appear and disappear at certain points during the video. This can be achieved in JavaScript by creating a loop that polls the current position of the video. When the video reaches a certain position the developer fires events. These events could hide or show content or perhaps change a textual element on the screen.

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.

If you are just looking to add subtitles to videos then a player like leanback supports the track element (by using a JavaScript Polyfil since no current browsers support the feature natively)  http://www.leanbackplayer.com/example_subtitles.html

Published by thebeebs

Martin works for Oracle as a Developer Evangelist. He’s been a developer since the late 90s and loves figuring out problems and experimenting with code.