Ändern Untertitel dynamisch Video - HTML5

Question

Ich versuche, die Untertitelspuren dynamisch auf Knopfdruck mit den folgenden Codezeilen zu ändern.Aber es ändert sich nicht die Untertitel.warum?

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

HINWEIS: Die tracksrc in diesem Beispiel ist nur für die Code-Demonstration.

Answer 1

Wenn Sie das default Attribut auf Ihrem track Tag ändern müssen können Sie das folgende Skript verwenden:

Arbeitsbeispiel, überprüfen Sie bitte das DOM das Ergebnis zu sehen (als Video und Spur src nicht vorhanden ist):

https://jsfiddle.net/3hh9kvgd/

können Sie jQuery :eq() Selector in der folgenden Art und Weise verwendet werden. More info can be found here.

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

Durch die Art und Weise unter Verwendung von :eq() Code abhängig von Ihrer <track> Position im DOM machen und erfordern quer alle DOM, wenn Benutzer auf eine Schaltfläche, die in Begriff Wartbarkeit und Perfomance nicht wirklich guter Ansatz ist .

Sie können stattdessen Ihre <track> durch ID verweisen und Ihre DOM-Auswahl zwischenspeichern, wenn Sie jQuery verwenden.

---

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