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

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>

正在运行的JSFIDLE：

最终的目标是希望有来自谷歌语音API的字幕文本，人们可以在其中观看视频，修复谷歌的混乱，并重播，以确保一切匹配

最后，我们将结果文件保存为真实文件

原始文本输入来自： 是的，这是可能的

关键的一点（以及您的尝试失败的原因）是WebVTT文件格式在结构上有很大的限制（）：

• 它必须以文件签名开始。生成的文件以新行字符开头，该字符无效，并导致解析器忽略它
• U+000A换行符（LF）字符用作块分隔符，（回车符转换为LF）您的输入没有任何

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

无论如何，这里有一个简单的修正（注意，由于某些原因，我无法在FF上使用dataURI，所以我使用blobURI）

document.getElementById（“视频”）.addEventListener（“loadedmetadata”，函数（）{
track=document.createElement（“track”）；
track.kind=“字幕”；
track.label=“英语”；
track.srclang=“en”；
track.addEventListener（“加载”，函数（）{
this.mode=“显示”；
video.textTracks[0].mode=“showing”//谢谢Firefox
});
//在这里，我只调用trim（）将WEBVTT作为前6个字符
var vttext=document.getElementById（“源”）.value.trim（）；
var vttBlob=新Blob（[vttText]{
键入：“文本/普通”
});
track.src=URL.createObjectURL（vttBlob）；
这个。附加子（轨道）；
});

WEBVTT
1.
00:00:00.256 --> 00:00:02.304
测试员
2.
00:00:03.840 --> 00:00:05.376
测试2
是的，这是可能的

关键的一点（以及您的尝试失败的原因）是WebVTT文件格式在结构上有很大的限制（）：


它必须以文件签名开始。生成的文件以新行字符开头，该字符无效，并导致解析器忽略它
U+000A换行符（LF）字符用作块分隔符，（回车符转换为LF）您的输入没有任何

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

无论如何，这里有一个简单的修正（注意，由于某些原因，我无法在FF上使用dataURI，所以我使用blobURI）


document.getElementById（“视频”）.addEventListener（“loadedmetadata”，函数（）{
track=document.createElement（“track”）；
track.kind=“字幕”；
track.label=“英语”；
track.srclang=“en”；
track.addEventListener（“加载”，函数（）{
this.mode=“显示”；
video.textTracks[0].mode=“showing”//谢谢Firefox
});
//在这里，我只调用trim（）将WEBVTT作为前6个字符
var vttext=document.getElementById（“源”）.value.trim（）；
var vttBlob=新Blob（[vttText]{
键入：“文本/普通”
});
track.src=URL.createObjectURL（vttBlob）；
这个。附加子（轨道）；
});

WEBVTT
1.
00:00:00.256 --> 00:00:02.304
测试员
2.
00:00:03.840 --> 00:00:05.376
测试2
就像YouTube上的字幕编辑一样，除了语音。有一个开源的JS媒体播放器，它可以很好地进行交互式转录，名为@zer00ne谢谢。我会查出来的。这可能会为我节省一些编码，比如YouTube上的字幕编辑，除了语音。有一个开源的JS媒体播放器，它可以很好地进行交互式转录，名为@zer00ne谢谢。我会查出来的。这可能会节省我一些编码。谢谢！这很有用。现在我知道了这个概念，我可以把它抽象得更多了。谢谢！这很有用。现在我知道了这个概念，我可以把它抽象得更多了。
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);
});