MediaElement.js: 如何实时更改字幕（track元素）的源文件？

Question

如何在更改视频源（通过setSrc()方法）时动态更改字幕的源文件（最初通过HTML中的< track >元素定义）？

换句话说，当播放视频时，使用setSrc()方法更改视频源时，我还需要重新定义链接的字幕文件（SRT）。

- srcmax

---

你有找到做这件事的方法吗？ - Steve

Answer 1

我想到的一个技巧是在字幕轨道上设置一个ID。

<track id="subtitles" kind="subtitles" src="subtitles.srt" srclang="en" />

然后在你需要的任何事件中，你可以使用以下代码：

$('#subtitles').attr('src', 'different_subtitles.srt');
player.findTracks();
player.loadTrack(0);
player.setSrc('different_video.mp4');

可能有更加优雅的方法来处理这个问题，而且MediaElementJS应该提供一个API来解决这个问题。但在此期间，这个技巧可以帮助你解决问题。

- tuxracer

Answer 2

这种方法并不适用于每个事件（比如'ended'）。虽然这段代码可以可靠地加载和更改TRACK源，但如果您已经显示了一种语言，则除非将CC设置为None，然后选择一种语言，否则不会显示新的“来源”TRACK与新视频。

- Craig B

---

正如CraigB所提到的，您需要将轨道设置为none，然后再次加载所需的语言。在findTracks() loadTrack(0)之后添加player.setTrack('none');和player.setTrack('en');即可正常工作。 - am_

Answer 3

另一种方法是删除整个video元素，并用所有新的track元素替换它。

您可以通过替换video的父元素的innerHTML来实现此目的：

document.getElementById('videoparent').innerHTML='<video src="url-to-my-video.mp4" controls=""><track src="url-to-my-subtitle.vtt" default="" srclang="de" label="My subtitle"></video>';

在Firefox 87和Chromium 89中至少可以正常工作。

- user14972917