node.js - 将带有 mp4 的字幕文件 (.VTT) 从 Node/Express 发送到 Angular

Question

我正在使用 Node/Express 将 mp4 视频发送到我使用 angular 的前端。视频正在顺利发送，一切正常。现在，我想发送包含字幕的 VTT 文件以及 mp4。我不知道如何去做？我试过搜索，但找不到任何帮助。这是我的代码:

Node/Express

router.get('/playVideo', (req, res) => {

const path = "videos/testVideo.mp4";
const pathSubtitle = "videos/testsub.vtt";

const stat = fs.statSync(path);
const fileSize = stat.size;

const head = {
  'Content-Length': fileSize,
  'Accept-Ranges' : 'bytes',
  'Content-Type': 'video/mp4'
}

res.writeHead(200, head);
fs.createReadStream(path).pipe(res);
});

Angular

<div class="container-fluid">
<br>
<div class="jumbotron-fluid">

  <video id = "videoPlayer" controls preload = "metadata" style = "width: 
      65%; position: fixed; border: 2px solid #7c2c6c;">
      <source src="http://localhost:3000/playVideo" autoplay type = 
      "video/mp4">
  </video>
  
</div>
</div>

如何在视频响应中附加字幕文件？或者，链接到任何其他详细解释的文档？

Answer 1

在不同的 url(例如/playVideo.vtt)上提供 vtt 文件，然后使用 track 元素显示它:*

<video id = "videoPlayer" controls preload = "metadata" style = "width: 
      65%; position: fixed; border: 2px solid #7c2c6c;">
    <source src="http://localhost:3000/playVideo" autoplay type = 
      "video/mp4">
    <track default src="http://localhost:3000/playVideo.vtt">
</video>

您可以在这里阅读更多信息: https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#within_site_css在这里: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
*代码尚未测试