動画を埋め込むHTMLのvideoタグの使い方

videoタグは動画を表示することができるHTMLタグです。設定方法を覚えておくと動画の使い方の幅が広がります。そこでこの記事ではvideoタグの使い方メモしていきます。

基本的なvideoタグの書き方

videoタグにsrc属性で動画へのファイルパスを設定、もしくはsouceタグを使用してファイルを指定します。

<video src="動画ファイルのパス"></video>
<video><source src="動画ファイルのパス/example.mp4"></video>

この書き方を基本として属性を追加して動画表示の設定をしていきます。

videoタグ内に書かれたテキストは、videoタグが未対応のブラウザや設定した動画ファイルの拡張子に対応していない時に表示されます。

<video src="動画ファイルのパス">テキスト</video>

videoタグ内にpタグなどを使用することも可能です。

<video src="動画ファイルのパス"><p>このブラウザでは再生できません。他のブラウザもお試しください。</p></video>

【対応ブラウザ参考】Video element | Can I use…

複数の動画ファイルを設定

複数のファイルを設定する場合は、sourceタグをvideoタグの中に追加して設定します。

<video>
  <source src="動画ファイルのパス/example.mp4">
  <source src="動画ファイルのパス/example.webm">
  <source src="動画ファイルのパス/example.mov">
</video>

上から順番に読み込まれ対応している拡張子のものが表示されます。

videoタグの設定

videoタグに設定できる属性はけっこうあります。これらを設定して思い通りの表示にしていきます。

autoplay	動画を自動再生（一部ブラウザではmutedも併せて設定しないと適用されない）
muted	デフォルトで音を出さない（コントロールパネルがあれば表示時に音量設定は可能）
controls	再生・停止ボタンや音量調節などができるコントロールパネルを表示
loop	自動で繰り返し再生
poster	再生前の状態の時に表示する画像（サムネイル）（対応していない拡張子の動画の場合もposterで設定した画像が表示される）
playsinline	全画面表示をしないスマホの時にページ内で再生させたい場合などに利用
preload	動画の読み込み設定 ‘auto’, ‘none’, ‘metadata’ の値が指定可能。 auto : 事前に動画ファイルを読み込む（初期値） none : 事前の動画ファイルの読み込みをしない metadata : ファイルのメタデータのみ取得「autoplay」が設定されている場合は無視される
width	表示させる時の横幅（px）
height	表示させる時の高さ（px）
autoPictureInPicture	小画面再生
disablePictureInPicture	ピクチャーインピクチャーを無効

【参照】＜video＞: 動画埋め込み要素 – HTML: ハイパーテキストマークアップ言語 | MDN

再生させるためには autoplay もしくは controls が必須

動画を再生させるためには autoplay もしくは controls どちらかはつけておく必要があります。どちらもつけていない場合は再生されず画像のように表示されます。autoplay をつける場合は muted もお忘れなく。

【属性値を何もつけていない状態】

【autoplayとmutedをつけたもの】

【controlsをつけたもの】

preload で事前に動画の読み込みをしないようにする

preload は事前に動画を読み込むかどうか、動画のメタデータのみ読み込むかを設定することができます。

ページの表示速度を改善するために、初めは動画データを読み込ませず、動画のある場所に来たら読み込んで再生させるようにするといった使い方ができます。

以下には preload="none" を指定した動画を設定しているのですが、表示されていないと思います。（真っ白な状態）

動画を手動で再生してもらうために「controls」をつけます。（黒い画面にコントロールパネルが付いている状態）

真っ黒な画面だと再生してもらえないかもしれません。動画の内容にあったサムネイルをつけておきましょう。

またautoplay属性を設定している場合はpreload属性が効きません（自動でautoになる）。
以下で表示される動画には autoplay muted preload="none" を指定していますが、 preload="none" は無視されて自動再生されています。

Webサイトに動画を設定する時に気をつけたいこと

動画サイズに注意

動画は画像と比べても容量が大きくなりやすいファイルです。
画質がよく長時間の動画は要注意。あまりに大きいファイルをWebページに埋め込むと表示速度の低下につながります。最悪の場合サーバーダウンになってページが見れなくなってしまう可能性もあります。

埋め込む前にサイズを確認して、大きい場合は圧縮したり拡張子を変更する、動画の長さや画質を変更するなどしてサイズを軽減するようにしましょう。

あまりに動画ファイルが大きいなら Youtube や vimeo などの動画配信サービスを利用して埋め込むのも一つの手です。

1〜5MBくらいの動画ファイルにするのが良いと言われていることが多いですが、必ずしもこのサイズにおさめなければならないわけではありません。
以前案件で30MBくらいの動画埋め込んだこともあるので、まずは埋め込んでみて問題なく見れるかどうかチェックするのもありだと思います。もちろん少ないサイズにできるのであればそれが一番です。

使用した動画圧縮サービスはこちら
オンラインで動画ファイルを圧縮します – HDファイルのサイズを小さくします – VEED

動画の軽量化についてはこちらの記事が参考になります。
【動画圧縮】Webサイトに埋め込む動画を軽量化する方法【おすすめソフト紹介】| デザイントランスメディア