html5视频显示多个字幕

Question

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

我有使用户选择要显示的视频的按钮。要加载视频，我正在使用此jquery代码：

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

当加载并显示第一个视频时，一切正常，但是一旦我点击按钮选择并看到下一个视频（在相同的位置），它加载正确但是我看到第二个视频中的字幕，首先，如果是第三个vid buttom它显示3个视频中的字幕，依此类推......

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

谢谢

Answer 1

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

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