Overlaying data on a video


I got asked by Gordon Rae on twitter today:

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

Comments (0)

Skip to main content