この記事は 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 使ってみるか