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ề truyền thông và rốt cuộc là hiểu rõ về các trường hợp sử dụng, giao thức và tiện ích phát trực tuyến. Hãy bắt đầu bằng một giải thích khái niệm phát trực tiếp.

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 nội dung nghe nhìn bằng cách của bạn. Thay vì tải một tệp đơn lẻ, tệp này có thể bị chậm nếu không được tối ưu hoá cho mạng, trình phát sẽ đọc một tệp kê khai mô tả cách nội dung nghe nhìn mục tiêu 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 ghép động 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 phát trực tuyến trên trang web của bạn, máy chủ phải hỗ trợ tiêu đề yêu cầu HTTP Phạm vi. Tìm hiểu thêm về Accept-Ranges tiêu đề trong The <video> và <source> thẻ.

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 không được đơn giản, nhưng việc phát trực tuyến giúp bạn khai thác một số trường hợp sử dụng thú vị không thể thực hiện được chỉ bằng cách trỏ đến phần tử <video> thành 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 một trang web trong phần sau. Trước tiên, bạn nên biết về một một số trường hợp sử dụng cho việc phát trực tuyến nội dung đa phương tiện nếu bạn muốn tiến xa hơn là tải nhiều tệp vào phần tử <video>.

  • Luồng thích ứng là nơi các đoạn nội dung nghe nhìn được mã hoá theo và đoạn nội dung đa phương tiện có chất lượng cao nhất phù hợp với băng thông hiện có sẵn sẽ được trả về trình phát đ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 bằng theo thời gian thực.
  • Chèn nội dung nghe nhìn là nơi 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 được sử dụng phổ biến nhất trên web là Động Truyền phát thích ứng qua HTTP (DASH) và Phát trực tiếp qua HTTP (HLS). Những 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 các đoạn nội dung đa phương tiện cần yêu cầu, sau đó kết hợp chúng vào trải nghiệm nội dung đa phương tiện.

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ố hỗ trợ gốc cho chế độ phát HLS, các trình duyệt thường không hỗ trợ DASH gốc phát trực tuyến. Điều này có nghĩa là việc chỉ trỏ <source> là chưa đủ trong phần tử <video> vào một tệp kê khai.

<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 là mạnh mẽ 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. Suy nghĩ khác tốc độ bit, một số bản âm thanh và thậm chí cả cùng một nội dung nghe nhìn được mã hoá theo .

Một số ứng dụng có thể muốn giữ một lượng lớn video hơn trong vùng đệm, những người khác có thể muốn tìm nạp trước vài giây đầu tiên của video từ một tập podcast và một số người muốn triển khai logic riêng để phát trực tiếp thích ứng. Đây là nơi bạn sẽ 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à chỉ có vậy.

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

Rất may, W3C đã định nghĩa một thứ gọi là Tiện ích nguồn phương tiện (MSE) cho phép JavaScript tạo các luồng nội dung nghe nhìn của chúng tôi. Tóm lại, MSE cho phép đính kèm một đối tượng MediaSource vào phần tử <video> và nó phát lại bất kỳ dữ liệu phương tiện nào được bơm vào bộ đệm được gắn 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ụ: đang sử dụng fetch.

Mặc dù những 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 Trình phát video tương thích với DASH và HLS từ đầu, hầu hết mọi người thường chọn một trình phát giải pháp nguồn mở hoàn thiện đã tồn tại, chẳng hạn như Shaka Player, Trình phát JW hoặc Video.js, v.v.

Tuy nhiên, chúng tôi đã tạo một PWA đa phương tiện minh hoạ có tên là Kino để minh hoạ cách bạn hãy đề cập đến việc phát triển trang web truyền thông trực tuyến cơ bản của riêng bạn cung cấp để phát nội dung nghe nhìn khi không có mạng chỉ bằng phần tử <video> đơn giản. Có các gói trong lộ trình hỗ trợ các khuôn khổ và hoạt động quản lý quyền kỹ thuật số, cùng với các tính năng AI mới. 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á thành nhiều đoạn . Tuy nhiên, trong năm 2016, hệ thống sẽ hỗ trợ các tệp MP4 bị phân mảnh (fMP4) tiêu chuẩn đã được thêm 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 hỗ trợ theo cả hai giao thức và có thể chơi được bởi phần lớn người chơi. Điều này cho phép nhà sản xuất nội dung chỉ mã hoá video của họ 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 có thể chọn mã hoá một số tập hợp phần nội dung đa phương tiện bằng các định dạng hiệu quả hơn như VP9, mặc dù trước khi chúng ta có thể tiến xa hơn nữa, trước tiên, bạn cần tìm hiểu cách Chuẩn bị các tệp nội dung nghe nhìn để tải lên web và phần tiếp theo là tính năng đó.