HTML5 视频:从 TextArea 添加字幕文本 [英] HTML5 Video: Add Subtitle text from a TextArea

查看:44
本文介绍了HTML5 视频:从 TextArea 添加字幕文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

是否可以将 HTML 文件中字幕轨道的来源设为 JavaScript 字符串?例如,TextArea 的上下文?

HTML 概念:

 

<video id="video" 控制 preload="metadata" style="float:left;width:17em;"><source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"></视频><textarea id="source" style="float:right;width:17em;height:200em;margin-left:5px;">WEBVTT .1 00:00:00.256 -->00:00:02.304 测试 2 00:00:03.840 -->00:00:05.376 测试 2</textarea>

Javascript 概念:

document.getElementById("video").addEventListener("loadedmetadata", function() {track = document.createElement("track");track.kind = "字幕";track.label = "英文";track.srclang = "en";track.src = "数据:文本/普通;"+ document.getElementById("source").value;;track.addEventListener(加载",函数(){this.mode = "显示";video.textTracks[0].mode = "显示";//感谢火狐});this.appendChild(track);});

正在运行的 JSFiddle:https://jsfiddle.net/artayeoy/1/

最终目标是希望有来自 Google Speech API 的字幕文本,人们可以在其中观看视频、修复 Google 的混乱并重播以确保一切都匹配.

最后,我们将生成的文件保存为真实文件.

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

解决方案

是的,这是可能的.

关键点(以及您的尝试无效的原因)是 WebVTT 文件格式的结构非常严格(必读):

  • 必须以文件签名WEBVTT开头.您生成的文件以一个无效的换行符开头,并导致解析器忽略它.
  • U+000A 换行 (LF) 字符用作块分隔符,(回车符转换为 LF)您的输入没有任何..

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

无论如何,这是对您的小提琴的简单更正(请注意,由于某些原因,我无法使其与 FF 上的 dataURI 一起使用,因此我改用 blobURI).

document.getElementById("video").addEventListener("loadedmetadata", function() {track = document.createElement("track");track.kind = "字幕";track.label = "英文";track.srclang = "en";track.addEventListener("加载", function() {this.mode = "显示";video.textTracks[0].mode = "显示";//感谢火狐});//这里我只是调用trim()来获取WEBVTT作为前6个字符var vttText = document.getElementById("source").value.trim();var vttBlob = new Blob([vttText], {类型:'文本/普通'});track.src = URL.createObjectURL(vttBlob);this.appendChild(track);});

<video id="video" 控制 preload="metadata" style="float:left;width:17em;"><source src="https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4"></视频><textarea id="source" style="float:right;width:17em;height:200em;margin-left:5px;">网络VTT100:00:00.256 -->00:00:02.304测试200:00:03.840 -->00:00:05.376测试2</textarea>

Is it possible to have the source of a subtitle track in HTML file be a JavaScript string? For example, the context of a TextArea?

Concept 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>

Concept 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);
});

The JSFiddle in Action: https://jsfiddle.net/artayeoy/1/

The end goal is hopefully to have subtitle text from Google Speech API where someone can watch the video, fix Google's mess-ups, and replay to make sure everything matches up.

At the end we'd save the resulting file as the real file.

Original text input is from: https://github.com/agermanidis/autosub

解决方案

Yes it is possible.

The key point (and the why of your try didn't work) is that the WebVTT file format is quite restrictive in its structure (must read) :

  • it must start with a file signature WEBVTT. Your generated file started with a new line character, which is invalid, and caused parsers to ignore it.
  • U+000A LINE FEED (LF) characters are used as blocks delimiters, (Carriage Return characters are converted to LF) your input didn't had any..

So you have to check that your text's format is valid according to these rules, and if I had this kind of project, I would even just let the user enter the text content, along with some other input UI for times, but perform the serialization myself.

Anyway, here is a simple correction on your fiddle (note that for some reasons, I wasn't able to make it work with a dataURI on FF, so I use a blobURI instead).

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 添加字幕文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆