0

我正在用 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>

我设法用这个函数注入了一个 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

如此处所示，并在此处提出建议，以便我可以将 track.src URL 更改为http://localhost:8000/subtitle.vtt。两种解决方案均无效。

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

4

1 回答 1

0

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

于 2018-08-08T14:48:26.390 回答