Demo 10: Adaptive Streaming | Web Video Lesson

What is Adaptive Streaming?

Adaptive streaming automatically adjusts video quality based on the user's network conditions. Instead of one large file, the video is split into small segments at multiple quality levels.

Benefits:

Faster initial playback (starts with lower quality)
Automatic quality adjustment as connection improves/degrades
Better experience on mobile networks
Reduced buffering

HLS (HTTP Live Streaming)

Developed by Apple, HLS is the most widely supported adaptive streaming format. It uses .m3u8 playlist files that reference video segments.

        // Native HLS support in Safari
<video controls>
  <source src="video.m3u8" type="application/x-mpegURL" />
</video>

// For other browsers, use hls.js library
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
  const video = document.getElementById('video');
  const hlsUrl = 'https://example.com/video.m3u8';

  if (Hls.isSupported()) {
    const hls = new Hls();
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Native HLS support (Safari)
    video.src = hlsUrl;
  }
</script>
      

DASH (Dynamic Adaptive Streaming over HTTP)

An open standard alternative to HLS, DASH uses .mpd manifest files.

        // Using dash.js library
<script src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
<script>
  const player = dashjs.MediaPlayer().create();
  player.initialize(
    document.querySelector('video'),
    'https://example.com/video.mpd',
    true
  );
</script>
      

When to Use Adaptive Streaming

Use adaptive streaming for:

Videos longer than 2-3 minutes
Users on varying network conditions
High-quality content (1080p+)
Live streaming scenarios

Don't use for: Short videos (<30s), hero backgrounds, or when file size is already optimized.