Rip your player's face off

on YouTube ↗12m

" summary

Argues for ripping a monolithic player into a separable UI and media element, showing concrete demos: Web Components + ES6 expose a video-tag‑compatible API, a media controller mediates between UI and media, and dumb components like a media-play-button emit events rather than touch media directly. Implements hls-js and a YouTube wrapper as interchangeable media elements, and a media-chrome component library and media-ui-extensions repo host the work. Demos run and swap elements successfully, proving the architecture is practical not just theoretical.

AI-written summary · about

" chapters (5)

1. 0:00Intro
2. 2:23BBC Cares
3. 5:23Standardized API
4. 6:58Architect
5. 8:38Demos

" related talks

• 24mIt's time to rebuild your player with web componentsSteve Heffernan · Demuxed 2020
• 22mNo More Player: Reinventing Video.js for the Next 15 Years (Sorry, Plugins!)Steve Heffernan · Demuxed 2025
• 40mScalable JavaScript architectureFrank Baele · Frontend United 2016
• 16mHow to be a Player (on the Internet). The making of Yahoos universal JS media player.Dan Beam · JSConf US 2011
• 25mChoosing the Wrong Abstraction (And What It Cost Us)Darius Cepulis · CascadiaJS 2026
• 19mAudio, Video, and Elm - Best Practices for MultimediaDan Abrams · Oslo Elm Day 2019
• 35mHTML5 APIs - The New FrontierRobert Nyman · JSConf.eu 2010
• 14mReusable UI Components in a Framework MultiverseHadar Geva · DevConf.US 2025