HTMLのvideoタグを使う事で、webサイト上で動画を再生する事ができます。
videoタグにはいろいろな属性があり、それらを正しく使う事で自動再生など目的にあった動画のコントロールが可能になります。
今回は、videoタグを使ったwebサイトへの動画の埋め込み方法について解説していきます。
videoタグについて
videoタグは、webサイトに動画を埋め込むためのHTMLタグとなります。
動画の埋め込みといえば、YouTubeやvimeoなどの動画をiframeやjsを使用して埋め込む方法や、今回解説するvideoタグを使用した埋め込み方法などがあります。
YouTube等の外部配信サービスの動画を埋め込む場合、簡単に埋め込みが出来る反面、基本的にはロゴが入ったりしてしまいますが、videoタグを使用して埋め込む場合はサーバーに動画をアップロードするだけで、それらを気にする必要はありません。
ただし、容量が大きいとサーバーに負荷がかかったり、ユーザー側での読み込みに時間がかかったりしますので注意が必要です。なるべく容量を小さく(5MB程度まで)する事を心がけましょう。
videoタグの基本的な使い方
videoタグの基本的な使い方は以下となります。
<video src="sample_movie.mp4"></video>video {
width: 100%;
height: auto;
display: block;
}上記のタグの状態では下記のように表示されます。
ブラウザにもよりますが、動画の最初で止まって画像のように表示されている場合もあれば、何も表示されていない場合もあります。
基本的には、次項で解説する属性を使用して表示や動作を指定してあげる必要があります。
videoタグに指定できる属性一覧
videoタグに指定できる属性は以下のものがあります。
他にもいくつか指定できる属性はありますが、実際によく使用するものだけ掲載しています。
autoplay
autoplay属性を指定すると、ページ読み込み時に自動で動画を再生することができます。
一部のブラウザ(Chromeなど)ではmuted属性も記述しないと自動再生されない場合もありますのでご注意ください。
<video src="sample_movie.mp4" autoplay muted></video>loop
loop属性を指定すると、動画の再生が終わると最初に戻り繰り返し再生します。
<video src="sample_movie.mp4" loop></video>controls
controls属性を指定すると、再生・停止ボタンや音量調節などの動画のコントロールを表示できます。
ブラウザ毎に表示されるコントールは違います。
<video src="sample_movie.mp4" controls></video>muted
muted属性を指定すると、動画再生時にミュート状態にする事が出来ます。
ユーザーがミュートを解除するにはコントールを表示しておく必要があります。
<video src="sample_movie.mp4" muted></video>playsinline
playsinline属性を指定すると、動画再生時に全画面モードにせず動画ファイルが埋め込まれた領域内での再生(インライン再生)になります。
スマートフォン用の一部ブラウザなどでは、playsinline属性を指定しないと、全画面モードにて再生されてしまいます。
<video src="sample_movie.mp4" playsinline></video>preload
preload属性は、動画ファイルを事前に読み込みするかどうかを指定できます。preloa属性には以下の3つの値を指定できます。
- none：事前に読み込みをしない
- metadata：動画のファイルサイズなどのメタデータのみ事前に読み込みをする
- auto：動画ファイル全体を事前に読み込みをする(初期値)
動画ファイルを事前に読み込みことでスムーズに再生できますが、再生をしない場合でも読み込むので余分な通信が増える事にもなります。
<video src="sample_movie.mp4" preload="auto"></video>auto属性が指定されている場合は、preload属性は無効となります。
poster
poster属性は、動画ファイルの読み込み前や、動画ファイルが読み込み出来なかった場合に表示する画像を指定できます。指定する場合は動画の幅・高さに合わせた画像を指定するようにしてください。
<video src="sample_movie.mp4" poster="thumbnail.jpg"></video>自動再生について
videoタグを使用した動画の自動再生は、autoplay属性の項目で解説したように一部ブラウザではmuted属性も指定しないと自動再生されません。
また、iOSなどのスマートフォンで自動再生するには、playsinline属性も必要となります。
以下のように指定するとほぼ全てのブラウザで自動再生が有効となります。
<video src="sample_movie.mp4" autoplay muted playsinline></video>さいごに
いかがでしたでしょうか。
今回は、videoタグで動画を埋め込む方法と自動再生について解説しました。
videoタグを使った動画の埋め込みは年々増加しているかと思いますので、しっかりと使い方を覚えて自在に使用できるようにしてください。
