videoタグは動画を表示させるためのHTMLタグです。いくつもの属性を設定でき、どのように動画を表示させるかを指定できます。この設定方法を覚えておくと動画の埋め込みを柔軟に行うことができるのでご紹介していきます。
基本的なvideoタグの書き方
videoタグにsrc属性で動画へのファイルパスを設定します。
<video src="動画ファイルのパス"></video>もしくはsouceタグを使用してファイルを指定します。
<video><source src="動画ファイルのパス/example.mp4"></video>またvideoタグ内にテキストを入れることもできます。videoタグが未対応のブラウザや設定した動画ファイルの拡張子に対応していない時に表示されます。pタグなどを使用することも可能です。
<video src="動画ファイルのパス">テキスト</video>
<video src="動画ファイルのパス"><p>このブラウザでは再生できません。他のブラウザもお試しください。</p></video>複数の動画ファイルを設定
複数のファイルを設定する場合は、sourceタグをvideoタグの中に追加して設定します。type属性も指定します。
【参考】Codecs in common media types – Media | MDN
<video>
<source src="動画ファイルのパス/example.mp4" type="video/mp4">
<source src="動画ファイルのパス/example.webm" type="video/webm"">
<source src="動画ファイルのパス/example.ogg" type="video/ogg">
</video>上から順番に読み込まれ、対応している拡張子のものが表示されます。
videoタグの属性
videoタグに設定できる属性がいくつもあり、これらを利用して動画表示をコントロールしていきます。
| src | 埋め込む動画URLを指定。<source> タグをし用意する場合は省略可。 |
| autoplay | データが読み込まれたら動画を自動再生。 |
| 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をつけたもの】
スマホでインライン再生（ページ内で再生）
スマホの場合、動画を再生すると自動的にフルスクリーン表示の画面へと切り替わります。
playsinline を指定することで、ページ上でそのまま動画を再生できるようになります。
autoplayを設定しているのにスマホで自動再生されない
デフォルトで「動画を再生すると自動的にフルスクリーン表示の画面へと切り替わる」ということは、ページ上では再生されないようになっているということです。
そのため、 autoplayを設定する場合は playsinline を併せて指定しておきましょう。
先述した動画は playsinline を指定していないため、スマホで見ると、おそらく動画自体が表示されていなかったり、再生されていないと思います。
poster でサムネイル画像を表示
videoタグに特に何も指定しない場合、動画の初めの画面が表示されます。
YouTubeのサムネイルのように、別の画像を表示させたい場合にposter属性を設定します。サムネイルとして表示させたい画像ファイルのパスを指定してください。
<video controls poster="サムネイル画像ファイルのパス" src="動画ファイルのパス"></video>preload で事前に動画を読み込むかを設定
preload は事前に動画を読み込むかどうか、動画のメタデータのみ読み込むかを設定することができます。ページの表示速度を改善するために、初めは動画データを読み込ませず、動画のある場所に来たら読み込んで再生させるようにするといった使い方ができます。
auto : 事前に動画ファイルを読み込む（初期値）metadata : ファイルのメタデータ（再生時間やサイズといった情報）のみ取得 none : 事前に動画ファイルを読み込まない
以下には src属性と preload="none" を指定した動画を設定しています。この設定をした場合、再生ボタンを押したときに動画が読み込まれます。
そのため preload="none" 意外に指定している属性がない場合、以下のように空白が少しあるだけで、表示されていないと思います。
このままだと動画がある意味がないので、再生できるよう「controls」をつけます。
chromeなら黒い画面にコントロールパネルが付いている状態、safariなら再生ボタンのみ表示されるのがデフォルトの状態です。
このような状態だと再生してもらえないかもしれません。よりクリックしやすいよう動画の内容にあったサムネイルをつけておきましょう。
autoplay属性を設定している場合はpreload属性が効きません（自動でautoになる）。
以下で表示される動画には autoplay muted preload="none" を指定していますが、無視されて自動再生されています。
事前読み込みせず、動画が表示されたら自動再生させる
このページでは詳細は割愛しますが、JavaScriptを使って制御させることができます。実際のデモを作ったので以下ページにてご確認ください。
ダウンロード機能を無効にする
controls属性を使用していると、Chromeではダウンロードメニューが表示されます。
controlsList="nodownload" を設定することで、この項目を削除することができます。
完全にダウンロードをさせないようにすることはHTMLやJSなどだけでは難しいですが、「簡単にダウンロードさせないようにする」という方法はいくつかあります。
参考：設置したvideoタグの動画のダウンロードを妨げる方法 #JavaScript – Qiita
Webサイトに動画を埋め込む時に気をつけたいこと
動画サイズに注意
動画は画像と比べても容量が大きくなりやすいファイルです。
画質がよく長時間の動画は要注意。あまりに大きいファイルをWebページに埋め込むと表示速度の低下につながります。最悪の場合サーバーダウンになってページが見れなくなってしまう可能性もあります。
埋め込む前にサイズを確認して、大きい場合は圧縮したり拡張子を変更する、動画の長さや画質を変更するなどしてサイズを軽減するようにしましょう。
あまりに動画ファイルが大きいなら Youtube や vimeo などの動画配信サービスを利用して埋め込むのも一つの手です。
1〜5MBくらいの動画ファイルにするのが良いと言われていることが多いですが、必ずしもこのサイズにおさめなければならないわけではありません。
以前案件で30MBくらいの動画埋め込んだこともあるので、まずは埋め込んでみて問題なく見れるかどうかチェックするのもありだと思います。もちろん少ないサイズにできるのであればそれが一番です。
使用した動画圧縮サービスはこちら
オンラインで動画ファイルを圧縮します – HDファイルのサイズを小さくします – VEED
動画の軽量化についてはこちらの記事が参考になります。
【動画圧縮】Webサイトに埋め込む動画を軽量化する方法【おすすめソフト紹介】| デザイントランスメディア
動画フォーマットの選び方
MP4, AVI, MOV, WebM, FLV, Oggなどさまざまな動画フォーマットがあります。videoタグは複数のフォーマットに対応していますが、基本的には多くのブラウザで対応しているMP4ファイルを使用すれば大丈夫です。
【参考】ウェブ動画コーデックガイド – ウェブメディア技術 | MDN
ファイル形式を変換するWebサービスもたくさんあるので、活用していきましょう。
【このページに使用しているお借りした動画】フリー動画素材1～10 海や7月の稲など – カフィネット
