30秒後から再生     37秒後から再生

  [  /  ] Sec
<その2:HTML5 で定める方法で字幕を入れています。(NHKクリエイティブ・ライブラリーが提供するフリー素材です)>
<video id="demo" src="movie/murasakinohana.mp4" autoplay loop controls>
<track kind="captions" srclang="ja" label="字幕" src="txt/moji-01.vtt" default />
</video>
*字幕の指定は、<video 〜>と</video>の間に、<track 〜 />タグで指定します。
<track kind="captions" srclang="ja" label="字幕" src="txt/moji-01.vtt" default />
*「kind」は、属性値として、subtitles、captions、descriptions、chapters、metadata を指定することができるとしています。
 字幕としては、「subtitles」または「captions」のいずれかを kind 属性値として指定することになります。
*「srclang」は、日本語の場合は「ja」を指定します。なお、英語の場合は「en」です。
*「label」は、多分任意です。
*「src」は、字幕を記録するファイルを拡張子「.vtt」で指定します。なお、ファイルの文字コードは「UTF-8」にします。
*複数の字幕ファイルを指定できますので、主たる字幕ファイルは「default」とします。選択方法は不明です。


<「moji-01.vtt」ファイル内容>
WEBVTT

1
0:00:00.160 --> 0:00:05.000 align:start
字幕の開始

1
0:00:06.160 --> 0:00:15.000
野に咲く紫の花

2
0:00:16.000 --> 0:00:20.560
NHKグレーティブライブラリーの提供するフリー素材

3
0:00:21.260 --> 0:00:31.000
ここから花がアップされます。

4
0:01:00.000 --> 0:01:02.200 align:end
終わりです!

1. 1行目に「WEBVTT」を記述します。
2. 2行目は空行にします。以下、空行は字幕指定の区切りを表します。
3. 各字幕別に記述します。
(1) コメントですので、省略可能です。
(2) 字幕の開始・終了時間を「H:MM:SS.ttt --> H:MM:SS.ttt」形式で指定します。
(3) 字幕文字を記述します。
(4) 空行とします。
※基本的なことは以上で実現できます。なお、PCサイドでも動作します。

<表示位置等のオプション>
*オプションは、「H:MM:SS.ttt --> H:MM:SS.ttt XXXXXXXXX」位置に記述できます。
*字幕のデフォルトの表示位置は画面下の中央です。
*上下の表示位置は、「line:20%」とすると上から20%の位置に字幕が出ます。
*左右の表示位置は、「position:30%」とすると、字幕の中央部分が画像の左から30%の位置に出るようになります。
 これは、「position:30% align:middle」と同じです。なお、ディフォルトは「position:50% align:middle」です。
*左右の表示位置は、動画の左から指定する場合は「align:start」、右から指定する場合は「align:end」とします。
*「position:30% align:start」とすると、動画の左から30%の位置に字幕が表示されます。
*字幕文字列には、「<b></b>」、「<u></u>」、「<i></i>」、「<ruby><rt></rt></ruby>」のタグが使えます。
*「CSS」は、Firefox 38.0.5 ではまだ実装されていないようです。文字の色や大きさなどは現在のところ指定できません。



※ 字幕以外に関する部分は、「その1」と同じです。



※ 詳細はソースを見てください。なお、Firefox 以外では動作確認をしていません!