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 in Action： 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>

HTML5视频：从TextArea添加字幕文本

1 个答案: