字幕轨道 HTML5 元素不在视频中更新

Question

我遇到了问题，我需要从 javascript 动态更改字幕轨道源。

当前的行为是没有变化，旧字幕继续显示。

这是html:

<video style="width: 50%;" class="m-5" id="vid" controls>
      <track src="oldPath.vtt" id="subtitleTrack" label="English" kind="subtitles" srclang="en" default />
</video>

这是Javascript:

let subtitleTrack = document.getElementById("subtitleTrack");

function subtitleEdited(newTrackPath) {
  //....
  subtitleTrack.src = newTrackPath;
  //....
}

我需要一旦曲目源改变，新的字幕应该直接加载到视频中。

我尝试重新加载视频，但在更改曲目源后添加 video.load() 没有成功。

更新

经过进一步调查，问题似乎是缓存问题。我需要新路径与旧路径相同（该路径在本地有新更新）但是浏览器从缓存中获取他的副本而不从本地文件更新它。 __

第二次更新

感谢@Terry 的回复。

我尝试向源添加版本控制，但它没有检索到任何内容。

检查响应大小，?v=2 响应为空。

P.S。项目是 electron project.Anyways，我不认为它可能是问题的一部分。

Answer 1

正如您在评论（和更新后的问题）中提到的，您使用的是完全相同的轨道路径。这将导致浏览器改为从缓存中获取，因为文件路径没有改变：一个好主意是简单地向 src 属性添加一个缓存破坏查询字符串，这样浏览器将忽略缓存:

let subtitleTrack = document.getElementById("subtitleTrack");

function subtitleEdited(newTrackPath) {
  //....
  subtitleTrack.src = newTrackPath + '?t=' + new Date().getTime();
  //....
}

当然，如果您更习惯使用模板字面量，这可能更适合阅读：

subtitleTrack.src = `${newTrackPath}?t=${new Date().getTime()}`;

Answer 2

我想念这个问题。

问题是我试图访问字幕文件，而其他功能正在编辑它。所以我添加了一个回调来防止这种情况。

并且还通过应用@Terry 的回答来添加缓存破坏查询。

应用上述更改后，它现在可以正常工作了。

字幕轨道 HTML5 元素不在视频中更新

Subtitle Track HTML5 Element Don't Update in Video

html

javascript

caption

webvtt

video-subtitles

更新

第二次更新