Video Optimization Demo Project

This project demonstrates several key strategies for optimizing video delivery on websites and applications, focusing on better User Experience (UX), smoother streaming, and reduced data transfer costs.

It serves as a checklist and guide for approaching video optimization, particularly since dedicated video streaming performance audits are not covered in tools like Lighthouse.

The repository provides three components to play videos. HTML5Video uses a simple HTML5 Video tag, ImageKitVideo uses the ImageKit Video component for optimizations and transformations on videos, HLSVideoPlayer uses hls.js with ImageKit's Video API's Adaptive Bitrate Streaming transformation for HLS streaming. Each component has different options such as autoplay, muted, transformations, play, pause etc. to optimize video streaming.

Checklist for Video optimization

---

1. Use a Content Delivery Network (CDN)

A CDN is the starting point for any optimized delivery strategy.

2. Load Lighter Videos

Use ImageKit Video API to automatically compress the video and transcode it to modern formats like WebM and codecs like VP9, AV1.

3. Lower Video Resolution

Don't load Full HD videos in smaller placeholders.

4. Remove Audio (When Possible)

Employ an aggressive optimization strategy by removing the audio track if the video does not need any sound, such as a background video.

5. Implement Adaptive Bitrate Streaming (ABS)

ABS dynamically changes the video quality based on the player size and network conditions, which is crucial for balancing UX and business costs.

• Provide different resolutions (e.g., 360p, 480p, 720p, 1080p, etc.) for different devices and network conditions.
• Ensure the adaptive streaming adapts to the player size as well. If the max resolution needed for visual clarity is 360p, there is no need to load a Full HD video, even if the network is great.

6. Evaluate Necessity of Adaptive Streamin

• Do you really need ABS? Only use it if your videos are long enough to benefit from the adaptation, typically more than three segments, or over 20s.
• Do you really need higher quality ever? For ex, background videos can often use lower resolution and bitrate without noticeable visual impact.

7. Autoplay vs. User Interaction

If business allows, using a thumbnail and waiting for user interaction consumes significantly lesser bandwidth.

8. Lazy Loading

• For autoplay videos, this defers loading until the user scrolls near it. An aggressive strategy can defer even the player script until user interaction.

9. Control Preload

• Limit how many seconds of video are buffered ahead to reduce unnecessary data download. This is controlled by HLS player settings or the HTML preload attribute.

10. Pause Videos

• Ensure the video pauses when scrolled out of view. If a video continues playing off-screen, it continues downloading data unnecessarily.

---