We are closing.
DocumentationSublimeVideo comes with built-in support for multi-language subtitles allowing you to increase your videos’ global reach and provide a great experience to your hearing-impaired audience.
We currently support both the .vtt (WebVTT) and .srt (SubRip) formats.
Each subtitles file has to be added using a <track> element inside the <video> element as shown in the example below:
<video class='sublime' width='640' height='360' poster='video-poster.jpg' preload='none'>
<source src='http://yoursite.com/video.mp4' />
<source src='http://yoursite.com/video.webm' />
<track src='/subs/video-en.srt' srclang='en' />
<track src='/subs/video-fr.vtt' srclang='fr' />
</video>Please continue reading for important information regarding the src and srclang attributes of the <track> element.
By default, the HTML5 <track> element only accepts subtitles files hosted on the same domain (origin) as the page containing the <video> element itself. SublimeVideo adds support for cross-origin subtitles files, in other words, you can host them on a different domain. This can be handy if you would like to have the subtitles files hosted on the same CDN as your video assets.
In order for this to work, the server hosting your subtitles files must support CORS. If you are using Amazon S3 and Cloudfront, you can easily enable CORS support on your S3 bucket (Cloudfront will automatically inherit the same CORS configuration of the bucket).
However, please note that CORS is not supported on IE7. If having subtitles work on IE7 is important to you, you should keep your subtitles files hosted on the same domain as your pages.
You must specify the language of each track either via the srclang attribute or the label attribute.
In most cases, you can just provide the 2-letter language code via the srclang attribute and we will automatically label most of them (see table below).
If the language you need is not listed or if you’d like to override the value of our automatic label, you can add your own custom label via the label attribute:
<video class='sublime' width='640' height='360' poster='video-poster.jpg' preload='none'>
<source src='http://yoursite.com/video.mp4' />
<source src='http://yoursite.com/video.webm' />
<track src='/subs/video-en.vtt' srclang='en' />
<track src='/subs/video-it.vtt' srclang='it' label="Italiano" />
<track src='/subs/video-eo.vtt' label='Esperanto' />
</video>srclang valuessrclang value |
automatic label |
|---|---|
| af | Afrikaans |
| ar | Arabic |
| bg | Bulgarian |
| bn | Bengali |
| bs | Bosnian |
| ca | Catalan |
| cs | Czech |
| da | Danish |
| de | German |
| el | Greek |
| en | English |
| es | Spanish |
| fa | Persian |
| fi | Finnish |
| fr | French |
| gu | Gujarati |
| he | Hebrew |
| hi | Hindi |
| hr | Croatian |
| hu | Hungarian |
| id | Indonesian |
| is | Icelandic |
| it | Italian |
| ja | Japanese |
| kn | Kannada |
| ko | Korean |
| lv | Latvian |
| ml | Malayalam |
| mr | Marathi |
| nb | Norwegian |
| nl | Dutch |
| or | Oriya |
| pa | Punjabi |
| pl | Polish |
| pt | Portuguese |
| ru | Russian |
| si | Sinhalese |
| sk | Slovak |
| sq | Albanian |
| sr | Serbian |
| sv | Swedish |
| ta | Tamil |
| te | Telugu |
| th | Thai |
| uk | Ukrainian |
| zh | Chinese |
By default, no track is selected and no subtitles are shown until the user selects a language from the subtitles menu in the player.
If you want the subtitles for a particular language to be shown by default as soon as the user starts the video, you simply need to add the default attribute to the desired <track> element:
<video class='sublime' width='640' height='360' poster='video-poster.jpg' preload='none'>
<source src='http://yoursite.com/video.mp4' />
<source src='http://yoursite.com/video.webm' />
<track src='/subs/video-en.vtt' srclang='en' default />
<track src='/subs/video-fr.vtt' srclang='fr' />
<track src='/subs/video-it.vtt' srclang='it' />
</video>You can use online tools like Amara to create subtitles files for your videos.
For more information about HTML5’s <track> element, please read the W3C specification.
The <track> element has been designed to associate different kinds of information to a media element (not only subtitles). When the kind attribute of a <track> element is omitted, it will default to subtitles, which is the only kind SublimeVideo currently supports.