YouTube背景動画をスマートフォンでも自動再生する方法。

2018.01.25 2018.05.16

テクノロジー

YouTube背景動画をスマートフォンでも自動再生する方法。

こんにちは。スタッフの川島です。

ここ数年で、動画コンテンツを大胆に使ったコーポレートサイトやランディングページが随分と増えましたね。本記事をお読みのみなさまも、きっとどこかで、動画を使ったWebサイトを目にしたことがあるのではないかと思います。

実は先日から、ノンスタのWebサイトでもトップページの背景に動画を表示するようになりました。その際、スマートフォンからアクセスしても、再生可能な環境ならば背景動画が自動再生されるように実装しています。
スマートフォンでの動画自動再生が可能になってからまだ一年と少しということもあり、情報をお探しの方向けに、実装時の知見を本記事にまとめてみました。
コンテンツ企画を行うディレクターさんや、実装例を探しているエンジニアの方の一助になれば幸いです。

概要

safari for iOS10、およびChrome for Android53以降、スマートフォンでも動画のインライン自動再生が可能になりました。ただし、動画はミュート状態である必要があります。
自動再生が可能なユーザーと不可能なユーザーの双方をカバーするために、弊社サイトではUserAgent判定とYouTube IFrame Player APIを組み合わせて実装しました。
将来的にNetwork Information APIが普及したら更に使いやすくなりそうですが、現時点では、通信制限下など低速回線のユーザーが受ける影響を加味した上で、導入の有無を判断するのが良いかと思います。

スマートフォンと動画コンテンツの関連について

実装例の解説の前に、スマートフォンとWebサイトにおける動画コンテンツについて記載します。（具体的な実装知見が先に読みたい方はこちらをクリックすると飛ばせます）

Webサイトで動画コンテンツを使うということ

数年前までは、動画コンテンツがそのままWebサイトに利用されるケースは少なく、FlashやGIF動画、canvasを利用した動画描画が一般的でした。動画コンテンツはあまりに容量が大きく、当時の回線速度では再生するまでに時間が掛かりすぎたのです。
ですが、動画の情報量はテキスト・静止画とは比べものになりません。そのため、平均的な回線速度が上がるにつれて、Webサイトに動画を利用することも多くなってきました。
参考：背景動画を使ったランディングページの基本と活用事例

しかし、スマートフォンの場合、回線速度の状況は様々です。Wi-Fiを使うユーザーもいれば、通信制限下で低速回線のユーザーもいます。
そのため、スマートフォンから閲覧するサイトでは、動画コンテンツの積極的な利用や自動再生は、まだあまり一般的ではありません。スマートフォン上での動画自動再生が一般的に可能となったのも比較的最近のことです。
今はPCよりもスマートフォンでWebサイトを閲覧するユーザーが多いため、スマートフォンでも動画コンテンツが活用できれば大きなメリットになりますが、導入の際にはユーザーの状況に合わせた実装が必要になります。

導入のメリットとデメリット

Webマーケティング視点に立った解説記事は既に多くありますので、本記事では簡潔に。
動画コンテンツをWebサイトに導入するメリットとしては、下記が考えられます。

テキストや静止画以上の情報量をユーザーに伝えることができる。
ユーザーの注意を引き、サイトあたりの滞在時間を伸ばすことが期待できる。
メッセージや雰囲気をより直感的に伝えることができる。
（自動再生を行う場合）再生の手間をユーザーから省き、Webサイトを閲覧している間は動画コンテンツに目を留めてもらうことができる。
（スマートフォンの場合）PCよりもスマートフォンで閲覧するユーザーの方が多いため、訴求できるユーザーの数が増える。

反面、デメリットとしては下記が挙げられます。

動画の容量が大きくなるほど、ユーザーの閲覧環境に負荷が掛かる。
（スマートフォンの場合）ユーザーの通信量を大きく消費してしまう。
（スマートフォンの場合）低速回線、通信制限下のユーザーは動画視聴に時間が掛かってしまう。
（スマートフォンにも自動再生を導入する場合）上記デメリットをユーザー側で回避することが難しい。

これらを踏まえた上で、動画コンテンツの導入、およびスマートフォンでの対応と実装内容を決定するのが良いかと思います。

背景動画の導入時に考慮すべきこと

また、自動再生される背景動画をWebサイトに取り入れる場合は、PCでもスマートフォンでも、下記がポイントになります。

動画の長さ。おおよそ、30秒以内の長さを目安にするのが良いと言われています。
動画の音。自動再生される動画は無音、あるいはミュート状態であることが望ましいです。ユーザーがどこでWebサイトを開いても良いように。
動画の代替。視聴できない閲覧環境のユーザーは必ず存在します。環境によっては画像などで置き換えましょう。

新しい商品やオフィスの雰囲気を、それについて何も知らない第三者に文章や画像だけで伝えるのは難しいことです。文章や画像の量が多くなれば、ユーザー側も読む負担を感じやすくなります。
その点、動画コンテンツは、商品を使っている様子・オフィスを歩いている様子などを映すことで、そのものが持つ雰囲気を直感的に伝えることができます。
商品のスペック・採用の募集要項など、文章で明確に伝えるべきものまで動画コンテンツにするのはやりすぎですが、「文字で説明する必要性が薄く、そのものが持つ雰囲気にまず触れてほしい」ような場合には、動画コンテンツを導入するメリットは大きいのではないでしょうか。

具体的な実装方法

さて、スマートフォンで動画コンテンツを導入する際にはユーザーの状況に合わせた実装が必要、と述べました。
以降、ノンスタの自社サイトで実装した内容の詳細を記載します。
実装要件は下記のとおりです。

サイトのトップページ背景全面に表示している動画を、PCだけでなく、スマートフォン閲覧時にも自動再生する。
閲覧できない・閲覧が難しい状況のスマートフォンユーザーには、代替となる背景画像を表示する。

UserAgent判定に基づく分岐処理の実装

インライン動画（ミュート状態）の自動再生が可能なのは、iOS10以降のSafari、あるいはChrome for Android53以降です。
すでに双方のリリースから1年以上経っているため、割合的には少ないものの、動画自動再生の条件を満たさないスマートフォンやブラウザのユーザーも存在します。その場合、動画はタップして手動再生——としたいところですが、背景動画では叶いません。そのため、ノンスタの自社サイトでは代替となる背景画像をデフォルト表示とし、UserAgentに基づいて自動再生が可能と判断できた場合のみ、APIで動画を読み込むことにしています。
判定条件を広げすぎると煩雑になるため、利用割合が高いもののみ（※スマートフォンのブラウザシェアは90%以上がSafariとChrome）を考慮し、以下のような判定用javascriptを作成しました。

Androidの場合、標準ブラウザを利用していないか＋Chrome for Androidのバージョン値は53以上か（標準ブラウザのUA文にもChromeという文字列が含まれるため、最初に利用有無を確認しています）
iPhone/iPad/iPodの場合、iOSのバージョンは10以上か

上記いずれかを満たす場合のみtrueを返し、YouTube IFrame Player APIの読み込みを有効化するようにしています。
補足：iOS10以降のChrome for iOSやアプリ内ブラウザを利用している場合はどうなのか、調べた限りでは明確な情報は見当たりませんでした。実機では自動再生されることを確認できていますが、何か分かり次第アップデートしたいと思います。

YouTube IFrame Player APIについて

videoタグでもインライン自動再生は可能ですが、動画再生の状態によって分岐処理を行いたかったので、YouTube IFrame Player API（公式リファレンスはこちら）を利用しました。リファレンスは日本語なので、javascrpitの基礎知識があれば扱うことができると思います。
弊社サイトでは、「YouTubeリストのループ再生」「プレイヤーをミュート状態にする」「動画の読み込み中はプレイヤーを非表示（opacity:0）にしておく」「動画再生にエラーが生じた場合はプレイヤーを削除し、代替画像を表示する」といった処理をAPIの関数やオプションに基づいて実装しています。

See the Pen youtubeAPIとUserAgentを用いた動画のインライン自動再生 by sayaka (@river_is_land) on CodePen.

導入を見送ったものについて（modernizr.js、Network Information API）

modernizr.js

ブラウザ環境ごとに異なるclass名を付与し、処理を変更できるライブラリとして「modernizr.js（公式サイトはこちら）」があります。
導入を検討したのですが、実装時（2017年12月）に確認したところ、スマートフォンの動画自動再生のチェックはできませんでした（再生可能にも関わらず不可と判定されてしまう）。videoAutoPlayという判定条件は存在しているので、今後のアップデート次第では、組み込める可能性もあるかもしれません。

Network Information API

「Network Information API（Mozillaのドキュメントはこちら）」は、ユーザーの回線状況を取得できるAPIです。Wifiかモバイル回線か、通信速度はどれくらいか、などを判定できるというものですが、2018年1月時点ではまだ仕様策定中で、一部のブラウザでしか利用できません。今後に期待しています。

おわりに

スマートフォンやWebブラウザの進化は本当に目まぐるしく、出来ることも日々増えてゆきます。
今はまだ実装の工夫が必要ですが、もう少し経ったら、スマートフォンで閲覧するWebサイトでも当たり前に動画コンテンツが活用されるようになるのかもしれません。
本記事の内容が、動画コンテンツの導入や実装の助けになれば幸いです。