Adding Multiple Video Captions In JW Player 6
Posted By : Apurv Gupta | 05-Jan-2014
JW Player 6 supports the rendering of closed captions or subtitles in the video display. These captions can be selected by viewers through the CC popup menu of JwPlayer.
Supported Formats
JW Player 6 supports captions in three formats:
1.WebVTT, a plain text format that's part of the HTML5 standard.
2.SRT, a plain text format that's popular amongst file sharers.
3.DFXP, an XML format that's popular in amongst broadcasters.
VTT captions are preferred, since they are part of the HTML5 standard. JW Player supports all three formats across all browsers though, in both Flash and HTML5 mode.
VTT EXAMPLE
Here is an example VTT file containing three caption cues. As you can see, this format is easy to understand and can be authored with a simple text editor:
WEBVTT
WEBVTT 00:00:12,000 --> 00:00:15,000 What brings you to the land of the gatekeepers? 00:00:18,500 --> 00:00:20,500 I'm searching for someone. 00:00:36,500 --> 00:00:39,000 A dangerous quest for a lone hunter. 00:00:41,500 --> 00:00:44,000 I've been alone for as long as I can remember.
VTT files should be saved using UTF8 encoding in order to correctly display special characters (accents, but also e.g. Arab, Chinese, Russian). If these files are not stored and served using UTF8 encoding, rendering issues will almost certainly occur.
Embedding Captions
WebVTT captions can be embedded in a player by adding a tracks object inside the playlist object. Every entry has 4 properties:
file (required)
URL to the WebVTT (or SRT/DFXP) file to display (e.g. /assets/myCaptions.vtt).
label
A human-readable name of the captions track (e.g. English Captions). This is displayed in the captions selection menu if more than one track is provided.
"default"
Set this to true if you want these captions to display on startup. If you don't set it, the captions are Off by default and users have to enable them using the CC menu.
kind
The kind of text track this is: captions. Since captions are the default, this option isn't required. It's good to add this property for readability though, since JW Player supports other track kinds (likethumbnails).
Here is an example setup, using one video and two VTT files. The English captions will render by default:
jwplayer("myElement").setup({ playlist: [{ file: "/assets/sintel.mp4", image: "/assets/sintel.jpg", tracks: [{ file: "/assets/captions-en.vtt", label: "English", kind: "captions", "default": true },{ file: "/assets/captions-fr.vtt", kind: "captions", label: "French" }] }] });
VTT files are subject to cross-domain security restrictions and therefore won't automatically load from another domain than the player.
Hope this helps !! :)
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Apurv Gupta
Apurv is an excellent developer with exposure to Groovy and Grails and Video content applications.