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

【问题标题】：Set subtitle track using javascript in html5在 html5 中使用 javascript 设置字幕轨道
【发布时间】：2016-02-04 15:39:09
【问题描述】：

我正在使用 video 标签和 track 标签在我的网站上显示带有 .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)];

现在变量“字幕”是三个随机 vtt 文件之一。

如何将轨道 src 设置为变量“字幕”？

非常感谢！

【问题讨论】：

标签： javascript html html5-video

【解决方案1】：

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

【讨论】：

【解决方案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 循环以确保变量不同。

【讨论】：

不知道，不过今天有空我会研究一下。
谢谢杰里米，我修好了。仅当连续使用两次相同的字幕时才会发生这种情况，我认为 .attr 不会添加任何内容，但 removeAttr 会删除现有的 src，什么都没有。
正确，如果只是更改属性，则不需要removeAttr。