動画を埋め込む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再生・停止ボタンや音量調節などができるコントロールパネルを表示
controlslist表示するコントロール選択の補助

“nodownload”, “nofullscreen”, “noremoteplayback” の値が指定可能。
nodownload : ダウンロード項目を非表示
nofullscreen : フルスクリーンモードボタンがグレーアウト
noremoteplayback : リモートプレイバック機能を無効
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をつけたもの】

poster でサムネイル画像を表示

videoタグに特に何も指定しない場合、動画の初めが表示されますが、poster属性に画像ファイルのパスを指定するとその画像をサムネイルとして表示させることができます。

<video controls poster="サムネイル画像ファイルのパス" src="動画ファイルのパス"></video>

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

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

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

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

動画を手動で再生してもらうために「controls」をつけます。
chromeなら黒い画面にコントロールパネルが付いている状態、safariなら再生ボタンのみ表示されている状態かと思います。

このような状態だと再生してもらえないかもしれません。よりクリックしやすいよう動画の内容にあったサムネイルをつけておきましょう。

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

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

動画サイズに注意

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

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

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

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

動画フォーマットの選び方

MP4, AVI, MOV, WebM, FLV, ogvなどさまざまな動画フォーマットがあります。無難なのは対応範囲が広いMP4でしょうか。

mp4, webm, ogv の3つが用意できれば、ほとんどのデバイスに対応できます。

カテゴリー : HTML-CSS

タグ :

TOPへ