How to change the default track of an html5 video element?

Question

My page contains this <video> with several <track> s subtitles. I would like to enable the track on the fly by clicking the corresponding national flag using jquery:

  <div id="lang"> <img src="mini/ita.png" class="it" alt="Italiano" title="Italiano" /> <img src="mini/eng.png" class="en" alt="English" title="English" /> </div> <video controls="controls" > <source src="webcast.webm" /> <source src="webcast.mp4" /> <source src="webcast.ogv" /> <track kind="subtitles" src="./sub-en.vtt" srclang="en" /> <track kind="subtitles" src="./sub-it.vtt" srclang="it" /> </video> <script> $('#lang img').click(function(){ language=$(this).attr('class'); $('video track').removeAttr('default'); $('video track[srclang='+language+']').attr('default','default'); }); </script> 

The "default" attribute is correctly inserted, but the subtitles are not offset. Manually adding an attribute by default works fine (on chrome and opera).

Answer 1

 <script> $('#lang img').click(function(){ var language=$(this).attr('class'); $($('video').prop('textTracks')).prop('mode', function(){ return this.language == language ? 'showing' : 'disabled'; }); }); </script> 

Answer 2

 $('#lang img').click(function(){ language=your value; $('#yourID').attr('srclang', language); }); 

Do it like that.