how to load dynamic subtitles in html5 video player

Question

I need some help with html5 video play with dynamic subtitle

here's html

video html

<video 
   width="998" 
   height="545" 
   id="videoplayer" 
   controls 
   src="zzz_f817951280x720.m4v" type="video/mp4">
         <track id="subtitleid" srclang="en" default="" label="ინგლისური"></track>
</video>

subtitle changer html

<ul>
   <li><a href="0" class="subtitle_clicker selected">off</a></li>
   <li><a class="subtitle_clicker" id="s15"
            href="Uploads/Subtitles/test_a1ee4c.srt">rus</a></li>
   <li>∙<a class="subtitle_clicker" id="s16"
            href="Uploads/Subtitles/test_797ed1.srt">eng</a></li>                                    
</ul>

and js

$(document).ready(function () {

 $('.subtitle_clicker').live('click', function (e) {
        e.preventDefault();
        SubtitleChager($(this));
    });
});

function SubtitleChager(_this) {
    if ($('.x-player .player-view video').attr("width")) {
        $('.subtitle_clicker.selected').removeClass('selected');
        $('#subtitleid').removeAttr('src');
        if (_this.attr("href") == '0') {
            $('#subtitleid').removeAttr('src');
        }
        else {
            $('#subtitleid').attr('src', _this.attr("href"));
        }
        $(_this).addClass('selected');
    }
}

and when I'm trying to change subtitle I'm just changing sustitle url in attr src and these two subtitle overplaing each other

so how to remove old subtitle and insert new one?? pls help

Answer 1

There is a new tag added named Track (its available in Chrome and IE10 only)

Please look into WebVTT - http://www.html5rocks.com/en/tutorials/track/basics/

also Microsoft has started with XML formatted subtitle named TTML, aslo there are some good comparison between these two - http://www.balisage.net/Proceedings/vol10/html/Tai01/BalisageVol10-Tai01.html