Video Killed My Data Plan: Delivering Video that Doesn't Break the Web
summary
Video inflates pages: median mobile pages jump from 2 MB to 5 MB with video (250% bigger), so prioritize startup and stalls. Use FFprobe/FFmpeg and OBS for encoding and testing; remove audio tracks to shave ~5% and avoid 120 Mbps 10s files — background loops should be under 500 KB not 120 MB. Use streaming (HLS/DASH) for >90s with segmented manifests and adaptive bitrates to prevent stalls; order sources so browsers pick the smaller WebM first and serve via CDN. preload=metadata 2%, remove audio to shave ~5%, HLS/DASH adaptive segments.
AI-written summary · about
chapters (21)
- 0:00Introduction to video on demand
- 1:04HTML5 video tag basics
- 4:39Preload attribute explained
- 8:50Common video mistakes
- 12:30CSS display none pitfalls
- 13:12Video compression and formats
- 17:51Resizing videos for mobile
- 19:19Video streaming protocols
- 25:19Q&A session begins
- 26:24Live streaming quality adjustments
- 31:43Video caching and offline playback
- 33:50Video compression limits
- 35:12Live stream framework suggestions
- 36:59Desktop site video behavior
- 37:40Video encryption and DRM
- 39:05CDN benefits for video delivery
- 41:29Handling massive video loads
- 43:16Choosing video players
- 44:22Future of video sharing options
- 46:09API vs S3 for video storage
- 47:37Closing remarks and thanks
related talks
39mVideo Killed My Data Plan
41mDelivering video that doesn’t break the bank
26mOptimizing Video Performance for Web Developers
41mDelivering Fast Video without the Buffering
26mBandwidth Ballet: Optimizing Video Performance for Web Maestros
25mDelivering Fast and Beautiful Images and Video
31mDelivering Fast and Beautiful Images and Video
48mFast and Beautiful: Modern Image Delivery Techniques