Javascript 如何更改html5视频元素的默认曲目？

“我的网页”包含此

标记，带有多个副标题

s。我想通过使用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>

$（'#lang img'）。单击（函数（）{
language=$（this.attr（'class'）；
$（'video track'）.removeAttr（'default'）；
$（'video track[srclang='+language+']'）.attr（'default'，'default'）；
});

“默认”属性已正确插入，但不显示字幕。手动插入默认属性非常有效（在chrome和opera上）

像这样做。

<script>
$('#lang img').click(function(){
    var language=$(this).attr('class');

    $($('video').prop('textTracks')).prop('mode', function(){
        return this.language == language ? 'showing' : 'disabled';
    });
});
</script>

$（'#lang img'）。单击（函数（）{
var language=$（this.attr（'class'）；
$（$（'video'）.prop（'textTracks'））.prop（'mode'，function（）{
返回this.language==语言？'showing'：'disabled'；
});
});

当您在from js中设置默认标志时，浏览器可能已经选择了默认标志。您可以尝试将textTrack.mode属性设置为“显示”所需曲目。这非常麻烦。您的链接示例不是从chromium 22开始的；在Firefox17中显示Sub；在歌剧12中不显示潜艇，使用您的建议构建，但并不适用于所有三种。关于Chrome:Chrome有时会出现mp4播放问题（通常在安装IE10RC之后），我切换到webm。Opera 12.1显然存在通过track元素访问textTrack对象的错误。我修改了我的代码，通过textTracks属性访问它。在Chrome中，您必须通过about:标志启用跟踪支持。在FF和IE中，我使用的是polyfill。我的示例现在应该可以在所有浏览器中使用（但我讨厌Opera）。通过about:标记的Chrome曲目已启用。对于包括chrome在内的所有浏览器，使用您建议的脚本modernizer.js和polyfill.js解决了问题，即使我在控制台上出现错误

将WebVTT文件的mime类型设置为text/vtt

。如果您喜欢我的编辑，我可以在上面随意修改您的示例代码。谢谢你的帮助

<script>
$('#lang img').click(function(){
    var language=$(this).attr('class');

    $($('video').prop('textTracks')).prop('mode', function(){
        return this.language == language ? 'showing' : 'disabled';
    });
});
</script>