videoタグとは、HTML5から新たに追加された要素で動画を再生する時に使用するタグです。
このvideoタグについては色々と試行錯誤をしましたので、備忘録としてこの記事を書きます。
今回の記事では下記のデバイス・ブラウザで検証しております。
パソコン
- win：Chrome 62.0.3202.75
- win：edge 41.16299.15.0
- win：IE11
- mac：Safari 10.1.2
スマートフォン
- iOS 10.3.2：Safari
- Android 4.4.2：Chrome 61、標準ブラウザ
※2017年11月時点 対応ブラウザ状況確認 → http://caniuse.com/#search=video
videoタグの書き方
下記が一番簡単な書き方です。これに属性を加えることで、ループ再生やオート再生などに対応出来ます。
<video src="movie.mp4"></video>
ユーザーの閲覧するブラウザによっては、指定した動画ファイルが再生されない場合も考えられるため、<source>タグを使用して複数の動画形式を指定することも可能です。
下記の場合mp4が最初に再生されますが、mp4に対応していないブラウザではwebmが再生されます。
下記の場合mp4が最初に再生されますが、mp4に対応していないブラウザではwebmが再生されます。
<video> <source src="movie.mp4" /> <source src="movie.webm" /> </video>
※2017年11月の時点で主要ブラウザはほぼmp4に対応しているので、mp4だけでも問題ないと思います。
Videoタグの属性
Demoページを用意しておりますので、こちら（別窓）をご確認ください。
※デモページを携帯電話回線で閲覧する場合、Wi-Fi環境での閲覧を推奨します。
「controls」... 操作パネルの表示
<video src="movie.mp4" controls></video>
「muted」... 無音で再生
<video src="movie.mp4" muted></video>
「autoplay」... 自動再生
<video src="movie.mp4" autoplay></video>
「loop」... 繰り返し再生
<video src="movie.mp4" loop></video>
「preload」... 再生するファイルを事前に読み込む（autoplay属性の指定がある場合、この属性の指定は無視される）
- none → 動画が再生されるまで何もダウンロードしない
- metadata → メタデータ（動画のサイズ、トラックリスト、再生時間 等）のみダウンロードする
- auto → 動画データ全体をダウンロードする
<video src="movie.mp4" preload="auto"></video>
「poster」... 動画が表示できない場合や、再生する準備が整うまでの間に表示される画像を指定
<video src="movie.mp4" poster="image.png"></video>
<video src="movie.mp4" playsinline muted></video>
再生範囲を指定する
videoタグ（及びaudioタグ）では、下記の書き方をすることで再生範囲を指定することが出来ます。
<video src="movie.mp4#t=[starttime][,endtime]"></video>
※Edge・IEは、今のところ「#t=」に未対応
【使用例】
- 「movie.mp4#t=5,10」5秒時点から10秒時点の範囲を再生
- 「movie.mp4#t=,8」始点から8秒時点の範囲を再生
- 「movie.mp4#t=,01:30:00」始点から1時間30分の範囲を再生
- 「movie.mp4#t=5」5秒時点から最後まで再生
JavaScriptで操作する
videoタグの属性で指定した内容を、JavaScriptで操作することが出来ます。
また、EdgeとIEは「#t=」での再生範囲の指定が出来ませんが、代替案としてJavaScriptのcurrentTimeで操作することが出来ます。
HTML
<video src="movie.mp4" id="video"></video>
JavaScript
// idが「video」の要素を取得
var video = document.getElementById('video');
// 自動再生する
video.autoplay = true;
// 繰り返し再生する
video.loop = true;
// 無音で再生する
video.muted = true;
// 再生位置を指定する
video.currentTime = 5;
［参考サイト］JavaScriptでvideoを操作する
各ブラウザでの再生状況
■パソコン
| 再生 | 自動再生 | ループ再生 | |
|---|---|---|---|
| Chrome | ◯ | ◯ | ◯ |
| Edge | ◯ | ◯ | ◯ |
| IE11 | ◯ | ◯ | ◯ |
| Safari | ◯ | ◯ | ◯ |
■スマートフォン
| 再生 | インライン再生 | 自動再生 | ループ再生 | |
|---|---|---|---|---|
| iPhone Safari iOS9以下 |
◯ | ✕ | ✕ | ✕ |
| iPhone Safari iOS10以上 |
◯ | 無音なら◯ | 無音なら◯ | ◯ |
| Android Chrome 52以下 |
◯ | ✕ | ✕ | ✕ |
| Android Chrome 53以上 |
◯ | 無音なら◯ | 無音なら◯ | ◯ |
| Android 標準ブラウザ |
◯ | ◯ | ✕ | ✕ |
スマホでの再生について
スマホで動画を再生する際は通信容量をたくさん消費します。ユーザーによっては、サイトを閲覧した際に自動で動画が再生されてしまうと余計な通信容量を消費してしまい通信制限にかかってしまった！なんて最悪なケースになることも...。
なので、どうしてもスマホで動画を使用したサイトを制作したい場合は、出来るだけ動画の容量を下げましょう。1MB以下を目標に...！
なので、どうしてもスマホで動画を使用したサイトを制作したい場合は、出来るだけ動画の容量を下げましょう。1MB以下を目標に...！
［参考サイト］
Androidの落とし穴
Androidでのvideo再生は、Basic認証をかけていると動画が再生されません。
Basic認証下でも再生させるには、.htaccessにて解決できるようです。
Basic認証下でも再生させるには、.htaccessにて解決できるようです。
最後に
素敵な動画サイトをよく見かけますが、実際に実装する際は難しい面も多々あって大変でした。
まとめた内容で間違いや現在はこうなってますよ！という部分がございましたらご指摘いただきたいです。
これは続けてやっていかないと忘れてしまいそうなので、動画を使用したサイト制作のご要望お待ちしております！
