HTML5 视频：从 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) 字符用作块分隔符，（回车字符转换为 LF）您的输入没有任何内容..

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

无论如何，这是对您的小提琴的一个简单更正（请注意，由于某些原因，我无法使其与 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>