显示多个字幕的html5视频

Question

在我的项目中，我现在有两个带字幕的视频。我正在使用 html <video>、<source> 和 <track>。

我有让用户选择要显示的视频的按钮。加载视频我使用这个jquery代码：

$("#sourceVideo").attr("src", urlVideo);
$("#trackSubtitulos").attr("src", urlSub);
$('#video').load();
$('#video').get(0).play()

加载和显示第一个 vid 时一切正常，但是一旦我单击按钮选择并查看下一个 vid（就在同一位置），它加载正确但我看到第二个 vid 和第一个的字幕，如果第三个视频按钮它显示来自 3 个视频的字幕，依此类推……

谁能给我一个提示来解决这个问题，或者至少告诉我为什么会这样？

谢谢

Answer 1

基本上，您可以为视频添加多个曲目。因此，当您添加新的时，您不会替换旧的。 我认为解决这个问题的最简单方法就是隐藏所有以前添加的字幕。例如：

var video = document.getElementById('idOfYourVideoElement');
for (var i = 0; i < video.textTracks.length; i++) 
    video.textTracks[i].mode = 'hidden';