Google で数日間検索しましたが、字幕について説明している HTML5 ビデオ トラックの例しか見つかりません。見つけたものは完全ではありません。基本的に、私がやりたいことは次のとおりです。
-キューを入力するとき、キューのデータにアクセスする必要があります。
-テキストデータ（少なくともテキストだと思います...）には数字が含まれています。その番号は、ドキュメントの他の場所にある img ID に対応しています。次に、画像に何かをします。
これは非常に単純なように思えますが、どこから始めればよいか正確にはわかりません。私はJqueryを使用しています。
ここに私のコードのいくつかのスニペットがあります:
私の $(document).ready 関数には、次のものがあります...
var t = $("#track1")[0];
t.addEventListener("cuechange", function () {
var mycue = this.track.cues[0];
var imgnum = mycue.text;
var image = $("img#" + txt);//I'm not worried about this part yet...I never get here
//perform actions on image...
});
私のhtmlビデオタグは次のようになります。
<video id="Video1" controls='controls' width="100%" autoplay>
<source src="videos/video-part1.mp4" type="video/mp4" >
<track id="track1" kind="metadata" src="test.vtt" srclang="en-us" />
HTML5 Video is required for this example. </video>
そして、私の Webvtt ファイルは次のようになります (時間範囲の下の数字は、使用する必要があるスライド番号です)
WEBVTT
Test1
00:00:00.000 --> 00:00:23.999
00001
Test2
00:00:24.000 --> 00:01:19.999
00121
Test3
00:01:20.000 --> 00:01:39.999
00793
Chrome でコードを最初の数回デバッグしたとき、トラックに関連付けられたキュー データがないように見えました (コードの別の場所でキューをチェックしたところ、それらは空でした)。cuechange イベントもフックされていません。しばらくすると、Chrome でドメイン間でのテキスト トラックの参照に関するエラーが表示されるようになりました。どうしていきなりそんなことを始めたのかわからない。
でも、要するに…
- 何かを cuechange イベントに (明らかに) 正しくバインドする方法、またはキューを入力するイベントにバインドする方法がわかりません。
- 必要なデータへのアクセス方法がわかりません。
ちなみに、kind="captions" と kind="subtitles" も試しました。どちらも私にとってはうまくいきませんでした。いくつかの助けは素敵でしょう。:)