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の音声APIどこから字幕テキストを持つことができれば誰か動画を見たり、Googleの混乱を修正したり、再生してすべてが一致することを確認することができます。

最後に、結果のファイルを実際のファイルとして保存します。 https://github.com/agermanidis/autosub

Answer 1

はい、それは可能である：

元のテキスト入力からです。

キーポイント（と、なぜあなたの試みのが動作しませんでした）WebVTTファイル形式は、その構造（must read）で、非常に制限的であるということである。

• にそれがはファイル署名を開始する必要がありますWEBVTT。生成されたファイルは、改行文字で始まりますが、これは無効であり、パーザはそれを無視します。
• U + 000Aラインフィード（LF）文字は、あなたの入力がいずれかを持っていなかった（キャリッジリターン文字がLFに変換されている）、ブロックの区切り文字として使用されている。..

つまり、あなたのテキストのことを確認する必要があり形式はこれらのルールに基づいて有効です。この種のプロジェクトがあった場合でも、他の入力UIと一緒にテキストコンテンツを入力するだけで、シリアル化を自分で実行することさえできます。

とにかく、ここでは簡単な修正があります（何らかの理由で、FFのdataURIで動作させることができなかったので、代わりにBLOBURIを使用します）。スピーチを除いては、YouTubeで行う方法字幕編集のよう

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>