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 to add document editing and viewing to your web app on .Net (C#), Node.JS, Java, PHP, Ruby, etc.

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/

Extend your web service functionality with docx, xlsx and pptx editing. Check out ONLYOFFICE document editors for integration.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}