javascript - HTML5 视频 : Add Subtitle text from a TextArea

Question

是否可以将 HTML 文件中字幕轨道的来源设为 JavaScript 字符串？例如，TextArea 的上下文？

概念 HTML:

   <div>
      <video id="video" controls preload="metadata" style="float:left;width:17em;">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
  </video>
  <textarea id="source" style="float:right;width:17em;height:200em;margin-left:5px;">
    WEBVTT . 1 00:00:00.256 --> 00:00:02.304 TESTERONY 2 00:00:03.840 --> 00:00:05.376 Test2

  </textarea>
</div>

概念Javascript:

document.getElementById("video").addEventListener("loadedmetadata", function() {
  track = document.createElement("track");
  track.kind = "captions";
  track.label = "English";
  track.srclang = "en";
  track.src = "data:text/plain;" + document.getElementById("source").value;;
  track.addEventListener("load", function() {
    this.mode = "showing";
    video.textTracks[0].mode = "showing"; // thanks Firefox 
  });
  this.appendChild(track);
});

JSFiddle 实战: https://jsfiddle.net/artayeoy/1/

最终目标是希望从 Google Speech API 获得字幕文本，这样人们就可以观看视频、修复 Google 的困惑并重播以确保一切匹配。

最后我们将生成的文件保存为真实文件。

原文输入来自: https://github.com/agermanidis/autosub

Answer 1

是的，这是可能的。

关键点(以及您的尝试无效的原因)是 WebVTT 文件格式在其结构上非常严格(must read):

• 它必须以文件签名WEBVTT 开头。您生成的文件以无效的换行符开头，导致解析器忽略它。
• U+000A LINE FEED (LF) 字符用作 block 分隔符，(回车字符转换为 LF)您的输入没有任何..

所以你必须根据这些规则检查你的文本格式是否有效，如果我有这种项目，我什至会让用户输入文本内容，以及一些其他输入 UI，但是自己执行序列化。

无论如何，这是对您的 fiddle 的简单更正(请注意，由于某些原因，我无法在 FF 上使用 dataURI，因此我改用 blobURI)。

document.getElementById("video").addEventListener("loadedmetadata", function() {
  track = document.createElement("track");
  track.kind = "captions";
  track.label = "English";
  track.srclang = "en";
  track.addEventListener("load", function() {
    this.mode = "showing";
    video.textTracks[0].mode = "showing"; // thanks Firefox 
  });
  // Here I just call trim() to get WEBVTT as 6 first characters
  var vttText = document.getElementById("source").value.trim();
  var vttBlob = new Blob([vttText], {
    type: 'text/plain'
  });
  track.src = URL.createObjectURL(vttBlob);
  this.appendChild(track);
});

<div>
  <video id="video" controls preload="metadata" style="float:left;width:17em;">
    <source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
  </video>
  <textarea id="source" style="float:right;width:17em;height:200em;margin-left:5px;">
    WEBVTT
    1
    00:00:00.256 --> 00:00:02.304
    TESTERONY
    2
    00:00:03.840 --> 00:00:05.376
    Test2

  </textarea>
</div>