Giới thiệu

Bạn có bao giờ tự hỏi YouTube cho phép bạn tải video và xem offline như thế nào không? Không chỉ đơn thuần là lưu một tệp lên thiết bị của bạn, YouTube sử dụng một cơ chế tinh vi bao gồm HLS streaming, IndexedDB và Uint8Array để xử lý dữ liệu nhị phân. Hãy cùng khám phá những điều kỳ diệu kỹ thuật phía sau tính năng này! 🚀

Hiểu về HLS Streaming

Nhiều video trên internet sử dụng HTTP Live Streaming (HLS) để cung cấp nội dung video một cách hiệu quả. Khác với tải xuống truyền thống, HLS chia video thành các đoạn .ts nhỏ và cung cấp một tệp manifest (.m3u8) để hướng dẫn phát lại. Cách tiếp cận này cho phép:

• Streaming thích ứng, nơi chất lượng video điều chỉnh dựa trên tốc độ mạng.
• Tải hiệu quả, vì chỉ những đoạn cần thiết được lấy về, giảm thiểu sử dụng băng thông.
• Tìm kiếm mượt mà, do các đoạn video riêng biệt, cho phép tua nhanh mà không cần tải toàn bộ video.

Ví dụ: Tệp manifest HLS (.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

💡 Bây giờ chúng ta đã hiểu YouTube stream video như thế nào, vậy nó lưu trữ video ở đâu để xem offline?

YouTube Lưu Trữ Video Tải Xuống Ở Đâu? IndexedDB

Khi bạn tải video trên YouTube, nó không được lưu dưới dạng tệp .mp4 đơn giản. Thay vào đó, YouTube sử dụng IndexedDB, một cơ sở dữ liệu được tích hợp sẵn trong trình duyệt, để lưu trữ dữ liệu video một cách hiệu quả. Dưới đây là lý do tại sao:

• IndexedDB cho phép lưu trữ các tệp nhị phân lớn, rất phù hợp cho các đoạn video.
• Nó hỗ trợ lưu trữ dữ liệu có cấu trúc, giúp quản lý metadata của video, độ phân giải và vị trí phát lại.
• Khác với localStorage hoặc sessionStorage, IndexedDB không có giới hạn kích thước nghiêm ngặt, khiến nó phù hợp cho cache video offline.

Ví dụ: Lưu trữ các đoạn video trong IndexedDB

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

💡 Tuyệt vời! Bây giờ chúng ta đã biết dữ liệu được lưu trữ ở đâu. Nhưng định dạng nào YouTube sử dụng để lưu các đoạn video này?

Uint8Array: Xử Lý Dữ Liệu Video trong Trình Duyệt

Thay vì lưu trữ video dưới dạng tệp, YouTube lưu chúng dưới dạng Uint8Array, một mảng kiểu đặc biệt trong JavaScript được thiết kế để xử lý dữ liệu nhị phân thô. Tại sao lại là Uint8Array?

• Lưu trữ gọn gàng và hiệu quả: Lưu video dưới dạng chuỗi byte mà không có overhead không cần thiết.
• Truy cập và xử lý nhanh: Cho phép truy cập và xử lý nhanh trước khi phát lại.
• Lý tưởng cho streaming: Hoạt động tốt với Media Source Extensions (MSE) để tái tạo video một cách động.

Ví dụ: Chuyển đổi một Blob thành Uint8Array

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

💡 Bây giờ YouTube đã tải dữ liệu video, làm thế nào để nó thực sự phát video từ IndexedDB?

Tải và Phát Video từ Uint8Array sử dụng mux.js

Mặc dù tôi không biết YouTube phát video offline như thế nào, nhưng tôi sử dụng mux.js, một thư viện JavaScript được thiết kế để làm việc với các định dạng container media như MP4 và TS, để tái tạo và phát video đã lưu. Đây là cách nó hoạt động:

🔗 Xem trên GitHub: mux.js

1. Lấy dữ liệu video đã lưu trữ: YouTube lấy các đoạn Uint8Array từ IndexedDB.
2. Đóng gói lại bằng mux.js: Dữ liệu được trích xuất được chuyển đổi thành định dạng MP4 có thể phát lại.
3. Phát tới trình phát video HTML5:
   • Sử dụng Media Source Extensions (MSE) để thêm các đoạn video đã xử lý.
   • Thẻ <video> tải và phát video đã tái tạo một cách động.

Ví dụ: Phát video từ Uint8Array với 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();
  });

💡 Chúng ta đã hoàn thành hành trình từ việc tải video đến phát lại offline! 🎬

Thư Viện của Tôi Hỗ Trợ Tải Xuống và Phát Offline

Để giúp các nhà phát triển triển khai một giải pháp video offline tương tự, tôi đã tạo ra một thư viện có tên là hls-downloader. Thư viện này giúp bạn dễ dàng tải xuống các đoạn video HLS và lưu trữ chúng để phát lại offline.

🔗 Xem trên GitHub: hls-downloader

🔗 Xem trên NPM: hls-downloader

Với thư viện này, bạn có thể tải xuống hiệu quả các luồng HLS, lưu trữ chúng trong IndexedDB và phát lại một cách liền mạch.

Kết luận: Điều Kỳ Diệu Phía Sau Chế Độ Offline Của YouTube

Phát video offline của YouTube phụ thuộc vào sự kết hợp của HLS streaming, IndexedDB để lưu trữ và Uint8Array để xử lý nhị phân hiệu quả. Mỗi thành phần này đóng một vai trò quan trọng trong việc đảm bảo trải nghiệm video offline mượt mà và chất lượng cao.

Hiểu quy trình này có thể giúp các nhà phát triển tạo ra các ứng dụng video offline tương tự hoặc tối ưu hóa phát video trên web.

🚀 Bạn có muốn xây dựng điều gì đó tương tự không? Hãy khám phá những công nghệ này và bắt đầu thử nghiệm!