HTMLで動画ファイルを扱えるvideoタグの利用方法

HTML5から新たに追加されたvideoタグを使うと、ページにHTMLで動画を埋め込むことがとても簡単に行えます。リピート再生やコントローラー表示の有無など制御できるポロパティも備えた、videoタグの使い方を今回は紹介します。

videoタグの記述方法

videoタグの記述方法には大きく2種類あります。シンプルな記述例としては、videoタグとsrcによって動画ファイルを指定する以下の方法です。

<video src="sample.mp4"></video>

また、以下のように複数のフォーマット形式の動画を指定する方法があり、再生環境の違いに対応させることができます。

  <video>
    <source src="sample.mp4">
    <source src="sample.m4v">
    <source src="sample.webm">
  </video>

ただし、現在はiPhoneやAndroidを含めたほとんどの最新ブラウザにmp4形式の動画が対応しているので、mp4形式の動画を指定することで多くの環境に対応可能です。

videoタグのプロパティ

上記の記述にだけでは動画ファイルは再生されません。プロパティで再生方法やコントローラー表示などの指定を行うことで、videoタグは効果を発揮します。
利用可能なプロパティは以下です。

controls

controlsを記述することで、動画再生を制御するコントローラーが表示されるようになります。

<video src="sample.mp4" controls></video>

poster

オリジナルの静止画を指定することで、動画再生前や動画が再生されなかった場合のサムネイルを指定することができます。

<video src="sample.mp4" poster="sample.jpg">

autoplay

記述することで動画が自動再生されるようになります。

<video src="sample.mp4" autoplay></video>

loop

記述することで動画がループ再生されるようになります。

<video src="sample.mp4" loop></video>

playsinline

iPhoneなどのiOSで、動画を別ウインドウではなく同一ページ上で再生させることができます。ただし、iOS10以降からの対応です。

<video src="sample.mp4" playsinline></video>

videoタグの動画の再生範囲を指定する方法

動画ファイル名の後に#t=5,10などと記述することで、再生範囲を5秒目〜10秒目までといった形式で指定することができます。

  <video src="sample.mp4#t=5,10"></video>

まとめ

動きや情報量の多さで記憶に残りやすいとして、動画はwebコンテンツとしての重要度を増しています。効果的に導入してサイトの充実に貢献しましょう。