ホームページの背景として動画を埋め込む際に行うことや気を付けること

Tue, 23 Nov 2021 15:30:30 +0900

デザインの一部として背景に動画を使う上で、以下のことが気になったのでメモ。

動画の容量
再生時間
画面サイズ
ファイル形式
モバイル対応でするべきこと

調べて分かったこと

動画の解像度やファイルサイズ

動画のファイルサイズが大きいと読み込みに時間がかかり、モバイル通信では容量を大量に消費させてしまいます。反対に、ファイルサイズが小さければ読み込み時間が短くなり、すぐに再生が始まります。訪問者に対して快適に閲覧してもらえるWebページにするためには、動画ファイルはなるべく小さくします。

いろいろ情報を見る中では具体的に3MB以内。できれば500KB以内が理想的というものをみかけましたが、10秒以下の動画でないと難しいと思います。トップページの背景に動画（MP4）を使用しているいくつかのサイトを参考に、いくつか動画をダウンロードしてプロパティを調べたところ以下のような平均値になっていることが分かりました。

  解像度
  再生時間
  ビットレート
  ファイルサイズ




  フルHD

  （1920ｘ1080）
  約15秒
  約5Mbps
  約10MB


  フルHD

  （1920ｘ1080）
  約14秒
  約3Mbps
  約5.9MB


  フルHD

    （1920ｘ1080）
  約20秒
  約2Mbps
  約4.75MB


  フルHD

  （1920ｘ1080）
  約54秒
  約1.5Mbps
  約9.8MB


  HD

    （1280ｘ720）
  約13秒
  約5Mbps
  約8MB


  HD

    （1280ｘ720）
  約30秒
  約4.9Mbps
  約16MB

参考値

この先、世の中の通信環境が変わるとわかりませんが、上記の平均値を踏まえて考えると、ここ最近では以下の条件で動画を作成するのが良いみたいです。

解像度は『フルHD』か『HD』
ビットレートは1.5M~~3Mbpsまたは4M~~5Mbps
ファイルサイズは10MB前後

スマートフォン向けの配慮

動画が埋め込まれたWebページは、テキストや画像を中心としたページに比べてデータ量がかなり大きくなります。スマートフォンでの閲覧は、モバイル通信の容量を大量に消費してしまいます。場合によっては、Webサイトにアクセスしたとたんに動画が自動的に再生され、通信制限がかかってしまうということもあるかもしれませんので、ユーザーへの配慮は動画を活用する上で重要なポイントとなり、通信量を可能な限り抑えることが肝心です。

そのためには、画像のファイルサイズができる限り小さくなるように、映像の解像度や動画フォーマットを慎重に決めていきます。また、スマートフォンのモバイル通信環境で実際にWebページをテスト表示させ、動画があってもストレスなく閲覧できるかどうか確認しておくことも大切です。

このとき、Basic認証がかかっているとAndroidでは動画が再生されないことがあります。テスト表示は、PC上でモバイル表示させる方法ではなく、できる限り本番の運用に近いスマートフォン上で行うようにしましょう。

再生時間について

動画をサイトの背景として配置する場合、それ自体が主要なコンテンツでなく、再生時間が長い動画を埋め込んだとしても、サイト訪問者は最後まで視聴する可能性は低いでしょう。ユーザーが飽きることなく、見る側のストレスがないよう尺の短い動画を使用するのが良いと思います。

具体的には長くても30秒～45秒あたりがベストではないでしょうか。

もし、WEBサイトの内容をよりわかりやすく伝えるために、もっと長い動画が必要な場合は、背景に使用するのではなく、メインコンテンツとしてページ内に配置するほうが適しているかと思います。例えばYouTubeやvimeoなどにアップロードしてiframeで埋め込みます。

サウンドオフと自動再生などデフォルトの設定

コンテンツとしての動画とは違い、背景動画は再生ボタン操作なしで自動再生させ、繰り返しループ再生させることが多いかと思います。その際は``タグに属性としてautoplayとloopを有効に設定します。すると、動画データ読込後に再生が自動で開始され、エンドレスで繰り返し再生されます。

また、ページ表示でいきなり音が鳴ると周囲に迷惑がかかったり、音が鳴ると困る場所では驚いて画面を閉じていします顔で知れません。そういうシーンに配慮してmuted属性を設定し、音がデフォルトで出ないようにします。

更に、WEBでの動画には全画面モードが搭載されていることがよくありますが、背景動画には不要だと思います。その場合、playsinline属性を有効に設定します。これは「動画の映像をインラインで再生する」という意味なので、全画面モードが禁止され、常にページ内で再生されるようになります。ちなみに、playsinline属性を使用するとiPhoneでインライン再生ができるようになります。

ソース例

<video  src="動画ファイル.mp4" playsinline autoplay loop muted></video>

または

<video playsinline autoplay loop muted poster="動画を読み込む間に表示する画像.jpg">
	<source src="動画ファイル.mp4" type="video/mp4" />
	<source src="動画ファイル.webm" type="video/webm" />
	<source src="動画ファイル.jpg" />
</video>

ユーザーの閲覧するブラウザによっては、指定した動画ファイルが再生されない場合があるため、>タグを使用して複数のファイル形式のソースを指定します。

指定の範囲だけ再生する方法

その他、参考として再生する範囲を指定することもできます。例えば、全体で30秒ある動画の5秒～10秒に当たる部分を再生する場合は``とします。この仕組みは**「Media Fragments URI」**という規格で定められた特別なURLの書き方で、その一部が各種ブラウザで採用されているために利用可能なものです。ただし、IE（Internet Explorer）とEdgeは対応していないので、使う際は注意が必要です。

IEやEdgeではJavascriptで制御も可能

再生範囲を指定できないIEやEdgeにも対応したい場合、再生が不要な部分を事前にカットして、必要な部分のみの動画にしておくのが最もシンプルな方法ですが、何らかの理由で事前にカットせずIEやEdgeに場合は、JavaScriptを用いて対応させる方法もあります。

``タグのすべての属性は、JavaScriptを通して動的に制御できます。再生範囲をURLで指定する#t=はタグは使用せず、代わりに「video」オブジェクトの「currentTime」属性によって再生位置の確認と設定が可能です。「video」オブジェクトの再生状態を制御するplay()やpause()などのメソッドと組み合わせれば、特定の範囲を再生させるプログラムを作れるかと思います。

ソース例

``タグに任意のIDを設定し、Javascriptで指定します。範囲を指定する方法は見つけれませんでしたが、こんな書式で制御できるみたいです。

<video id="header-video">
	<source src="動画ファイル.mp4" type="video/mp4">
	<source src="動画ファイル.webm" type="video/webm">
	<source src="動画ファイル.jpg">
	<p>ご使用のブラウザでは動画再生に対応していません。</p>
</video>

<script>
window.addEventListener('DOMContentLoaded', function(){
	var v = document.getElementById('header-video');
	v.autoplay = true;
	v.loop = true;
	v.muted = true;
	v.playsinline = true;
	v.currentTime= 30; //30秒から再生が開始される?
	v.play();
});
</script>

参考サイト

ファイル形式

iOS・Androidの両方で動画を再生させるとすると、動画形式は共通で扱える必然的にMP4（コーデックはh.264）となります。特別な理由がない限り、MP4で問題ないでしょう。また、MP4自体が特殊なものでもないこと理由の一つとなります。

Androidで扱える形式

3GPP、mp4、WebM

iPhoneで扱える形式

m4v、mp4、3gp、mov、qt

ブラウザやデバイスによって対応できるものがことなったり、ブラウザが自動的に最適なファイル形式を選択できるよう、複数のファイル形式を準備しておき、タグで複数の動画を設置しておくことをおすすめします。

<video id="header-video">
	<source src="動画ファイル.webm" type="video/webm">
   <source src="動画ファイル.ogg" type="video/ogg">
	<source src="動画ファイル.mp4" type="video/mp4">
   <p>ご使用のブラウザでは動画再生に対応していません。</p>
</video>

このように複数の動画がある場合、上から順番に対応できるものをブラウザが自動的に選択して再生します。

動画の代替手段としてアニメーションを使う

AndroidやiOSのバージョンいよってはページ内再生はできない場合があるようです。理由はよくわかりません。その場合はアニメーションGIFや**アニメーションPNG（APNG)**などを用いるなど、デバイスごとに最適な動画を用意することで、すべてのデバイスに対応できるかもしれません。アニメーションGIFでは256色までしか使えないため、画像が粗くなりますが、アニメーションPNGは24bitカラー（1677万色）でキレイな表示と半透過も使用可能です。その分、容量が大きくなります。拡張子もPNGですが、IEや古いバージョンのEdgeには非対応ですが、apng-canvas.jsで疑似的な対応は可能のようです。

オンラインでアニメーションGIFが作れるサイト

https://www.groovoost.com/blog/web/video-to-gif https://www.groovoost.com/blog/web/video-to-gif

各ブラウザのAPNGの対応状況

https://caniuse.com/?search=apng https://caniuse.com/?search=apng

オンラインでアニメーションPNGが作れるサイト

MP4の動画をオンラインでアニメーションPNG（APNG）が作成できる。アニメーションGIFにも対応。

https://i.kuku.lu/ https://i.kuku.lu/

apng-canvas.jsとサンプル

https://github.com/davidmz/apng-canvas https://github.com/davidmz/apng-canvas

https://ics.media/entry/2441/ https://ics.media/entry/2441/

https://coco-factory.jp/ugokuweb/move02/9-2/ https://coco-factory.jp/ugokuweb/move02/9-2/

https://lab.sonicmoov.com/design/how-to-make-apng/ https://lab.sonicmoov.com/design/how-to-make-apng/

アニメーションWebPという手段も

WebPとはGoogleよって軽量化を目的に作成された画像フォーマットで、アニメーションPNGよりも軽くなり。PNG同様にフルカラーでアルファチャンネルを持ち透過も使えます。ただし、IEでは表示できません。

オンライン変換ページ

オンラインでMP4形式の動画をアニメーションWebPに変換できるようです。

https://video2webp.mattj.io/ https://video2webp.mattj.io/

使用例

<picture">
	<source srcSet="animation.webp" type="image/webp" />
	<img src="picture.png" alt="title" />
</picture>

使い方の参考

https://gigazine.net/news/20210919-video2webp/ https://gigazine.net/news/20210919-video2webp/

オンライン変換サイト

https://video2webp.mattj.io/ https://video2webp.mattj.io/

WebM形式の動画も用意

WebMとは、Google社が開発・公開しているオープンな動画ファイル形式。動画圧縮にVP8/VP9形式、音声圧縮にVorbis形式、ファイル形式（コンテナフォーマット）にMatroska形式（MKV/MKA）のサブセットをそれぞれ用いたものです。

ちなみに、MP4はMPEG-4形式の圧縮動画データを格納するファイル形式の一つ。MP4はApple社のメディア技術QuickTimeのファイル形式を元に策定されたISO/IEC 14496 Part 12の派生フォーマットで、従来のQuickTime形式の多くを踏襲した構造となっています・

WebMをMP4と比較すると、画質はややMP4の方が良いみたいですが、私には見分けが付けいません。ファイルサイズはWebMの方が軽くなります。ただし、WebMに対応するブラウザが限られます。

各ブラウザの対応状況

https://caniuse.com/?search=webm https://caniuse.com/?search=webm

WebM形式の動画を作成する方法

Premiere Proから書き出す（プラグインが必要）
オンラインで変換する

Premiere Proは標準ではWebM形式で書き出せないため、プラグインをインストールする必要があります。インストール後は書き出し時のファイル形式からWebMを選択できるようになります。使い方は以下のページが参考になります。Mac用の参考ですが、Windowsもやり方は同じです。

https://vook.vc/n/859 https://vook.vc/n/859

プラグインはWindows/Macの両方が用意されています。プラグインは以下よりダウンロードできます。インストールはダウンロードしたファイルを開き、メニューに沿って次々に進めば簡単にインストールできます。

https://www.fnordware.com/WebM/ https://www.fnordware.com/WebM/

以下のサイトではMP4→WEBM、逆のWEBM→MP4にオンラインで変換することができます。

https://convertio.co/ja/mp4-webm/ https://convertio.co/ja/mp4-webm/

https://www.aconvert.com/jp/video/webm-to-mp4/ https://www.aconvert.com/jp/video/webm-to-mp4/

その他注意すること

iPhoneについて

videoタグにplaysinline属性を使用するとiPhoneでインライン再生ができるようになる。
低電力モードになっている時、WEBサイトの背景動画は再生されていないことが多い。

その他参考サイト

https://jp.ext.hp.com/techdevice/technologysc/creator_014/ https://jp.ext.hp.com/techdevice/technologysc/creator_014/

まとめ

モバイルにも対応したレスポンシブデザインのホームページ制作で、背景に動画を埋め込み際は、以下のことに心がければよいかと思われます。

動画の解像度はフルHDかHD。
ファイルサイズは約10MBになるようにビットレートを5Mbps以下に落とす。
MP4以外にサイズの軽いWebMなども設置する。
もっと軽くしたいときは動画の代替としてアニメーションPNG（APNG）やアニメーションWebPを使う。
iPhone対応で``タグにはplaysinlineを設定する。

WEBM on qwerty.work

ホームページの背景として動画を埋め込む際に行うことや気を付けること

調べて分かったこと

動画の解像度やファイルサイズ

参考値

スマートフォン向けの配慮

再生時間について

サウンドオフと自動再生などデフォルトの設定

ソース例

指定の範囲だけ再生する方法

IEやEdgeではJavascriptで制御も可能

ソース例

参考サイト

ファイル形式

Androidで扱える形式

iPhoneで扱える形式

動画の代替手段としてアニメーションを使う

オンラインでアニメーションGIFが作れるサイト

各ブラウザのAPNGの対応状況

オンラインでアニメーションPNGが作れるサイト

apng-canvas.jsとサンプル

アニメーションWebPという手段も

各ブラウザの対応状況

参考デモ

オンラインで変換する方法の参考

オンライン変換ページ

使用例

使い方の参考

オンライン変換サイト

WebM形式の動画も用意

各ブラウザの対応状況

WebM形式の動画を作成する方法

その他注意すること

iPhoneについて

その他参考サイト

まとめ