Yendif Player

Yendif Player is able to display subtitles for your videos using the <track> element. Subtitles are loaded as a text file in the format of WebVTT.

<div class="yendifplayer">
  <video>
    <source type="video/webm" src="http://mysite.com/video.webm">
    <source type="video/mp4" src="http://mysite.com/video.mp4">
    <source type="video/ogg" src="http://mysite.com/video.ogv">
 
    <!-- the track element -->
    <track src="http://mysite.com/subtitles-en.vtt">
 
    </video>
</div>

Adding subtitle through javascript

    // ensure DOM is ready
    $(function () {
 
      // this will install yendifplayer into an element with id="player"
      $("#player").yendifplayer ({
        videos:{
          mp4:"http://mysite.com/video.mp4",
        
          //Adding subtitle
      	  captions:"http://mysite.com/subtitle.vtt"
        }
      });
      
    });
    

    <!-- empty container element with unique id="player" -->
    <div id="player"></div>
    

The track element's WebVTT file involves the following structure:

WEBVTT FILE
 
1
00:00:01.000 --> 00:00:04.000
The first subtitle from 1 seconds to 4 seconds
This is a second line
And a third one
 
2
00:00:05.000 --> 00:00:06.000
<b>Bold</b>, <i>italic</i> and <u>underlines</u> are supported
 
...

Click here to learn about the WebVTT file format.

Notes :

• Subtitles can be activated if the <track> element is given. The current version of this plugin can read only the first <track> element. This indicates that the plugin is able to support a single language at a time. However, the player will soon start supporting various languages.
• The player does not support VTT additional definitions, including line position and text alignment. Style can be controlled using CSS for full cross browser support.