【視聴メモ】 Anatomy of a Web Media Experience (Google I/O ’19)

この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。

---

References

Speaker(s): Amy Roberts, Sandra Lokshina

Abstract

Chromeにおけるネイティブのメディアコントロールはあるインサイトに基づいて刷新されました。このセッションではその知見とShaka playerにおいて使用されているUIライブラリについて学ぶことができます。

Contents

Chromeが使われる時間の3分の1はメディア再生が伴われている

ユーザーはメディアに接するのは主に3つの方法のどれかである

• Immersively - 完全にコンテンツに集中する場合
• Transiently - 耳だけで聞くような場合
• Ambiently - 作業のバックグラウンドで再生するような場合

Chromeでは60%の音声再生がバックグラウンドで行われている

頻繁なタスクスイッチは人間の思考を最大で40％遅くする

メールを書いているときにバックグラウンド再生している曲の歌詞が気になってしょうがなくなってしまったときなど

MediaSessionAPI

• キーボードのメディアコントロール入力をChromeに伝達するためのAPI
• 現状ではSpotifyが対応している

Picture in Picture

• テンセントのサービスがこれに対応したところ16％の視聴時間の増加と16％のcompletion rateの増加が得られた

• Picture in Picture でも一時停止やミュートなどのメティアコントロールが実装された

• モバイルにおけるメディアコントロールの改善

  • 再生ボタンの巨大化やシークバーの長大化

• 新しいメディアコントロールは全体的にYouTubeのUIを参考に再設計された

下図はデザインの候補

• 「Chrome 67のメディアコントロールは最悪だ」とか言われていたらしい
  • 可愛そう…
• 最悪なポイントが3つあった
  1. 画面中央にある再生停止ボタンがビデオコンテンツの邪魔だし他のコントロールから離れすぎている
  2. ボリュームボタンがOn/Offのトグルになってしまい、音量を再生できなくなった
  3. ダウンロードボタンがメニューの唯一のコンテンツとなってしまっている
     • クリック回数が増えるし場所の無駄

Shaka Player

• Shaka Player はメディア再生を行うためのJSライブラリ
  • ABR / PWA / Offline / Chromecast / Shaka Embedded などの特徴がある
  • ABR: Adaptive Bitrate Streaming の略でネットワークの速度に応じた最適な解像度の動画を再生できる
  • PWA: PWA対応してますよ
  • Offline: 動画をダウンロードしておいて再生できる
  • Chromecast: 対応してるよ
  • Shaka Embedded: C++使えるよ
• サッカーワールドカップの動画配信で130万人の同時視聴にも使われた
• 1日に870万人が利用する
• GhanaはShakaのPWAをオフラインサポートのために取り入れたところセッションタイムが1.5倍に増えた
• ほぼYouTubeと同じことができるという理解でOK?
• メディアコントロールのレイアウトをカスタマイズすることもできる
• 「購入ボタン」を追加したりもできる
  • これはイイね
• UI Elementを継承することで見た目と動作のカスタマイズができる
  • ちょっとキモいかも
• 5670万人のアメリカ人が何らかの形で障害を抱えている
  • これはスイスの人工の7倍
    • 暗に小国に対応するぐらいならdisability抱えた人のためにアクセシビリティ上げたほうが良いよと言っている
  • 視覚障害・聴覚障害と比べるために更に香港とニュージーランドが引き合いに出される
  • つまり下手にアクセシビリティ上げるより日本語対応したほうが良いよってこと………？？？
  • 視覚に頼らない操作を可能にすることはドライバーにとっても役に立つので、単に障害を抱えた人のためだけというわけではないよ
• Shaka Player はキーボードナビゲーション・スクリーンリーダー・カスタムボタンにアクセスするためのチュートリアルに対応してるよ
• ローカリゼーションにも力を入れてるよ
• 今後は次の要素に力をいれていくよ
  • Ad controls
  • Extending HLS support
  • Media Capabilitiers
  • Codec switching

Memo

• なんとなく受け入れていたメディアコントロールのデザインがこれだけいろいろなことを考慮して考えられていたとは（小並感）
• Shaka Player 使ってみるか