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

Question

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

Answer 1

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>