Build a kick-🍑 video player
summary
Claims a 39% viewer abandonment for even one second of buffering and shows how imgix Video API plus a few helper scripts deliver buffer-free playback using hls adaptive streaming. Demonstrations include automatic poster generation (select time, blur, watermark via imgix rendering params), GIF-on-hover previews generated on the fly, a ResizeObserver-based JS helper to auto-build poster/GIF URLs, lazy IX Player with preload=none tradeoffs for vitals, and integrations with Video.js and mux; npm package available.
AI-written summary · about
chapters (15)
- 0:00Introduction to custom player
- 1:46Building modern player features
- 2:28Automatic poster generation
- 4:52Automating posters with JavaScript
- 8:44GIF hover previews
- 11:51Using IX API with other players
- 12:55IX Player out-of-box features
- 15:00Lazy loading for performance
- 18:14Web component and SSR support
- 21:42HLS vs MP4 encoding
- 23:27Web performance and lazy loading
- 29:45Web components and SSR details
- 32:12Image and video rendering API
- 33:38Lighthouse and video embedding
- 38:52Q&A and closing
related talks
14mHigh-quality, performant images & videos on your React website (and some AI magic!)
32mDelivering Native Video Experiences in React Apps
19mUser-friendly video playback on the web
43mModern Streaming Video for the Jamstack
01mStay tuned…
22mGIFs Are Forever, Let’s Make Them Better
26mOptimizing Video Performance for Web Developers
30mOther browser APIs that are going to change video on the web