HTML5 视频:从文本区域添加字幕文本

Question

HTML文件中字幕轨道的来源是否可以是JavaScript字符串？例如，文本区域的上下文？

概念 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 in Action：https://jsfiddle.net/artayeoy/1/

最终目标是希望从Google Speech API获得字幕文本，有人可以在其中观看视频，修复Google的混乱，并重播以确保所有内容都匹配。

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

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

Answer 1

是的，这是可能的。

关键点(以及您尝试失败的原因(是 WebVTT 文件格式的结构非常严格(必读(：

• 它必须以文件签名WEBVTT开头。生成的文件以换行符开头，该换行符无效，并导致解析器忽略它。
• U+000A 换行 (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>