Chrome 66のautoplay制限に備える動画pageは再生buttonと本文を分けて置く

siteへ動画を置く場合は、音声付きのautoplayだけを読者への案内にしません。Chrome 66では、音が出ないmedia、読者がclickまたはtapした後のmedia、desktopで読者がそのsiteに関心を示している場合を除き、autoplayに制限が付きます。動画を再生できない環境でも、何を提供しているか、料金や条件は何か、次にどこへ進めばよいかが本文とlinkだけで分かるようにします。動画は説明を補う手段であり、pageの用件を渡す唯一の入口にしない。

Chromium Blogは3月21日、Chrome 66でmediaのautoplayが許可される条件を案内しました。音を再生しないmediaはautoplayできます。音が出るmediaは、siteをclickまたはtapした後、またはdesktopで以前の利用状況からsiteへの関心が示されている場合に許可されます。Chrome 66 Betaの案内であるため、公開中の動画が常に同じ条件で再生されると決めず、音の有無と操作の有無を分けて確認します。

自動再生できることと、動画を見てもらえることは別である

動画をpageの最初に置くと、見た目は動きます。しかし読者が音を聞けない場所にいる、通信が遅い、再生buttonを押さない、browserがautoplayを許可しない場合、動画の内容は伝わりません。動画が始まるかだけを成功条件にすると、重要な説明を受け取れない人が残ります。

たとえば施工の流れを動画で説明するpageなら、動画の近くに作業の順序、対応範囲、問い合わせの方法を文章で置きます。会社紹介の動画なら、会社名、扱うサービス、連絡先を静止画や本文で読めるようにします。動画の中だけで料金条件や申込み期限を伝えると、再生されなかった人は判断できません。音声がある動画には、音を出せない人もいるため、画面の文字だけで要点が追えるようにします。

autoplayを止めることと、動画を削除することも別です。動きが必要な見本、短い操作説明、雰囲気を補う映像なら、読者が再生を選べるbuttonを置けばよい。buttonの近くには、何分程度の動画か、何を見られるかを短く書きます。「再生」とだけ表示するより、「施工の流れを再生」のように内容を示した方が、読者は押す理由を判断できます。

音の有無と再生の目的を分ける

Chrome 66の条件では、音を再生しないmediaと、音が出るmediaを分けて考えます。背景の動きとして使う短い映像なら、音を出さず、本文と重ならない位置で再生する方法があります。一方、話し手の説明や音楽が内容の一部なら、音を出すことを前提にしたautoplayへ頼らず、読者が再生を選べる画面にします。

音を消せば何でもよいわけではありません。動画が大きく、最初の本文を押し下げ、mobileの通信量を増やすなら、読者は情報を読む前に待たされます。最初の画面に動画を置く必要があるか、静止画と短い要約で足りるかを先に決めます。動画が必要なら、最初に読ませる見出しや説明を隠さず、再生しない状態でもpageの目的が分かるようにします。

動画の目的を三つに分けると、置き方を決めやすくなります。

同じvideo要素でも、目的が違えば必要な画面は違います。映像の開始を制御するcodeだけを直しても、読者が得る情報が不足していればpageは改善しません。

再生できない状態から画面を確認する

動画pageを公開する前は、まず動画を再生しない状態で開きます。poster imageが出るか、動画の題名が読めるか、再生buttonが分かるか、本文と問い合わせへのlinkが見えるかを確認します。次にbuttonを押し、動画が始まるか、音を出す操作が分かるか、再生中にpageの操作が妨げられないかを見ます。

PCだけで確認せず、mobileでも開きます。画面が小さいときにvideoが横へはみ出さないか、再生buttonが指で押せるか、動画の下にある本文へ進めるかを見ます。広告や外部serviceから埋め込む動画なら、埋め込み先のscriptが読込中にerrorにならないかも確認します。動画のproviderを替えたり埋め込みcodeを更新したりする場合は、どのpageで何を替えたかを残します。

音声付きautoplayが使えない環境を再現できなくても、音を出さずにpageを読み、videoを再生せずに問い合わせへ進む確認はできます。そこで用件が進まないなら、autoplayの設定より先に、本文、button、linkの順を直します。動画が再生できるbrowserだけを基準に画面を決めないことが、公開後の問い合わせや案内の取りこぼしを減らします。

動画の再生条件を外部service任せにしない

外部video serviceの埋め込みには、video要素以外のscript、player、広告、cookieなどが関わることがあります。Chromeのautoplay条件が変わるとき、埋め込み先が自動で対応すると期待するだけでは足りません。site側では、動画が始まらない場合に何を見せるか、誰が埋め込みcodeを更新できるか、動画の提供元を替えたときにどのpageを確認するかを決めます。

制作を頼む場合は、動画を「自動で動くようにしてほしい」とだけ伝えません。音を出す必要があるか、最初に読者へ伝える本文は何か、再生できないときに残す静止画とlinkは何か、PCとmobileのどちらで使うかを渡します。制作側はvideoとscriptを調べられます。siteを運用する側は、動画を見ない読者にも残す説明と問い合わせの入口を決めます。

Chrome 66へ備えるなら、最初に動画を一つ選び、再生しない状態でpageを開きます。次に音を出さず、buttonを押さずに、必要な説明とlinkへ進めるかを見ます。その後に音の有無と再生条件を確認します。この順序なら、browserの変更があっても、動画を置いた目的と読者が用件を進める入口を分けて保てます。