1分でわかるvideoタグでWebサイトに簡単に動画を表示する方法

videoタグとは

動画を埋め込むためのHTMLタグ。これを使用することで動画をWebサイト内に簡単に表示させることができる。

基本的な使い方は画像のimgタグを似ており、まずwidthとheightでvideoタグ(動画)の高さと幅を指定する。

<video width="640" height="360">
</video>

poster="rabbit.jpg"のように指定すると動画再生前のサムネイルを表示できるため、動画のサムネイル画像もあらかじめ用意しておく。

<video width="640" height="360" poster="rabbit.jpg">
</video>

poster属性でサムネイル画像を表示しないと再生するまで何も表示されない。

さらにpreload="none"を付けて動画を再生ボタンを押すまで動画データを読み込まないようにする。

<video width="640" height="360" poster="rabbit.jpg" preload="none">
</video>

再生ボタンはcontrols属性が付いていないと表示されないため、こちらも付けておく。

<video width="640" height="360" poster="rabbit.jpg" preload="none" controls>
</video>

動画ファイルはほとんどのブラウザで対応しているmp4ファイルを用意する。

再生する動画ファイルはvideoタグ内にsourceタグを入れてsrc="sample.mp4"のように指定して読み込む。

<video width="640" height="360" preload="none" controls>
  <source src="sample.mp4">
</video>

万が一対応していないブラウザで閲覧するとvideoタグの部分は何も表示されなくなってしまうため、videoタグ内にpタグを入れて、「お使いのブラウザではvideoタグの動画を再生できません。」という文言を入れておく。

pタグの文言はvideoタグで動画が読み込まれないときのみに表示される。

<video width="640" height="360" preload="none" controls>
  <source src="sample.mp4">
  <p>お使いのブラウザではvideoタグの動画を再生できません。</p>
</video>

以上の手順でWebサイトに簡単に動画を表示することができる。

width="640"のような固定値だとレスポンシブウェブデザインなどでスマートフォンで表示した際に動画が画面外にはみ出してしまう。

そのためスマートフォンのときはメディアクエリなどでwidth: 100%, height: autoを上書きして指定したほうが良い。

@media (max-width: 639px) {
  video {
    width: 100%;
    height: auto;
  }
}

再生ボタンの位置はブラウザによって左下または画面中央になる。

例えばMac Chromeは左下に再生ボタンが表示されるがSafariだと画面中央なので、再生前の動画のサムネイルが再生ボタンと重なっても問題ないか事前に確認したほうが良い。

Mac Safariの再生ボタン位置

Mac Chromeの再生ボタン位置