javascript - HTML 5(轨道元素)- Youtube 上未显示字幕

Question

我正在用 ReactJS 编写一个 chrome 扩展，允许用户在 Youtube 上插入字幕。
我一直在尝试使用 track 元素在 Youtube 上插入字幕，但它不起作用。

Youtube 有以下元素:

<video tabindex="-1" class="video-stream html5-main-video" 
controlslist="nodownload" style="width: 760px; height: 428px; left: 
0px; top: 0px;" src="blob:https://www.youtube.com/eb4c349e-ac8a-465d- 
b6b1-53acfcb66aa8"> 
</video>

我设法用这个函数注入(inject)了一个 track 元素:

insertSubtitle() {
  var track = document.createElement("track");
  track.kind = "subtitles";
  track.label =  "YTSUBS";
  track.srclang =  "en";
  track.mode = "showing";
  track.src = "subs.vtt"

   var videoContainer = document.querySelector("video.video-stream.html5-main-video");
   if(videoContainer){
     videoContainer.prepend(track);
     console.log("loaded subs");
   } else {
     console.log("video container not found");
   }
 }

subs.vtt文件位于与上面代码的 javascript 文件相同的文件夹中。当代码在 Youtube 上加载时，我收到“加载的字幕”消息，但字幕不会出现。

我尝试将 track.src URL 更改为 gist ，尝试启动本地服务器

python -m SimpleHTTPServer

如图here ，并建议 here这样我就可以将 track.src URL 更改为 http://localhost:8000/subtitle.vtt .两种解决方案均无效。

有谁知道为什么它不起作用？

Answer 1

为了在 Youtube 上插入字幕，我关注了 this邮政。
我没有使用脚本标签，而是使用文本区域来获取用户的输入。