Delivering Native Video Experiences in React Apps
summary
Global video traffic sits around 80% so building native playback matters: the talk shows how ImageKit’s Video API converts a single 35 MB source into adaptive chunks (example: split into ~6 MB segments), exposes an HLS manifest via ikmaster.m3u8, and auto-generates renditions at 360,480,720,1080 without manual re-encodes. Examples include using video.js for ABR, preload strategies (none/metadata/auto), thumbnail extraction via thumbnail_start_offset or IKthumbnail.jpg, and bringing your own S3/GCS storage behind a CDN.
AI-written summary · about
chapters (11)
- 0:00Introduction and video stats
- 3:09YouTube embed disadvantages
- 6:19Building native video experiences
- 8:24ImageKit video API overview
- 11:53Native HTML5 video tag
- 16:32Preload options and buffering
- 19:01Adaptive bitrate streaming
- 23:32Video.js player implementation
- 26:23Poster thumbnails and offsets
- 27:50Vertical video interfaces
- 31:00Summary and key takeaways
related talks
14mHigh-quality, performant images & videos on your React website (and some AI magic!)
43mModern Streaming Video for the Jamstack
20mA 4-Year Retrospective : Lessons Learned from Building a Video Player from Scratch with React Native
39mBuild a kick-🍑 video player
42mHow Video Works: A Dive into the Biggest Thing on the Internet & Why You Should Care
19mUser-friendly video playback on the web
23mCreating Videos Programmatically in React
30mOther browser APIs that are going to change video on the web