Anatomy of a Web Media Experience

on YouTube ↗35m

" summary

Chrome reports 60% of audio plays in background, so the team adds media keys and implements the Media Session API to match native apps. Picture-in-picture yields measured wins: Nest +4% watch time, Tencent +16% watch time and completion. Chrome rebuilds controls (bigger play target, full-width scrubber, double-tap seek, platform-specific volume affordances), bundles them as a customizable Shaka UI library with Chromecast, offline, DASH/HLS support and easy CSS/layout hooks for custom buttons and accessibility.

AI-written summary · about

" chapters (11)

1. 0:00Intro
2. 0:18Why is Web Media Important
3. 2:50Background Music
4. 3:08Brains
5. 3:55Ambient Media
6. 7:25Picture in Picture
7. 12:18Immersive
8. 18:12New Video Player
9. 20:40Shaka
10. 24:35Pictureinpicture
11. 29:03Accessibility

" related talks

• 21mBuilding Modern Web Media Experiences: Picture-in-Picture and AV1François Beaufort, Angie Bird · Chrome Dev Summit 2018
• 24mIt's time to rebuild your player with web componentsSteve Heffernan · Demuxed 2020
• 01h 00mThe second keynoteChris Rogers · Web Audio Conference 2018
• 38mReal time front-end alchemySoledad Penadés · JSConf AU 2016
• 41mChrome and the web in 2020Una Kravets, Ben Galbraith, Dion Almaer, Jecelyn Yeen, Parisa Tabriz, Henrik Joreteg, Sunit Jindal · Chrome Dev Summit 2020
• 30mWhat's new for the web platformBen Galbraith, Dion Almaer, Travis McPhail · Google I/O 2021
• 10mA default HLS player for Chrome (and why I hate the robustness principle)Ted Meyer · Demuxed 2025
• 10mNext-level web apps on desktopPJ McLachlan · Chrome Dev Summit 2020