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>

我设法通过此功能注入了跟踪元素：

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上时，我收到“ loaded subs”消息，但字幕不会出现。

我尝试将track.src URL更改为gist，并尝试使用

启动本地服务器

python -m SimpleHTTPServer

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

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

Answer 1

要在YouTube上插入字幕，我关注了this帖子。我没有使用script标签，而是使用了textarea来获取用户的输入。

HTML 5（轨道元素）-字幕不在YouTube上显示

1 个答案: