NodeJS 如何显示嵌入式youtube视频的字幕？

你能帮我解决这个问题吗，我卡住了
我想在视频播放器框外显示嵌入式YouTube视频的字幕，以允许用户将其复制并粘贴到某个地方，以便轻松地从中学习。我已经准备好了VTT格式的视频字幕，并将其保存在本地。现在我关心的是在视频旁边显示字幕，我的意思是说的每一句话都必须同时显示在字幕侧。

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="<%= lugha.video %>"></iframe>
</div>
<h4 class="title" style="font-weight: bold;"><%=lugha.title%></h4>
</div>
</div>

<div class="col-md-6">
<div class="well well-lg">
<!-- Subs here -->
                
<div>
</div>
</div>

嵌入式视频链接

var data = [
{
title: "War room",
video: "https://www.youtube.com/embed/Hk_m7HUoaUA?controls=0&amp;clip=UgkxDvl5kU8Mri2usSYI5v0W5S4zfPw_oWtG&amp;clipt=EO3BAxifswY"
}

来自本地保存的vtt文件的字幕的一部分

WEBVTT - Some title

00:01.220 --> 00:03.100
You can't have my marriage.

00:03.680 --> 00:05.510
You can't have my daughter.

00:05.760 --> 00:07.575
And you sure can't have my man.

00:08.195 --> 00:10.425
This house is under new management.

00:10.715 --> 00:13.045
And that means you are out.

使用`<track>`元素

<track> element是为媒体提供字幕等的原生方式。
我们可以用它来解析WebVTT文件，解析后的TextTrackCue文件可以通过HTMLTrackElement.track来访问：

const trackElement = document.createElement("track");
trackElement.src = getVttUrl();

// `track` now contains all cues
const track = trackElement.track;

function getVttUrl() {
  // Some external resources are disallowed in StackOverflow snippets.
  // Here I'm blobifying the VTT-file's content:
  const vtt = `WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the lord of the universe in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels
`;

  const vttBlob = new Blob([vtt], { type: "text/vtt" });

  return URL.createObjectURL(vttBlob);
}

使用`cuechange`事件

我们可以将<track>元素添加到媒体元素中，以便它相应地激活正确的提示。
将TextTrack的mode property设置为"hidden"会隐藏它，但仍然可以编程使用，我们可以为它的cuechange event添加一个侦听器：
x一个一个一个一个x一个一个二个x

媒体的`timeupdate`事件

我还尝试了视频的timeupdate event，因为它们的速度取决于浏览器的实现：
一个三个三个一个

- 注意**：保留添加到媒体的<track>元素，以便activeCues仍然保持活动状态!

带有`requestAnimationFrame()`

从技术上讲，使用requestAnimationFrame() function应该提供最新的字幕，因为它在 * 每 * 帧之前触发：

const video = document.querySelector("video");
const captions = document.getElementById("captions");

const trackElement = document.createElement("track");
trackElement.src = getVttUrl();
video.append(trackElement);

const track = trackElement.track;
track.mode = "hidden";

track.cues; // Accessing `cues` fixes a "not iterable" error (on Chrome)
requestAnimationFrame(function captionsCallback() {
  updateCaptions();
  requestAnimationFrame(captionsCallback);
});

function updateCaptions() {
  captions.replaceChildren(...Array.from(track.activeCues).map(cue => cue.getCueAsHTML()));
}

function getVttUrl() {
  const vtt = `WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the lord of the universe in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels
`;

  const vttBlob = new Blob([vtt], { type: "text/vtt" });
  
  return URL.createObjectURL(vttBlob);
}

<head><base href="https://interactive-examples.mdn.mozilla.net"></head>
<body>
  <video controls width=320 src="/media/cc0-videos/friday.mp4"></video>
  <p id="captions"></p>
</body>

我们可以通过使用HTMLMediaElement.currentTime实现一个自定义的"活跃度评估"来将其与TextTrack的activeCues解耦。

const video = document.querySelector("video");
const captions = document.getElementById("captions");

const trackElement = document.createElement("track");
trackElement.src = getVttUrl();
video.append(trackElement);

const track = trackElement.track;
track.mode = "hidden";

track.cues; // Accessing `cues` fixes a "not iterable" error (on Chrome)
requestAnimationFrame(function captionsCallback() {
  updateCaptions();
  requestAnimationFrame(captionsCallback);
});

function updateCaptions() {
  const activeCues = Array.from(track.cues).filter(cue => {
    // Check according to:
    // https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#cue_timings (see "Non-overlapping cue timing examples")
    return cue.startTime <= video.currentTime && cue.endTime > video.currentTime;
  });
  captions.replaceChildren(...activeCues.map(cue => cue.getCueAsHTML()));
}

function getVttUrl() {
  const vtt = `WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
Hildy!

00:00:01.000 --> 00:00:01.499 line:80%
How are you?

00:00:01.500 --> 00:00:02.999 line:80%
Tell me, is the lord of the universe in?

00:00:03.000 --> 00:00:04.299 line:80%
Yes, he's in - in a bad humor

00:00:04.300 --> 00:00:06.000 line:80%
Somebody must've stolen the crown jewels
`;

  const vttBlob = new Blob([vtt], { type: "text/vtt" });
  
  return URL.createObjectURL(vttBlob);
}

<head><base href="https://interactive-examples.mdn.mozilla.net"></head>
<body>
  <video controls width=320 src="/media/cc0-videos/friday.mp4"></video>
  <p id="captions"></p>
</body>

比较方法

在这里，你可以尝试的方法从上面自己：
一个9个1x一个10个1x一个11个1x
也可以尝试拖动时间线，看看字幕的React!

- 注意**：您可能还想对其他事件尝试自定义活动性检查。

NodeJS 如何显示嵌入式youtube视频的字幕？

1条答案

使用`<track>`元素

使用`cuechange`事件

媒体的`timeupdate`事件

带有`requestAnimationFrame()`

比较方法

相关问题

热门标签

最新问答

NodeJS 如何显示嵌入式youtube视频的字幕？

1条答案

使用<track>元素

使用cuechange事件

媒体的timeupdate事件

带有requestAnimationFrame()

比较方法

相关问题

热门标签

最新问答

使用`<track>`元素

使用`cuechange`事件

媒体的`timeupdate`事件

带有`requestAnimationFrame()`