显示多重字幕的html5视频

html5 video showing multiples subtitles

本文关键字：html5 视频 字幕 显示      更新时间：2023-09-26

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

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

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

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

有人能给我一个解决这个问题的提示吗？或者至少告诉我为什么会发生这种情况？

谢谢

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

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