[68] 動画や音声に字幕やキャプションを表示しよう <track>

<track>要素も「メディア要素」の子要素です。
<video>要素 <audio>要素と組み合わせて、字幕などのテキストトラック(外部ファイル)を組み込みます。これもHTML5からの新要素です。
<track>要素は空要素。終了タグはありません

使用する要素 <track>(空要素。終了タグは不可)
<track>の属性
一覧はこちら
src :組み込むテキストトラックファイルのURL
kind :テキストトラックの種類をキーワードで指定
srclang :テキストトラックデータの言語
label :トラックの名前
default :複数指定したトラックのうち、優先トラックにする
グローバル属性

<video>要素と組み合わせて、動画に字幕をつけよう

「[65] 動画をプラグイン無しで組み込もう」で指定したように、
<video>要素内に<source>要素で複数の動画形式を指定した後に <track>を指定します。
今回のサンプルのテキストトラックファイルは WebVTT形式。これを src属性で呼び出しています。
kind属性はテキストトラックの種類、srclang属性はテキストトラックの言語コードを指定します。

今回のサンプルは<track>要素が1つしか無いので、default属性の指定はいらないはずだけど、
これを指定しておくと Opera が反応するので書きました。(default 無しだと、なぜか字幕表示しませ〜ん)

このように<track>要素は 今はまだブラウザによって挙動がまちまちなようでが、HTML5.1の要素としても上がっているんですよね。
今のところ Chrome, Opera, Firefox(27.0.1), IE10 は対応しています。(2014年2月記)

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
  <source src="uchiage.webm" type="video/webm">
  <source src="uchiage.mp4" type="video/mp4">
  <track src="track.vtt" kind="captions" srclang="ja" default>
  <p>このブラウザは動画再生に対応していません</p>
</video>

←これは画像です。クリックで別ウィンドウで開きます。

コントローラに「CC」ボタンが表示され、字幕の表示・非表示が切り替えられます。
左はChrome(on Mac)の画面。

「WebVTTファイル」でテキストトラックを作ろう

<track>要素で使う「テキストトラックファイル」には「TTML」と「WebVTT」の2形式があるそうです。「TTML」は XMLでの記述で、ちょっと複雑ですが、「WebVTT」はタイムコードと表示テキストを並べて書くだけ。簡単そうなので、サンプルは「WebVTT」で書いてみました。

プレーンテキストで下記のように書いて、拡張子を「.vtt」で保存すればOK。
文字エンコードは UTF-8 。

WEBVTT

00:00.000 --> 00:02.000
打ち上げが始まりました!

00:09.500 --> 00:13.500 line:10%
<b>百花繚乱</b>

00:18.000 --> 00:21.000 position:90% align:end
そろそろ終了です

冒頭に WEBVTT と書いて WebVTT形式であることを宣言します。
そのあと 空白行 を入れます。空白行は指定の区切りを表します
時間形式は hh:mm:ss.sss で表します。始まりの時間と終わりの時間を「 --> 」でつなぎます。
その時間帯に表示したいテキストをすぐ下に(空白行無しで)書きます。
テキストだけでなく<b>などのHTMLでの指定も可能(ブラウザによって反映しない場合あり。ChromeはOK)

キュー(1つの字幕表示)とキューの間は、空白行で空けて区切ります。
(コレ重要。空白行が無しで次のキューの時間指定をすると、テキストとして表示されちゃいます)

字幕のデフォルトの表示位置は画面下部分の中央ですが、
時間指定の後に、line や position、align などで、表示位置を変更することもできます。
● line は上下の位置を指定します。line:10% で画面上から10%の位置になります。
position は左右の位置
● align は文字の頭揃えや尻揃え
を指定します。
サンプルのように「position:90% align:end」なら画面右側に尻揃え (右揃え) で表示。
「position:5% align:start」とすれば、画面左側 (画面左から5%の位置) に頭揃え(左揃え)で表示します。(これもブラウザによって反映しない場合あり。ChromeはOK)

複数の<track>を指定するときの注意点

<track>要素は複数指定することができます。
例えば、1つの動画に日本語と英語の字幕をセットして、ユーザに切り替えてもらうことができるようです。ただし、今のところ Chrome でも、トラックの切り替えなどうまく実現しませんでした。

複数指定するとき、kind属性srclang属性の値の同じものはNG
一緒に使えないって。その場合は label属性で違う名前を付けてやれば一緒に使えます。

また、どれか1つに default属性を指定して、デフォルトで有効になるようにします。

<video controls poster="img/vid_img.jpg" preload="auto" width="640" height="360">
<source src="uchiage.webmsd.webm" type="video/webm">
<source src="uchiage.mp4" type="video/mp4">
<track src="track1.vtt" kind="captions" srclang="ja" label="caption-1" default>
<track src="track2.vtt" kind="captions" srclang="ja" label="caption-2">
</video>

<audio>要素にも使えるはず…ですが

<video>要素には難なく<track>要素を組み合わせられましたが、
<audio>要素とは…結局うまく行きませんでした〜。(上記のサンプルの後半部分で実験しています)

資料を探しましたが、実例も乏しく(というか無く)。
テキストトラックを表示するフィールドを何らかの方法(JavaScriptとか)で設定する必要があるのかも?などと、
いろいろ試しましたが、実現せず。...今回は諦めました。

kind属性を見ていても、<track>は、まだ<video>用の要素なのかな?とも思います…。
今後、進展がありましたら、こちらのページを更新したいと思います。

今回参考にしたサイト

ご存知かと思いますが、「HTML5 Rocks」のチュートリアルページはかなり勉強になります。
(Google Chrome の HTML5 チュートリアルサイトです)
そこの「track 要素の基礎」という記事を今回参考にしました。
ここでは、JavaScriptを使って track とキューにアクセスする方法も書かれていますので、興味のあるかたはご覧ください。

<track>の属性一覧

src="URL"
組み込むテキストトラックファイルのURL。必須。
<track src="track.vtt" kind="subtitles" srclang="ja" label="日本語字幕">
kind="キーワード"
テキストトラックの種類を以下のキーワードで指定する。
  • subtitles:翻訳字幕。デフォルト。(画面も音もある環境向け)
  • captions:字幕プラス効果音や状況説明(“どーんと雷のような音” とか)などをテキスト表示。(画面はあるけど音の無い環境向け)
  • descriptions:動画の視覚的な構成の説明。(画面の無い環境向け)
  • chapters:チャプター(章)タイトル。動画の頭出しができるとか。
  • metadata:スクリプトから利用される情報。ユーザには非表示。
<track src="track.vtt" kind="subtitles" srclang="ja" label="日本語字幕">
srclang="言語コード"
テキストトラックの言語コードを指定。
日本語は「ja」英語は「en」フランス語は「fr」など。
<track src="track.vtt" kind="subtitles" srclang="ja" label="日本語字幕">
label="任意の名前"
<track>を複数指定する時に、各トラックを区別するためのラベル(名前)。
各トラックをリストで表示する時に使う。空文字不可。
kindとsrclang属性が同じ<track>なら、label属性は違う値にする必要あり。
<track src="track1.vtt" kind="subtitles" srclang="ja" label="日本語字幕ヤマトンチュ">
<track src="track2.vtt" kind="subtitles" srclang="ja" label="日本語字幕ウチナーンチュ">
<track src="track3.vtt" kind="subtitles" srclang="en" label="English">
default(または「default=""」「default="default"」 )
<track>を複数指定する時に、デフォルトで有効になるトラックを指定する。
<track src="track1.vtt" kind="subtitles" srclang="ja" label="日本語字幕ヤマトンチュ" default>
<track src="track2.vtt" kind="subtitles" srclang="ja" label="日本語字幕ウチナーンチュ">
このほかグローバル属性も使います
id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回から <canvas>要素です。
<canvas>要素はスクリプトで描くグラフィックスを表示する領域を作る要素です。
JavaScript メソッドがいろいろ用意されて、かなりオモシロイことができます。
描画の基礎からやって行こうと思います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

audio要素

<audio>要素にも使えるはず…ですが
について、同じことをやりました。
<video>要素にmp4ではなく、mp3を指定すると実現できるようです。
変な感じですが。

Re: audio要素

おお〜、
kiriさん、貴重な情報ありがとうございます。
なるほど、video要素は音声を扱えるわけですから
video要素でできる領域に字幕が表示可能なんですね。
もしかして、それが正解なのかな?
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.