HTMLでは、videoタグを使うことによって動画を埋め込み、ページ上で再生することができます。
videoタグには様々な属性があり、それらを正しく組み合わせて使うことで、自動再生やループ再生などをコントロールすることが可能です。
今回は、HTMLでのvideoタグを使った動画の埋め込み方法と、それぞれの属性の使い方などをご紹介したいと思います。
INDEX
Webサイトに動画を埋め込む方法
Webサイトに動画を埋め込む場合、大きく分けて下記の2種類の方法があります。
- 外部の動画配信サービスを使って動画を埋め込む（iframe）
- サーバーにファイルをアップロードしてvideoタグで動画を埋め込む
動画配信サービスには、例えばYouTubeやVimeoなどがあります。Webサイト上でそれらのサービスを使って動画を埋め込んでいるケースはよく見かけますね。単にWebページの中で動画を紹介したい場合は、外部サービスを使って埋め込んだ方が手軽に利用することができます。
一方、自分でサーバーに動画ファイルをアップロードしてvideoタグを使って埋め込む方法もあります。ファイル形式はMP4（.mp4）で用意しておけば基本的に問題ありません。
videoタグを使う場合は、YouTubeなどの動画埋め込みで表示されてしまうサービスのロゴや、固定表示されてしまう要素などを気にする必要がありません。背景動画として埋め込む場合などはvideoタグを使う方法がおすすめです。
ただし、サーバーに動画ファイルをアップロードして読み込みを行うと、サーバーの転送量が増えたり負荷が高くなったりする可能性もあるので、注意が必要です。基本的には、なるべくファイルサイズを抑えることを心がけましょう。
videoタグの使い方
videoタグは、下記のようにHTMLで記述します。
<video src="video.mp4"></video>この状態では、下記のように表示されます。
ブラウザによって動作は異なりますが、動画の最初のフレームが画像のように表示されていたり、画像自体が表示されていないケースもあります。基本的に、videoタグを使用する場合は下記に登場する属性を組み合わせて、表示や動作をカスタマイズする必要があります。
videoタグの属性と役割
videoタグで使える属性は様々ありますが、よく使用する属性には、下記のようなものがあります。
- autoplay：自動再生
- loop：ループ再生
- muted：ミュート
- controls：コントロール表示
- playsinline：インライン再生
- preload：事前読み込み
- poster：サムネイル画像
それぞれ、表示例と合わせて使い方を見ていきましょう。
autoplay：自動再生
autoplay属性を指定すると、ページを開いた時に自動で動画を再生することができます。。
背景に動画を使用する場合などは、ユーザーが能動的に動画の再生開始などを行わないため、autoplay属性を指定しておくと良いでしょう。
なお、iOSのSafariではplaysinline属性を付与していないとautoplay属性を有効にしていても自動再生されないため注意が必要です。
<video src="video.mp4" autoplay playsinline></video>loop：ループ再生
loop属性を指定すると、動画をループ再生することができます。
こちらも背景動画などに使用する場合は指定しておくと良いでしょう。
<video src="video.mp4" autoplay loop playsinline></video>muted：ミュート
muted属性を指定すると、動画再生時にデフォルトでミュートにすることができます。（サンプル動画自体に音声が入っていないため、ここでの表示は上記のものと変わりありません。）
また、Chromeなどのブラウザではmuted属性が指定されていないと、autoplay属性が動作しません。
Webサイトを開いた時に勝手に音声が再生されることは一般的に望ましくないとされているので、ユーザーが明確に音声が再生されることが分からない場合は、muted属性を指定するようにしましょう。
<video src="video.mp4" autoplay loop muted playsinline></video>controls：コントロール表示
controls属性を指定すると、動画の再生位置や音量などコントロールパーツを表示することができます。
autoplay属性が指定されていない場合は、controls属性を指定しておくか、JavaScriptなどでユーザーが動画を再生できるようにしておく必要があります。
それ以外でも、再生位置を変更したり、再生と停止を切り替えたり、音量をコントロールできるようにしたい場合はこの属性を指定しておくといいでしょう。
<video src="video.mp4" controls></video>playsinline：インライン再生
playsinline属性を指定すると、スマホで動画を再生した場合に全画面表示にさせないことができます。
通常、iOSのSafariなどで動画を再生すると自動で全画面表示に切り替わってしまいますが、それを防ぎたい場合はplaysinline属性を指定するようにしましょう。
<video src="video.mp4" controls playsinline></video>preload：事前読み込み
preload属性を指定すると、動画ファイルを事前に読み込みするかどうかを設定することができます。
ファイルを予め読み込むことによって、スムーズに動画の再生をスタートすることができますが、その分余計な転送量や通信量が増えてしまうというデメリットがあります。
| 値 | 詳細 |
|---|---|
| none | 事前にファイルを読み込まない |
| metadata | 動画のメタデータのみを事前に読み込み |
| auto | ファイル全体を事前に読み込み |
また、autoplay属性が付与されている場合はpreloadプロパティの設定によらず、ページを開いたタイミングで動画ファイルの読み込みが開始されます。
preload=”none”
<video src="video.mp4" controls preload="none"></video>preload=”metadata”
<video src="video.mp4" controls preload="metadata"></video>preload=”auto”
<video src="video.mp4" controls preload="auto"></video>poster：サムネイル画像
poster属性を指定すると、動画ファイル読み込み前や、動画ファイルが読み込みできなかった場合に表示する画像等を指定することができます。
動画ファイルの読み込みができなかった場合もそうですが、OSやブラウザによってはサムネイル画像のような形で表示される画像となるので、自動再生にしない場合は基本的にposter属性でサムネイルとなる画像を指定しておくのがおすすめです。
また、preload="none"を指定した場合には、再生前のサムネイル画像のような形で画像を表示することができます。
<video src="video.mp4" controls preload="none" poster="video-poster.jpg"></video>動画の表示をカスタマイズしたい場合
videoタグを使用した場合、OSやブラウザによって動作や表示が異なる場合があります。それらの表示を統一したり、自分でカスタマイズしたいという場合は、Video.jsのようなJavaScriptのライブラリなどを活用するのがおすすめです。
videoタグを使う場合の注意点
ファイルサイズはなるべく小さくする
動画は、テキストや画像と比べてファイルサイズが大きくなってしまいます。
ファイルサイズが大きくなると、サーバーの転送量が増えたり、ユーザーの通信量が増えてしまうため、なるべくファイルサイズを小さくしておく必要があります。
ファイルサイズを抑えるためには、動画の長さを短くすることや、動画の画質を抑えることなどが大切です。
長い動画は外部サービスの利用を検討する
ファイルサイズが大きな動画をWebサイトに埋め込む場合は、外部サービスの利用などを検討しましょう。
ストリーミング再生や動画の画質など、埋め込みコードを貼り付けるだけで簡単に動画プレイヤーを表示することができます。
また、YouTubeの埋め込みもパラメータを付与することでカスタマイズすることができるので、ある程度ページに合わせた形で表示することができます。
