在 html5 中使用 javascript 设置字幕轨道

Question

我正在使用视频标签和曲目标签在我的网站上显示带有 .vtt 字幕文件的视频，如下面的代码所示：

<div id="Video">
<video id="player" controls width="1024" height="576">
<source src="video/video00.mp4" type="video/mp4"/>
<track id="subtitletrack" label="English" kind="subtitles" srclang="en" src="subtitle/video02.vtt" default>
</video>

一切正常，但我想使用 javascript 从数组中随机设置字幕：

var subArray = ["subtitle/video00.vtt","subtitle/video01.vtt","subtitle/video02.vtt"];
var subtitle = subArray[Math.floor(Math.random()*subArray.length)];

现在变量 'subtitle' 是三个随机 vtt 文件之一。

如何将轨道源设置为变量'subtitle'？

非常感谢！

Answer 1

使用jQuery：$("#subtitletrack").attr("src", subtitle)

Answer 2

正如 Jeremy 所建议的，我使用了 jquery，它的工作原理是这样的：

<body>
<video controls autobuffer autoplay id="rearrangements" width="1024" height="576">
<source src="video/video00.mp4" type="video/mp4"/>
<track id="subtitles" src="subtitle/video00.vtt" default>
</video>
</body>
    <script src="jquery-1.12.0.js"></script>
    <script type="text/javascript">
var videoArray = ["video/video00.mp4","video/video01.mp4","video/video02.mp4"];
var subArray = ["subtitle/video00.vtt","subtitle/video01.vtt","subtitle/video02.vtt"];
$("#rearrangements").bind('ended', function(){ 
            videonumber = Math.floor(Math.random()*3);
            while (videonumber == lastvideonumber){
            videonumber = Math.floor(Math.random()*3);
            console.log(videonumber);
            }
            $("#subtitles").removeAttr("src");
            $("#rearrangements").attr("src", videoArray[videonumber]);
            $("#subtitles").attr("src", subArray[videonumber]);
            this.play();
        });
</script>

但是循环3、4次就停止了，是不是还是哪里出了问题？修复了这个问题：当相同的字幕文件用于下一个视频时它停止循环，所以我放入了一个简短的 while 循环以确保变量不同。

在 html5 中使用 javascript 设置字幕轨道

Set subtitle track using javascript in html5

html

javascript

html5-video