Thông tin cơ bản về phát trực tuyến nội dung nghe nhìn

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

Trong bài viết này, bạn sẽ tìm hiểu về khái niệm nâng cao hơn về phát trực tuyến nội dung nghe nhìn. Sau cùng, bạn nên hiểu rõ các trường hợp sử dụng, giao thức và tiện ích phát trực tuyến khác nhau. Hãy bắt đầu bằng việc giải thích khái niệm truyền trực tuyến thực sự.

Phát trực tuyến nội dung nghe nhìn là một cách phân phối và phát lại từng nội dung nghe nhìn. Thay vì tải một tệp đơn lẻ (có thể bị chậm nếu không được tối ưu hoá cho mạng), trình phát đọc một tệp kê khai mô tả cách nội dung nghe nhìn mục tiêu được chia thành các phần dữ liệu riêng lẻ. Các đoạn nội dung đa phương tiện sau đó được tự động ghép lại với nhau trong thời gian chạy – có thể là ở các tốc độ bit khác nhau mà bạn sẽ tìm hiểu sau.

Xin lưu ý rằng để cung cấp tính năng truyền trực tuyến trên trang web của bạn, máy chủ phải hỗ trợ tiêu đề của yêu cầu HTTP Phạm vi. Tìm hiểu thêm về tiêu đề Accept-Ranges trong bài viết Các thẻ <video> và <source>.

Các trường hợp sử dụng tính năng phát trực tuyến

Việc tạo các đoạn nội dung đa phương tiện và các tệp kê khai cần thiết mô tả luồng là không chính xác đơn giản, nhưng việc truyền trực tuyến mở ra một số trường hợp sử dụng thú vị không thể đạt được chỉ bằng cách trỏ một phần tử <video> đến một tập hợp các tệp nguồn tĩnh. Bạn sẽ tìm hiểu thêm về cách thêm nội dung nghe nhìn vào trang web trong phần sau. Trước tiên, bạn nên biết một số trường hợp sử dụng khi truyền trực tuyến nội dung đa phương tiện nếu bạn muốn làm những việc khác thay vì chỉ tải nhiều tệp vào phần tử <video>.

  • Phát trực tuyến thích ứng là nơi các đoạn nội dung đa phương tiện được mã hoá thành nhiều tốc độ bit và đoạn nội dung nghe nhìn chất lượng cao nhất phù hợp với băng thông hiện có của ứng dụng sẽ được trả về trình phát nội dung đa phương tiện.
  • Phát trực tiếp là nơi các đoạn nội dung đa phương tiện được mã hoá và cung cấp theo thời gian thực.
  • Chèn nội dung nghe nhìn là trường hợp các nội dung nghe nhìn khác như quảng cáo được chèn vào luồng mà trình phát không phải thay đổi nguồn nội dung nghe nhìn.

Giao thức phát trực tuyến

Hai giao thức truyền trực tuyến phổ biến nhất trên web là Phát thích ứng động qua HTTP (DASH) và Phát trực tiếp qua HTTP (HLS). Trình phát hỗ trợ các giao thức này sẽ tìm nạp tệp kê khai đã tạo, tìm ra đoạn nội dung đa phương tiện cần yêu cầu, sau đó kết hợp các đoạn đó vào trải nghiệm nội dung đa phương tiện cuối cùng.

Sử dụng <video> để phát luồng

Nhiều trình duyệt sẽ không phát sự kiện trực tiếp của bạn như bình thường. Mặc dù có một số chức năng hỗ trợ chế độ phát HLS gốc, nhưng các trình duyệt thường không hỗ trợ tính năng phát trực tuyến DASH gốc. Điều này có nghĩa là việc chỉ trỏ <source> trong phần tử <video> đến một tệp kê khai là chưa đủ.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

Những gì tưởng chừng là thâm hụt lại là một điểm mạnh của sự nguỵ trang. Luồng có sức mạnh và các ứng dụng sử dụng luồng có những nhu cầu khác nhau.

Tệp kê khai thường mô tả nhiều biến thể của nội dung nghe nhìn duy nhất. Hãy nghĩ đến nhiều tốc độ bit, nhiều bản âm thanh và thậm chí là cùng một nội dung nghe nhìn được mã hoá ở nhiều định dạng.

Một số ứng dụng có thể muốn giữ một lượng lớn video hơn trong vùng đệm, các ứng dụng khác có thể muốn tìm nạp trước vài giây đầu tiên của video từ tập sắp tới và một số ứng dụng muốn triển khai logic riêng để truyền phát thích ứng. Đây là nơi bạn muốn có một số loại tính năng trình duyệt tích hợp sẵn để tạo luồng nội dung nghe nhìn để phát lại và có một tính năng như vậy.

Tiện ích nguồn phương tiện

Rất may là W3C đã xác định một thứ có tên là Tiện ích nguồn nội dung nghe nhìn (MSE) để cho phép JavaScript tạo luồng nội dung nghe nhìn. Tóm lại, MSE cho phép nhà phát triển đính kèm một đối tượng MediaSource vào phần tử <video> và cho phép đối tượng này phát lại mọi dữ liệu nội dung nghe nhìn được đưa vào các vùng đệm đính kèm với thực thể MediaSource.

Ví dụ cơ bản

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

Ví dụ đơn giản ở trên minh hoạ một vài điều:

  • Theo <video>, nó đang nhận dữ liệu đa phương tiện qua một URL.
  • URL được tạo chỉ là một con trỏ đến một thực thể MediaSource.
  • Thực thể MediaSource tạo một hoặc nhiều thực thể SourceBuffer.
  • Sau đó, chúng ta chỉ cần thêm dữ liệu đa phương tiện nhị phân vào vùng đệm, ví dụ: sử dụng fetch.

Mặc dù các khái niệm cơ bản này rất đơn giản và chắc chắn bạn có thể viết một trình phát video tương thích với DASH và HLS từ đầu, nhưng hầu hết mọi người thường chọn một trong các giải pháp nguồn mở hoàn thiện đã có sẵn, chẳng hạn như Shaka Player, JW Player hoặc Video.js.

Tuy nhiên, chúng tôi đã tạo một PWA đa phương tiện minh hoạ có tên Kino để minh hoạ cách bạn sẽ phát triển trang web phát trực tuyến nội dung đa phương tiện cơ bản của riêng mình, giúp phát nội dung nghe nhìn ngoại tuyến chỉ bằng phần tử <video> đơn giản. Trong lộ trình của chúng tôi, chúng tôi có kế hoạch hỗ trợ các khung và quản lý quyền kỹ thuật số, cùng nhiều tính năng khác. Vì vậy, hãy thỉnh thoảng kiểm tra lại để biết bản cập nhật hoặc yêu cầu một tính năng. Đọc thêm về vấn đề này trong bài viết PWA có tính năng phát trực tuyến khi không có mạng.

Định dạng phân đoạn nội dung nghe nhìn

Trong một thời gian dài, DASH và HLS yêu cầu các đoạn nội dung đa phương tiện phải được mã hoá ở nhiều định dạng. Tuy nhiên, vào năm 2016, chúng tôi đã thêm chức năng hỗ trợ cho các tệp MP4 bị phân mảnh (fMP4) tiêu chuẩn vào HLS, một định dạng mà DASH cũng hỗ trợ.

Các đoạn video sử dụng vùng chứa fMP4 và bộ mã hoá và giải mã H.264 được cả hai giao thức này hỗ trợ và phần lớn người chơi có thể phát được. Việc này cho phép các nhà sản xuất nội dung mã hoá video chỉ một lần, nhờ đó tiết kiệm thời gian và dung lượng ổ đĩa.

Để đạt được chất lượng tốt hơn và kích thước tệp thấp hơn, bạn nên chọn mã hoá một số tập hợp phần nội dung nghe nhìn bằng các định dạng hiệu quả hơn như VP9, mặc dù trước khi chúng ta tìm hiểu kỹ hơn, trước tiên, bạn cần tìm hiểu cách Chuẩn bị tệp nội dung nghe nhìn cho web và bước tiếp theo sẽ học ở phần tiếp theo.