HTML5 ビデオ フレームワーク Video.js でチャプターの選択が機能しません。私はたくさん検索しましたが、実際の解決策や実際の例を見つけることができないようです。
.vtt ファイルでチャプター トラックを使用したいのですが、メニューが表示されません。何をしようとも。私はサンプルビデオをそれで動作させようとするだけです:
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
<track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters" />
</video>
編集：「デフォルト」を追加して、または追加せずにさまざまなオプションを試しました：
<track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters" />
<track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters" default />
<track kind="chapters" src="chapters.vtt" srclang="en" label="Chapters" default="default" />
vtt ファイル:
WEBVTT
chapter-1
00:00.000 --> 00:03.500
Intro
chapter-2
00:03.501 --> 00:05.500
This is Chapter 02
chapter-3
00:05.501 --> 00:07.500
This is Chapter 03
例が見つからないため、メニューがどのように/どこに表示されるかさえわかりません。
ところで。デモのキャプションは、すべてのブラウザーで機能するわけではありません (demo.captions.vtt)。プレーヤーには「CC」メニュー ボタンが表示されますが、実際のキャプションは IE10 または Chrome(27) では表示されません。