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ề việc truyền phát nội dung đa phương tiện và cuối cùng sẽ hiểu rõ về nhiều trường hợp sử dụng, giao thức và tiện ích truyền phát. Trước tiên, hãy cùng tìm hiểu định nghĩa về tính năng phát trực tuyến.
Truyền phát nội dung đa phương tiện là một cách phân phối và phát lại nội dung đa phương tiện từng phần. Thay vì tải một tệp duy nhất (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 được phân tách thành các phần dữ liệu riêng lẻ. Sau đó, các đoạn nội dung đa phương tiện sẽ được nối lại với nhau một cách linh động trong thời gian chạy – có thể ở 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 phát trực tuyến trên trang web, máy chủ phải hỗ trợ tiêu đề yêu cầu HTTP Range (Dải ô). 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 phát trực tuyến
Việc tạo các đoạn nội dung nghe nhìn và tệp kê khai cần thiết mô tả luồng không hoàn toàn đơn giản, nhưng tính năng truyền trực tuyến mở ra một số trường hợp sử dụng thú vị mà bạn không thể đạt được chỉ bằng cách trỏ phần tử <video> đến một tập hợp 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 một số trường hợp sử dụng để truyền phát nội dung đa phương tiện nếu muốn làm được nhiều việc hơn là chỉ tải nhiều tệp vào phần tử <video>.
- Phương thức truyền trực tuyến thích ứng là phương thức mà các đoạn nội dung nghe nhìn được mã hoá ở một số 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 nghe nhìn.
- Phát sóng trực tiếp là nơi các đ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à khi nội dung nghe nhìn khác như quảng cáo được chèn vào một luồng mà người chơi 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 được sử dụng phổ biến nhất trên web là Truyền phát thích ứng động qua HTTP (DASH) và Phát trực tuyến dựa trê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 đã tạo, tìm ra những đ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 trực tiếp luồng của bạn. Mặc dù có một số tính năng hỗ trợ gốc cho việc phát HLS, nhưng 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à thường thì bạn không chỉ cần trỏ <source> trong phần tử <video> đến tệp kê khai.
<video controls>
<source src="manifest.mpd" type="application/dash+xml">
</video>
Điều có vẻ như là một điểm yếu lại thực sự là một điểm mạnh ẩn giấu. Luồng dữ liệu rất mạnh mẽ và các ứng dụng sử dụng luồng dữ liệu có 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ĩ đến các tốc độ bit khác nhau, một số bản âm thanh và thậm chí là cùng một nội dung đa phương tiện được mã hoá ở các định dạng khác nhau.
Một số ứng dụng có thể muốn giữ nhiều video hơn trong vùng đệm, một số ứ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 trong một tập sắp tới và một số ứng dụng muốn triển khai logic riêng để truyền trực tuyến thích ứng. Đây là nơi bạn muốn có một số tính năng tích hợp sẵn của trình duyệt để tạo luồng nội dung đa phương tiện để phát. Và tình cờ là có một tính năng như vậy.
Tiện ích nguồn nội dung nghe nhìn
Rất may, W3C đã xác định một khái niệm có tên là Tiện ích nguồn nội dung đa phương tiện (MSE). Khái niệm này sẽ cho phép JavaScript tạo luồng nội dung đa phương tiện. 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à phát lại mọi dữ liệu đa phương tiện được đưa vào 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 số điều:
- Đối với
<video>, lớp này đang nhận dữ liệu phương tiện từ một URL. - URL được tạo chỉ là con trỏ đến một 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 thêm dữ liệu phương tiện nhị phân vào bộ đệ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à bạn chắc chắ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ở đã 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 là Kino. PWA này minh hoạ cách bạn phát triển trang web nội dung đa phương tiện trực tuyến cơ bản của riêng mình, cung cấp tính năng phát nội dung đa phương tiện ngoại tuyến chỉ bằng cách sử dụng phần tử <video> đơn giản. Chúng tôi có kế hoạch hỗ trợ các khung và công nghệ quản lý quyền kỹ thuật số, cùng nhiều tính năng khác trong lộ trình phát triển. 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 một tính năng.
Hãy đọc thêm về tính năng này trong bài viết PWA có tính năng phát trực tuyến ngoại tuyến.
Định dạng đoạn nội dung đa phương tiện
Trong một thời gian dài, DASH và HLS yêu cầu các đoạn nội dung nghe nhìn phải được mã hoá theo nhiều định dạng. Tuy nhiên, vào năm 2016, tính năng hỗ trợ các tệp MP4 phân đoạn (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 cả hai giao thức hỗ trợ và hầu hết trình phát đều có thể phát. Nhờ đó, nhà sản xuất nội dung chỉ cần mã hoá video một lần, giúp 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 nhỏ hơn, bạn nên chọn mã hoá một số nhóm đoạn nội dung nghe nhìn bằng các định dạng hiệu quả hơn như VP9. Tuy nhiên, trước khi đi sâu vào vấn đề này, 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. Chúng ta sẽ tìm hiểu về vấn đề này trong phần tiếp theo.