Astro Video Demo with ImageKit
This demo showcases different approaches to adding video to your Astro site using ImageKit for video hosting and optimization.
1. Basic HTML5 Video
The simplest approach - just a native HTML5 video element. Zero JavaScript shipped to the client.
2. Reusable Video Component
A reusable Astro component with configurable props. Still zero JavaScript - it's pre-rendered at build time.
3. Video.js Player
Advanced playback with Video.js - custom controls, playback speed options, and more. JavaScript is only loaded when this component is used.
4. Adaptive Bitrate Streaming
HLS streaming with multiple quality levels. The player automatically adjusts quality based on network conditions.
5. Lazy Loading Video
Shows a thumbnail with a play button. The video only loads when clicked - perfect for pages with multiple videos.
6. ImageKit Transformations
Examples of on-the-fly video transformations:
Resized Video (320x180)
Auto Format Selection
Using ?tr=f-auto lets ImageKit choose the best format
(WebM for modern browsers, MP4 for others).