Text overlay on videos using HTML5

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/