SubRipReader : an in-browser subtitles reader

Some times ago, I was trying to re-synchronize subtitles and video whithin VLC player, the typical : "150 ms after … erf, 50 ms before, that's it ! no … it's still desynchronized …".

After giving up, and by curiosity, I opened the file, and found that the SubRip format is, in fact, quite simple. Just for trying, I read and displayed them in a browser. This is the way SubRipReader was born, using Mootools 1.2. Edit : SubRipReader has been deleted since then, its functionnalities are now integrated into the Mooplay project. More to come about it.

Unfortunately, it won't resolve my initial problem. But it's still able to load the subtitles through an Ajax request, to parse them, and to display them step by step, into a DOM element.

It supports :

  • play / pause states
  • overlapping subtitle levels : when several lines of texts should be displayed at the same time, each one took a different css class : 2 00:00:15,000 --> 00:00:25,000 A text 3 00:00:20,850 --> 00:00:30,000 An other text For instance, the previous subtitles lines will be injected in DOM and could be displayed like that, depending of your custom styles :
    <div class="overlapping0"><p>A text</p></div>
    <div class="overlapping1"><p>An other text</p></div>
    subtitles screenshot

For playing subtitles, use Srt.Parser and Srt.Reader :

var myReader = null;

var myParser = new Srt.Parser({
    url: '', // the subtitle file url
    onComplete: function(data) {
        myReader = new Srt.Reader(data, {
            container: 'mysubtitlecontainer', // where to display subtitles
            time_container: 'mytimecontainer' // where to optionnaly display the internal timer state

Then, you should be able to call the start and pause actions :


I've just seen about the Universal Subtitle Format, it's going to be the time to implement its own parser !

blog comments powered by Disqus