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文件格式在结构上有严格的限制（必须阅读）：

• 它必须以文件签名开头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>