videoとは
- ここで説明する video とは次の語句からなる HTML の要素です。
- video
- 読み: ビデオ
意味: 映画、映像、動画
video 要素の概要
この要素は、動画ファイルをインポートして埋め込みます。
これは、HTML5 から新たに追加された要素です。
video 要素は、HTML 文書内に動画ファイルを埋め込み、ページのコンテンツとして再生することができます。
この要素には、開始タグと終了タグが必要です。
<video> </video>
なお、このページでは source 要素の使い方にも触れています。
サンプルコードと実行結果
ここでは、属性の使い方を中心にサンプルを幾つか紹介します。
サンプルコード: HTML (controls 属性: コントロールパネルを表示する)
<body>
<video src="sample.mp4" controls></video>
</body>
controls 属性を記述することで再生ボタンや再生位置（シーク）、ボリュームなどのコントロールパネルを表示することができます。
サンプルコード: HTML (autoplay 属性: 自動再生させる)
<body>
<video src="sample.mp4" autoplay muted></video>
</body>
autoplay で自動再生させるには、muted 属性を設定しないと、画像のみ映し出される結果となり、再生はされません。
サンプルコード: HTML (loop 属性 : 繰り返し再生させる)
<body>
<video src="sample.mp4" loop autoplay muted></video>
</body>
loop 属性には、合わせて autoplay と muted 属性を設定しないと、画像のみ映し出される結果となり、再生はされません。
サンプルコード: HTML (loop 属性 : 繰り返し再生させる)
<body>
<video src="sample.mp4" loop autoplay muted></video>
</body>
loop 属性には、合わせて autoplay と muted 属性を設定しないと、画像のみ映し出される結果となり、再生はされません。
サンプルコード: HTML (playsinline 属性 : インライン再生を可能にする)
<body>
<video src="sample.mp4" playsinline controls></video>
</body>
サンプルコード: HTML (poster 属性：開始画面の画像を設定する)
<body>
<video src="sample.mp4" poster="sample.jpg" controls></video>
</body>
動画が再生されない場合や動画が読み込まれない場合に備えての画像を設定します。
サンプルコード: HTML (source 要素 : ブラウザの動画形式に対応させる)
<body>
<video autoplay loop muted controls poster="sample.jpg">
<source src="sample.mp4" type="video/mp4" />
<source src="sample.ogv" type="video/ogg" />
<source src="sample.webm" type="video/webm" />
<img src="sample.jpg" />
</video>
</body>
source 要素を子要素に含めることで、video 要素に選択可能なファイルを複数設定することができます。
複数のファイルを用意することにより、閲覧者の環境に合わせて適切なファイルが選択されます。 用意する動画形式は、 mp4、ogv、webm などです。
また、コードの 06 行目のように img 要素を含めた場合、video 要素に対応していないブラウザに対して設定した画像を代替として表示するようにできます。