HTML要素 ・ メディア
<video>
動画を埋め込む
ページに動画を埋め込んで再生する要素です。controls 属性を付けると、再生ボタンなどの操作パネルが表示されます。
01
サンプルコード
HTML
1<video controls width="320" height="180" poster="poster.jpg">
2 <source src="movie.mp4" type="video/mp4">
3 お使いのブラウザは動画の再生に対応していません。
4</video>
CSS
1video {
2 max-width: 100%;
3 height: auto;
4 background: #000;
5}
02
実行結果
ブラウザでの表示サンプルの動画ファイルはないため、再生前の画像と操作パネルだけが表示されます
03
解説
video は、動画ファイルをページ上で再生するための要素です。controls を付けると、ブラウザ標準の再生・音量・全画面などの操作パネルが表示されます。
source を複数書くと、ブラウザが再生できる形式を上から順に選びます。現在は MP4（H.264）がほぼすべてのブラウザで再生できます。
poster には再生前に表示する画像を指定します。タグの間に書いた文章は、video に対応していないブラウザでだけ表示されます。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
controls | 操作パネルを表示する |
poster | 再生前に表示する画像 |
autoplay | 自動再生（多くのブラウザでは muted が必要） |
muted | 音を消した状態にする |
loop | 繰り返し再生する |
playsinline | iPhoneで全画面にせずページ内で再生する |
背景動画として流す
音なし・自動再生・繰り返しの組み合わせです。
HTML
1<video src="bg.mp4" autoplay muted loop playsinline></video>
注意点
- 01音の出る動画を自動再生しないでください。多くのブラウザでは、muted がないと自動再生されません。
- 02話し声の入った動画には、track 要素で字幕を付けると親切です。