Published on

How YouTube Downloads Videos and Plays Them Offline

Authors
  • avatar
    Name
    Hieu Cao
    Twitter

Introduction

Have you ever wondered how YouTube allows you to download videos and watch them offline? It's not just about saving a file to your device. YouTube employs a sophisticated mechanism involving HLS streaming, IndexedDB storage, Uint8Array for binary handling, and mux.js for video reconstruction. Let’s dive into the technical magic behind this feature! 🚀

Understanding HLS Streaming: The Backbone of YouTube Videos

YouTube uses HTTP Live Streaming (HLS) to deliver video content efficiently. Unlike traditional downloads, HLS breaks videos into small .ts segments and provides a manifest file (.m3u8) that guides playback. This approach allows for:

  • Adaptive streaming, where video quality adjusts based on network speed.
  • Efficient loading, as only required segments are fetched, reducing bandwidth usage.
  • Smooth seeking, since video chunks are separate, allowing fast-forwarding without preloading the entire video.

Example: HLS manifest file (.m3u8)

#EXTM3U
#EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360
video_360p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=1400000,RESOLUTION=1280x720
video_720p.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2800000,RESOLUTION=1920x1080
video_1080p.m3u8

💡 Now that we understand how YouTube streams videos, where does it store them for offline viewing?

Where Does YouTube Store Downloaded Videos? IndexedDB

When you download a video on YouTube, it doesn’t get saved as a simple .mp4 file. Instead, YouTube uses IndexedDB, a built-in browser database, to store video data efficiently. Here's why:

  • IndexedDB allows storage of large binary files, making it perfect for video chunks.
  • It supports structured data storage, which helps manage video metadata, resolutions, and playback positions.
  • Unlike localStorage or sessionStorage, IndexedDB has no strict size limitations, making it suitable for offline video caching.

Example: Storing video chunks in IndexedDB

const request = indexedDB.open("YouTubeCache", 1);
request.onupgradeneeded = event => {
  const db = event.target.result;
  db.createObjectStore("videos", { keyPath: "id" });
};

💡 Great! Now we know where the data is stored. But what format does YouTube use to save these video segments?

Uint8Array: Handling Video Data in the Browser

Instead of saving video files as-is, YouTube stores them as Uint8Array, a special typed array in JavaScript designed for handling raw binary data. Why Uint8Array?

  • Compact and efficient storage: Stores video as byte sequences without unnecessary overhead.
  • Fast retrieval and manipulation: Allows quick access and processing before playback.
  • Ideal for streaming: Works well with Media Source Extensions (MSE) to reconstruct videos dynamically.

Example: Converting a Blob to Uint8Array

fetch("video-segment.ts")
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const uint8Array = new Uint8Array(buffer);
    console.log("Video chunk as Uint8Array:", uint8Array);
  });

💡 Now that YouTube has downloaded the video data, how does it actually play the video from IndexedDB?

Loading and Playing Video from Uint8Array using mux.js

I don't know how YouTube plays videos offline, but I uses mux.js, a JavaScript library designed for working with media container formats like MP4 and TS, to reconstruct and play stored videos. Here's how it works:

🔗 Check it out on GitHub: mux.js

  1. Retrieving stored video data: YouTube fetches Uint8Array chunks from IndexedDB.
  2. Repackaging with mux.js: The extracted data is converted into a playable MP4 format.
  3. Streaming to HTML5 video player:
    • Uses Media Source Extensions (MSE) to append processed video chunks.
    • The <video> tag dynamically loads and plays the reconstructed video.

Example: Playing a video from Uint8Array with mux.js

const muxjs = require("mux.js");
const transmuxer = new muxjs.mp4.Transmuxer();

fetch("video-segment.ts")
  .then(response => response.arrayBuffer())
  .then(buffer => {
    transmuxer.push(new Uint8Array(buffer));
    transmuxer.flush();
  });

💡 We’ve now completed the journey from downloading a video to playing it back offline! 🎬

My Library for Supporting Download and Offline Playback

To help developers implement a similar offline video solution, I created a library called hls-downloader. This library makes it easy to download HLS video segments and store them for offline playback.

🔗 Check it out on GitHub: hls-downloader

🔗 Check it out on NPM: hls-downloader

With this library, you can efficiently download HLS streams, store them in IndexedDB, and play them back seamlessly.

Conclusion: The Magic Behind YouTube’s Offline Mode

YouTube’s offline video playback relies on a combination of HLS streaming, IndexedDB for storage, Uint8Array for efficient binary handling, and mux.js for video reconstruction. Each of these components plays a crucial role in ensuring smooth, high-quality offline video experiences.

Understanding this process can help developers create similar offline video applications or optimize video playback on the web.

🚀 Inspired to build something similar? Dive into these technologies and start experimenting!