在 JavaScript 中逐行动态添加字幕到视频元素

Question

我想知道目前是否可行

下面是我的 HTML：

<video src="something.mp4"> </video>

我还有一个数组，Object其中包含我需要显示的所有标题......

例子：

captions_array = [
    {start: 0, end: 2, message: "hello"}, 
    {start: 3, end: 4, message: "how"}, 
    {start: 5, end: 8, message: "are"}
]

现在，根据视频的当前时间，我想从该数组中选择一个标题并显示它，在需要时删除它，然后显示另一个......

笔记：

1.我必须通过从该数组中动态选择文本来提供视频播放的字幕。

2.我无法使用任何字幕文件（VTT），我仅从该数组中获取字幕

3.我无法在后端执行任何操作，我只想在浏览器中的前端执行此操作。

编辑：回应这个问题的答案：

4. 我无法在视频标签内使用源元素

5. 标题数组将随着时间动态填充

您可以使用此 mp4 URL 创建一个简短的演示：
http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

Answer 1

您可以直接从浏览器创建WebVTT 文件并使用 blob:// URI 加载它们。

WebVTT 的语法非常严格，但也很容易掌握。

因此，如果我们说您的start和end值确实代表媒体中的秒，我们可以这样制作一个生成器：

const captions_array = [
  { start: 0, end: 2, message: "hello" }, 
  { start: 3, end: 4, message: "how" }, 
  { start: 5, end: 8, message: "are" }
];
const VTTFile = makeVTT( captions_array );
const vid = document.querySelector( "video" );
const track = document.createElement( "track" );
track.kind = "captions";
track.label = "English";
track.srclang = "en";
track.src = URL.createObjectURL( VTTFile );
vid.addEventListener( "loadedmetadata", (evt) => {
  track.mode = "showing";
  vid.textTracks[0].mode = "showing"; // thanks Firefox 
});
vid.append( track );

function makeVTT( array ) {
  const text = array.reduce( (str, { start, end, message }, index) => {
    // you would also have to make a "seconds to timestamp" parser
    // but I leave it to the reader as an exercise
    return str + `
00:00:${ start.toFixed(3).padStart(6, "0") } --> 00:00:${ end.toFixed(3).padStart(6, "0") }
${ message }`;
  }, `WEBVTT`);
  return new Blob( [ text ], { type: "text/plain" } );
}

video { max-height: 100vh; max-width: 100vw; }

<video controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>