Over a million developers have joined DZone.

Text overlay on videos using HTML5

DZone's Guide to

Text overlay on videos using HTML5

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

HTML5 offers a unique feature which allows you to impose text on a video at certain intervals. This is done using the HTML track element. This feature allows you to track the video and insert text layers at certain points in the video. Each text element is denoted as a cue and for every cue, you can specify the time at which the text needs to be shown. This feature allows you to add subtitles or captions to videos easily. The text can be altered in looks using the css properties. This is possible for audio files as well. A full description of the media events is available at http://www.w3.org/2010/05/video/mediaevents.html

Besides captions and subtitles, cues can also help in search. For example, if you want to search a video for a particular character, a keyword search with cues for that character can ensure that the user can start the video at that point.

The other advantage of cue points is to trigger events at certain cue points. For example, if you want to monitor how much of the video has been watched by a user and make the user start from that position the next time, we could use cue points. Once the user crosses a cue point, that can be recorded against that user’s id in the database and we start from that cue point the next time the same user views this video.

The above feature opens up a lot of opportunities for manipulating videos, particularly with regard to areas of training, multi lingual movies and so on. A detailed tutorial on the above is available at http://www.html5rocks.com/en/tutorials/track/basics/

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}