Dynamiczna zmiana podtytułu wideo - HTML5

Question

Próbuję dynamicznie zmieniać ścieżki napisów przy kliknięciu przycisku, używając następujących linii kodu. Ale nie zmienia to napisów. Dlaczego?

$('#turnoff').click(function(){ 
 
    $('.player-content-video track').attr('default',false); 
 
}); 
 

 
$('#english').click(function(){ 
 
    $('.player-content-video track').attr('default',false); 
 
    $('.player-content-video track').eq(0).attr('default',false); 
 
}); 
 

 
$('#chinese').click(function(){ 
 
    $('.player-content-video track').eq(1).attr('default',false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<video class="player-content-video"> 
 
    <track src="sample_video-en.vtt" srclang="en" kind="subtitles" default="true"> 
 
    <track src="sample_video-ch.vtt" default="false" srclang="ch" kind="subtitles"> 
 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
</video> 
 
<br/> 
 
<button id="turnoff" >NO SUBTITLE</button> 
 
<button id="english" >ENGLISH</button> 
 
<button id="chinese" >CHINESE</button>

UWAGA:tracksrc w tym przykładzie jest tylko dla kodu demonstracji.

Answer 1

Jeśli trzeba zmienić atrybut default na tagu track można wykorzystać następujący skrypt:

działający przykład, proszę sprawdzić DOM, aby zobaczyć wynik (jak wideo i tor src nie są obecne):

https://jsfiddle.net/3hh9kvgd/

można użyć jQuery :eq() Selector w następujący sposób. More info can be found here.

$('.player-content-video track:eq(0)')

Nawiasem mówiąc, stosując :eq() uczynić swój kod zależny od swojej pozycji w DOM <track> i wymagają poprzeczny wszystko DOM, gdy użytkownik kliknie na przycisk, który nie jest bardzo dobre podejście w okresie konserwacji i perfomance .

Zamiast tego możesz odwołać się do swojego <track> przez id i buforować wybór DOM podczas korzystania z jQuery.

---

$('#turnoff').click(function(){ 
     $('.player-content-video track').attr('default',false); 
    }); 

    $('#english').click(function(){ 
     $('.player-content-video track').attr('default',false); 
     $('.player-content-video track:eq(0)').attr('default',true); 
    }); 

    $('#chinese').click(function(){ 
     $('.player-content-video track').attr('default',false); 
     $('.player-content-video track:eq(1)').attr('default',true); 
    }); 

---

<video class="player-content-video"> 
    <track src="sample_video-en.vtt" srclang="en" kind="subtitles" default="true"> 
    <track src="sample_video-ch.vtt" default="false" srclang="ch" kind="subtitles"> 
    <source src="myvideo.mp4" type="video/mp4"> 
</video> 
<br/> 
<button id="turnoff" >NO SUBTITLE</button> 
<button id="english" >ENGLISH</button> 
<button id="chinese" >CHINESE</button>