MP4がほとんどのブラウザ対応しているためvideo要素は大活躍中。
ただ、スマホ端末によっては自動再生できないので自分用メモ。
のちJSで対応したら追加するかも。
video要素について
<video src="movie.mp4"></video>
これだと、動画ファイルを読み込んだだけなので再生もされないし、コントロールパネルもない。
video属性一覧
controls コントロールパネルを表示
<video src="movie.mp4" controls></video>
再生ボタンやボリューム調整ができるコントロールパネルを表示される。
autoplay 自動再生
<video src="movie.mp4" autoplay muted></video>
chromeやsafariではmuted属性で音をミュートにしないと動きません。
loop 繰り返し再生
<video src="movie.mp4" loop autoplay muted></video>
poster 開始画面の画像設定
<video src="movie.mp4" poster="thumb.jpg" controls></video>
動画再生する前に静止画を表示することができる。
playinline インライン再生
<video src="movie.mp4" autoplay muted playsinline></video>
スマホのsafariなどで動画を再生しようとすると、デフォルトだと全画面表示になってしまうため、その動画を貼ってある範囲のまま再生させることができる。必ず、autoplay muted playinlineの３つが揃ってないとインライン再生ができない。3つはセット
preload 動画読み込み設定
<video src="movie.mp4" preload="none"></video>
サイトを読み込むときに動画ファイルをダウンロードするか指定できる。
| 説明 | |
|---|---|
| auto | 初期値。動画ファイル全体をダウンロードする |
| none | 事前のファイルダウンロード禁止にする （動画再生されたらダウンロード） |
| metadata | 長さやファイルサイズなどメタ情報だけをダウンロード |
旧ブラウザで対応していないケースは、source要素を使う。
<video src="movie.mp4" playsinline muted autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
※【エラーメッセージ】現在の環境は動画再生に対応してないよ。
</video>
スマホでのインライン再生・自動再生・ループ再生
PCは大丈夫。問題はスマホ。
クライアントから自動再生にしてほしいという要望はわりとありがちだが、
端末によってできないものもあるので注意。
iphone safari IOS9以下、Anfroid chrome 52以下だと使えない。
ただ、そのバージョン以上だとインライン再生と自動再生はmutedにしておけば使える。
（Android 標準ブラウザではインライン再生ができる。自動再生とループ再生が使えない。）