HTML5のvideoタグをチェック
2018.07.11

HTML5のvideoタグをチェック

“videoタグ”を仕事で調べる機会があったので、備忘録としてまとめました。
HTML5から追加された“videoタグ”を使用することで、Flashのようにプラグインをインストールすることなく、動画を再生できるようになります。

videoタグについて

シンプルなもので、以下のソースでファイルを読み込み再生します。

例として“movie.mp4”を読み込ませています。“MP4”についてはMP4 についてで説明しています。

videoタグの属性

controls属性:インターフェース表示

videoタグにcontrolsを追記すると、再生・一時停止・再生位置の移動・ボリュームなど、 インターフェースを、ブラウザが自動で表示します。

autoplay属性:自動再生

videoタグにautoplayを追記すると、サイトページ読み込みと同時に自動再生します。

muted属性:無音再生

videoタグにmutedを追記すると、無音で再生されます。インターフェース表示時はサウンドアイコンが消音状態になっています。

loop属性:繰り返し再生

videoタグにloopを追記すると、繰り返し再生します。

preload属性:事前に動画を読み込む

videoタグにpreload="○○○"を追記する形式になります。

preload="auto"

初期値になります。最新のブラウザでは追記しなくても動画はあらかじめ読み込まれます。

preload="metadata"

動画全体ではなく、動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみ事前にダウンロードします。

preload="none"

再生のアクションがない限り、事前のダウンロードはありません。

poster属性:代替画像を表示

videoタグにposter="○○○.png"を追記すると、ブラウザ等のユーザー環境で利用できる動画が無い場合に、代わりに画像を表示します。または、再生する準備が整うまでの間、表示されます。※pngに限らずjpg・gif画像ファイルなら問題ありません。

playsinline属性:インライン再生の対応 (Safari)

videoタグにplaysinlineを追記すると、Safari for iOS 10以降からインライン再生が可能になります。※iOS 11でMediaStreamのビデオトラックの表示にvideoタグを使う場合、iPhoneではplaysinline属性がないと表示できないので、注意が必要です。

自動再生時の注意

autoplayを追記すると、サイトページ読み込みと同時に自動再生しますが、mutedの追記がない場合、自動再生されないブラウザがPC・スマートフォン含め多いようです。これは電車の中など、公共の場で急に音が鳴り出すのを防ぐための処理ということらしいです。

自動再生を前提とする場合はautoplaymutedの両方を追記しておくのが、よさそうです。
※条件分岐もいいかもしれませんが、今後バージョンアップされるブラウザは、このような処理が暗黙の了解となりそうですね。

また、ブラウザによっては、自動再生のスタート時にインターフェースがチラッと表示される場合があります。別に気にならないレベルかと思いますが、私の場合はクライアントから、チラッとみえるのをどうにかしてほしいという要望があったので、読み込み時からインターフェースが非表示になるように、以下の対応をしました。

これだけの場合、インターフェースが再度表示できないので、マウスオーバー・マウスアウト時の処理を追加し、再度、表示・非表示できるようにします。

※自前の環境で検証した限りですが、スマートフォン表示のときは、タッチイベントを使用する必要はなく、タップでインターフェースが再度表示されています。再度非表示にするには、もう1度タップします。

MP4について

MP4とは、動画ファイルや音声ファイルの圧縮形式のひとつです。拡張子は.mp4、.m4a、.m4vなどがあります。読み方は“エムピーフォー”です。混同しがちですが“MPEG-4(エムペグフォー)”は動画コーデックですので、別物になります。動画ファイルや音声ファイルを含む動画全体を管理しているのがMP4というファイルフォーマットで、動画ファイルのみを保存しているのがMPEG-4といえます。

MP4は動画と音声、動画のみ、または音声のみのデータとすることが可能なほか、複数の異なる音声データを同時に含めることで、マルチトラック音声も実現できます。実データ部分ではMPEG-4だけでなく、MPEG-1やMP3といった圧縮フォーマットも格納できるようになっており、セキュリティを高めたMP4ファイルもあります。

インターネット配信で利用されているほか、ゲーム機や携帯電話、動画撮影の可能なデジタルカメラやデジタルビデオカメラ、多くの動画再生ソフトなど動画と音声を扱うサービスや機器で標準的に採用されています。

現在、使用されている主なブラウザはMP4に対応していますので、videoタグで使用する推奨ファイルといえます。

MP4 ブラウザ対応状況

MP4 ブラウザ対応状況
出典【caniuse.com】