videoタグを使って動画を埋め込む
videoタグ
このタグはHTMLに動画を埋め込むときに使うタグで、いろいろな属性を使って設定をしていきますが、
ただ張り付けるだけであればsrc属性に動画までのパスを記述してあげれば埋め込みはできます
※ 閉じタグが必要なので忘れないように
1 |
<video src="video.mp4"></video> |
videoタグが対応していないブラウザのためのメッセージを表示したい場合はvideoタグの中にメッセージを要素として入れることができる
1 |
<video src="video.mp4">動画に対応しているブラウザで表示してください</video> |
poster属性
動画が表示できなかったときに表示する画像の設定ができます
値には画像までのパスを記述します
preload属性
動画をあらかじめ読み込む設定を変更するための属性
値はauto(初期値)
metadata→メタデータだけ読み込む
none→読み込まない
よっぽど動画が重くて読み込みに時間かかるようならばなくてもよいでしょう
controls属性
インターフェースを表示するための属性
設定する値はないので属性名だけで乱暴に使えます
controls属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、 動画を利用しやすくするインターフェースを、ブラウザが自動で表示することになっています。
autoplay属性
動画を自動再生するときに使う属性
設定する値はないので属性名だけで乱暴に使えます
autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。
※ スマートフォンで自動再生させるにはほかの属性と組み合わせる必要がある(これだけだと静止画)
muted属性
音声消去状態を指定するときに使う属性
設定する値はないので属性名だけで乱暴に使えます
ミュートの指定は音量とは無関係です。ユーザーの音量設定にかかわらず音が消去された状態になります。
※ スマートフォンで自動再生させるにはこの属性も付ける
playsinline属性
映像を「インライン」で再生する(要素の再生エリア内で再生する)かを指定します
この属性がないことが、映像を常にフルスクリーンで再生するという意味ではないことに注意してください。
設定する値はないので属性名だけで乱暴に使えます
※ スマートフォンで自動再生させるにはこの属性も付ける iOS10以降ならこれで自動再生される
loop属性
動画の最後まで行ったら先頭に戻り再生を繰り返すときに指定する属性
設定する値はないので属性名だけで乱暴に使えます
まとめ
紹介した属性は一部ですがこれだけである程度の自由が効くと思います
スマートフォンで自動再生もしたい場合は三つの属性は必ず入れましょう
古いスマートフォンでのテストができていないので確実ではありませんが大体これで自動再生されます
ほかの方法だと、jQueryから操作したりもできますが重すぎて使い物になりませんのでこの方法がよいでしょう
1 |
<video src="video.mp4" loop muted autoplay playsinline></video> |