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

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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/

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Sapna Group, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}