Cambia video sottotitoli in modo dinamico - HTML5

Question

Sto provando a modificare dinamicamente le tracce di sottotitoli sul pulsante clic utilizzando le seguenti righe di codice. Ma non sta cambiando i sottotitoli. Perché?

$('#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>

NOTA: Iltracksrc in questo esempio è solo per il codice dimostrativo.

Answer 1

Se è necessario modificare l'attributo default sul tag track è possibile utilizzare il seguente script:

Esempio di applicazione, si prega di ispezionare il DOM per vedere il risultato (come il video e la traccia src non sono presenti):

https://jsfiddle.net/3hh9kvgd/

È possibile utilizzare jQuery :eq() Selector nel seguente modo. More info can be found here.

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

Tra l'altro utilizzando :eq() rendere il vostro codice dipendente della vostra <track> posizione nel DOM e richiedono trasversale tutte DOM quando click dell'utente su un pulsante, che non è davvero buon approccio in manutenibilità termine e performance .

È possibile invece fare riferimento al proprio <track> tramite id e memorizzare nella cache la selezione DOM quando si utilizza 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>