Trong bài viết này, bạn sẽ tìm hiểu về các khái niệm nâng cao hơn về việc phát trực tuyến nội dung đa phương tiện và cuối cùng, bạn nên nắm 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 phần giải thích về định nghĩa thực sự của tính năng phát trực tuyến.
Phát trực tuyến nội dung nghe nhìn là 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, việc này có thể bị chậm nếu không được tối ưu hoá cho mạng, người chơi đọ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 phân đ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à ở nhiều 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, máy chủ phải hỗ trợ tiêu đề yêu cầu HTTP Range (Phạm vi). Tìm hiểu thêm về tiêu đề Accept-Ranges trong bài viết 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à tệp kê khai cần thiết mô tả luồng không chính xác đơn giản, nhưng việc truyền trực tuyến sẽ mở khoá một số trường hợp sử dụng thú vị không thể đạt được chỉ bằng cách trỏ 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 ở phần sau. Trước tiên, bạn nên biết về một số trường hợp sử dụng để truyền trực tuyến nội dung đa phương tiện nếu bạn muốn tiến xa hơn ngoài việc 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 phân đoạn nội dung nghe nhìn được mã hoá theo nhiều tốc độ bit và phân đoạn nội dung nghe nhìn có 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 nghe nhìn.
- Phát sóng trực tiếp là nơi các phân đoạn nội dung nghe nhì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 đưa vào một luồng mà trình phát không phải thay đổi nguồn nội dung nghe nhìn.
Giao thức truyền trực tuyến
Hai giao thức truyền trực tuyến thường dùng nhất trên web là Truyền phát thích ứng động qua HTTP (DASH) và Phát trực tuyến 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 được tạo, tìm ra các đoạn nội dung nghe nhì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 hoàn thiện.
Sử dụng <video> để phát sự kiện phát trực tiếp
Nhiều trình duyệt sẽ không phát trực tiếp của bạn một cách tự nhiên. Mặc dù có một số hỗ trợ phát trực tiếp HLS, nhưng các trình duyệt thường không hỗ trợ phát trực tuyến DASH gốc. Điều này có nghĩa là thường thì 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>
Điều có vẻ như là sự thiếu hụt thực ra lại là thế mạnh của sự nguỵ trang. Luồng rất mạnh mẽ và các ứng dụng sử dụng luồng sẽ có những nhu cầu khác nhau.
Tệp kê khai thường mô tả nhiều biến thể của một nội dung nghe nhìn. Hãy nghĩ rằng sẽ có nhiều bit tốc độ, một số 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 muốn giữ một lượng video lớn hơn trong vùng đệm, những ứ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 của tập sắp tới và một số muốn triển khai logic của riêng chúng cho tính năng phát trực tuyến 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 cho mục đích phát lại, và đúng là bạn sẽ có một luồng như vậy.
Tiện ích nguồn nội dung nghe nhìn
Rất may, W3C đã xác định một hàm có tên là Tiện ích nguồn nội dung đa phương tiện (MSE) để cho phép JavaScript tạo các luồng nội dung đa phương tiện của chúng tôi. Tóm lại, MSE cho phép nhà phát triển đính kèm đối tượng MediaSource vào phần tử <video> và yêu cầu phát lại bất kỳ dữ liệu nội dung nghe nhìn nào được bơm vào vùng đệm 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 như trường hợp của
<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 thực thể
MediaSource. - Thực thể
MediaSourcetạo một hoặc nhiều thực thểSourceBuffer. - Sau đó, chúng ta chỉ cần nối 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 có thể viế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 những giải pháp nguồn mở hoàn thiện đã tồn tại, chẳng hạn như Shaka Player, JW Player 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 sẽ tiến hành việc phát triển trang web đa phương tiện phát trực tuyến cơ bản của riêng mình, có khả năng phát nội dung nghe nhìn ngoại tuyến chỉ bằng phần tử <video> đơn giản. Chúng tôi cũng có kế hoạch trong lộ trình hỗ trợ các khung và hoạt động quản lý quyền kỹ thuật số, cùng với nhiều tính năng khác. Vì vậy, hãy thỉnh thoảng kiểm tra lại để biết thông tin cập nhật hoặc yêu cầu tính năng.
Hãy đọc thêm về vấn đề này trong bài viết PWA với tính năng phát trực tuyến ngoại tuyến.
Đị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 phân đoạn nội dung nghe nhìn phải được mã hoá ở nhiều định dạng. Tuy nhiên, trong năm 2016, chúng tôi đã hỗ trợ các tệp MP4 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 hỗ trợ và phần lớn người chơi có thể phát được. Điều này cho phép 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ố nhóm phân đoạ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 tiếp tục, 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. Bước tiếp theo là