このコンテンツはお使いのブラウザには対応しておりません。
新しいバージョンのブラウザでアクセスしてください。
新しいバージョンのブラウザでアクセスしてください。
HTML5で動画に字幕を入れる
HTML5では新たにvideo要素が導入され、プラグインをインストールしなくてもブラウザがサポートしてるフォーマットの動画を再生させることができます。
さらに、track要素を使うと、動画に字幕を入れることができます。
字幕の定義はWebVTTというW3Cが標準化を進めている字幕フォーマットで指定します。
以下にサンプルの動画と字幕を配置しました。
以下のブラウザで動作を確認しました。
さらに、track要素を使うと、動画に字幕を入れることができます。
字幕の定義はWebVTTというW3Cが標準化を進めている字幕フォーマットで指定します。
以下にサンプルの動画と字幕を配置しました。
| ブラウザ | バージョン |
| InternetExplorer | 10 |
| Firefox | 24.0 |
| Google Chrome | 30 |
※
Firefoxは、動作保証対象外の設定変更が必要です。（後述）
コード
HTMLの動画指定部分は以下のようになっています。
video要素の中には、動画を指定するsource要素、字幕を指定するtrack要素、video要素に対応していないブラウザ向けの代替表示テキストの順で配置します。
動画ファイルとWebVTTファイルは"video"サブフォルダに配置し、相対パスで指定しています。
字幕の指定は以下のようになっています。
1行目にWEBVTTと記述します。
空行にも意味があり、字幕指定の区切りを表します。
表示する時間（開始から終了）の指定の次の行に実際に表示させるテキストを記述します。
時間指定の後ろには字幕の位置やサイズに関する指定を記述することもできます。
2つ目の字幕では、字幕の表示縦位置を上から50%の位置に指定しています。
3つ目の字幕では、字幕の表示横位置を左から90%の位置に指定し、文字揃えを右揃えに指定しています。
表示させるテキストにはHTMLと同様の何種類かの文字修飾要素を入れることもできます。
3つ目の字幕では、最後の「終了」をボールドに指定しています。
この他にも、idを指定したり、CSSを定義することなども可能なようです。
Firefoxでは、終了時間の指定が無効で、次の字幕表示に切り替わるまで、前の字幕が表示し続けられました。
1つ目の字幕では、テキストを2行に分けて記述しましたが、IE10とChromeでは2行で表示され、Firefoxでは1行で表示されました。
2つ目と3つ目の字幕の位置指定では、IE10とFirefoxで無効で、Chromeだけが認識しました。
3つ目の字幕のテキストのボールド指定は、IE10では無効でした。
なお、今回確認したバージョンでの挙動ですので、今後のバージョンアップで状況も変わってくるものと思われます。
<video controls="controls">
<source src="video/carp.mp4" type="video/mp4">
<source src="video/carp.webm" type="video/webm">
<track id="jaTrack" src="video/carp_track.vtt" kind="subtitles" srclang="ja" label="テスト" default="default">
<span class="caution">このブラウザでは再生できません。</span>
</video>動画ファイルとWebVTTファイルは"video"サブフォルダに配置し、相対パスで指定しています。
字幕の指定は以下のようになっています。
WEBVTT
00:00.000 --> 00:02.000
動画スタート！
（草刈機のノイズが入ってます）
00:09.500 --> 00:11.500 line:50%
半分経過
00:17.000 --> 00:19.000 position:90% align:end
もうすぐ<b>終了</b>
空行にも意味があり、字幕指定の区切りを表します。
表示する時間（開始から終了）の指定の次の行に実際に表示させるテキストを記述します。
時間指定の後ろには字幕の位置やサイズに関する指定を記述することもできます。
2つ目の字幕では、字幕の表示縦位置を上から50%の位置に指定しています。
3つ目の字幕では、字幕の表示横位置を左から90%の位置に指定し、文字揃えを右揃えに指定しています。
表示させるテキストにはHTMLと同様の何種類かの文字修飾要素を入れることもできます。
3つ目の字幕では、最後の「終了」をボールドに指定しています。
この他にも、idを指定したり、CSSを定義することなども可能なようです。
ブラウザによる挙動の違い
字幕表示はブラウザによって対応状況がバラバラで、今回作成したサンプルを3つのブラウザで動作確認してみましたが、いくつか挙動の違いが見られました。Firefoxでは、終了時間の指定が無効で、次の字幕表示に切り替わるまで、前の字幕が表示し続けられました。
1つ目の字幕では、テキストを2行に分けて記述しましたが、IE10とChromeでは2行で表示され、Firefoxでは1行で表示されました。
2つ目と3つ目の字幕の位置指定では、IE10とFirefoxで無効で、Chromeだけが認識しました。
3つ目の字幕のテキストのボールド指定は、IE10では無効でした。
なお、今回確認したバージョンでの挙動ですので、今後のバージョンアップで状況も変わってくるものと思われます。
MIMEタイプ
このブラウザによる動画再生と字幕表示の機能を利用する際には、Webサーバ側の設定が影響することがあるようです。
まず、動画についてです。
今回はMP4フォーマットの動画を使用していますが、source要素のtype属性でMIMEタイプを"video/mp4"と指定していても、IE10とFirefoxでは認識してくれませんでした。
Webサーバ側のMIMEタイプ設定に追加することで、IE10でもFirefoxでも認識するようになりました。
ChromeはWebサーバ側の設定に関係なく認識し、動画が再生されました。
次に、WebVTTファイルです。
こちらはWebサーバ側にMIMEタイプの設定がないと、IE10で字幕が無効になってしまいました。
WebVTTファイルのMIMEタイプは"text/vtt"です。
WebサーバにApacheを利用しているのであれば、mime.typesに定義を追加してください。
独自の設定変更ができないホスティング環境を利用している場合は、.htaccessファイルに以下の定義を追加してください。
まず、動画についてです。
今回はMP4フォーマットの動画を使用していますが、source要素のtype属性でMIMEタイプを"video/mp4"と指定していても、IE10とFirefoxでは認識してくれませんでした。
Webサーバ側のMIMEタイプ設定に追加することで、IE10でもFirefoxでも認識するようになりました。
ChromeはWebサーバ側の設定に関係なく認識し、動画が再生されました。
次に、WebVTTファイルです。
こちらはWebサーバ側にMIMEタイプの設定がないと、IE10で字幕が無効になってしまいました。
WebVTTファイルのMIMEタイプは"text/vtt"です。
WebサーバにApacheを利用しているのであれば、mime.typesに定義を追加してください。
独自の設定変更ができないホスティング環境を利用している場合は、.htaccessファイルに以下の定義を追加してください。
AddType video/mp4 .mp4
AddType text/vtt .vtt
当サイトでは、第三者配信による広告サービスを利用しています。
このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報（氏名、住所、メール アドレス、電話番号は含まれません）を使用することがあります。
このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。
