Altyazıyı dinamik olarak değiştirin - HTML5

Question

Aşağıdaki kod satırlarını kullanarak altyazı parçalarını dinamik olarak değiştirmeye çalışıyorum.Ama altyazıları değiştirmiyor musunuz?

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

NOT: bu örnekte tracksrc sadece kod gösteri içindir. Eğer aşağıdaki komut dosyasını kullanabilirsiniz sizin track etiketinde default niteliğini değiştirmek gerekiyorsa

Answer 1

:

Çalışma örneği, (video ve iz src mevcut değilse) sonucunu görmek için DOM inceleyin lütfen:

https://jsfiddle.net/3hh9kvgd/

aşağıdaki şekilde jQuery :eq() Selector kullanabilirsiniz. More info can be found here.

:eq() DOM içinde <track> pozisyonun bağımlı kodunuzu yapmak kullanarak arada $('.player-content-video track:eq(0)')

ve enine tüm DOM gerektirdiğinde vadeli sürdürülebilirlik ve perfomance gerçekten iyi bir yaklaşım değildir bir düğmeye, Kullanıcı tıklama .

Bunun yerine <track> numaranızı referans alarak jQuery'yi kullanırken DOM seçiminizi önbelleğe alabilirsiniz.

---

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