Media Source API – Tự động đảm bảo phát liền mạch các phân đoạn nội dung đa phương tiện theo thứ tự nối thêm

Sam Dutton

Các phần tử âm thanh và video HTML cho phép bạn tải, giải mã và phát nội dung đa phương tiện đơn giản bằng cách cung cấp URL src:

    <video src='foo.webm'></video>

Điều này hoạt động tốt trong các trường hợp sử dụng đơn giản, nhưng đối với các kỹ thuật như truyền trực tuyến thích ứng, Media Source Extensions API (MSE) cung cấp nhiều quyền kiểm soát hơn. MSE cho phép xây dựng các luồng bằng JavaScript từ các phân đoạn âm thanh hoặc video.

Bạn có thể dùng thử MSE tại simpl.info/mse:

Ảnh chụp màn hình video được phát lại bằng MSE API.

Đoạn mã dưới đây là từ ví dụ đó.

MediaSource đại diện cho nguồn nội dung nghe nhìn của một phần tử âm thanh hoặc video. Sau khi một đối tượng MediaSource được tạo thực thể và sự kiện open của đối tượng đó đã kích hoạt, bạn có thể thêm SourceBuffer vào đối tượng đó. Các đối tượng này đóng vai trò là vùng đệm cho các phân đoạn nội dung nghe nhìn:

var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
    var sourceBuffer =
        mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    // Get video segments and append them to sourceBuffer.
}

Các phân đoạn nội dung nghe nhìn được "phát trực tuyến" đến một phần tử âm thanh hoặc video bằng cách thêm từng phân đoạn vào SourceBuffer bằng appendBuffer(). Trong ví dụ này, video được tìm nạp từ máy chủ rồi lưu trữ bằng API Tệp:

reader.onload = function (e) {
    sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
    if (i === NUM_CHUNKS - 1) {
    mediaSource.endOfStream();
    } else {
    if (video.paused) {
        // start playing after first chunk is appended
        video.play();
    }
    readChunk(++i);
    }
};

Đặt thứ tự phát

Chrome 50 hỗ trợ thêm cho thuộc tính SourceBuffer mode, cho phép bạn chỉ định rằng các phân đoạn nội dung đa phương tiện sẽ được phát lại liên tục theo thứ tự được thêm vào, bất kể các phân đoạn nội dung đa phương tiện ban đầu có dấu thời gian không liên tục hay không.

Sử dụng thuộc tính mode để chỉ định thứ tự phát cho các phân đoạn nội dung nghe nhìn. Mã này có một trong hai giá trị:

  • phân đoạn: Dấu thời gian của từng phân đoạn (có thể đã được timestampOffset sửa đổi) xác định thứ tự phát, bất kể thứ tự thêm phân đoạn.
  • trình tự: Thứ tự của các phân khúc được lưu vào vùng đệm trong dòng thời gian của nội dung đa phương tiện được xác định theo thứ tự của các phân khúc được thêm vào SourceBuffer.

Nếu các phân đoạn nội dung nghe nhìn có dấu thời gian được phân tích cú pháp từ dữ liệu luồng byte khi được thêm vào SourceBuffer, thì thuộc tính mode của SourceBuffer sẽ được đặt thành segment. Nếu không, mode sẽ được đặt thành trình tự. Xin lưu ý rằng dấu thời gian là không bắt buộc: dấu thời gian phải có ở đó cho hầu hết các loại sự kiện phát trực tiếp và không được xuất hiện cho các loại sự kiện khác: dấu thời gian trong dải chỉ dành cho các loại sự kiện phát trực tiếp chứa dấu thời gian đó.

Bạn không bắt buộc phải đặt thuộc tính mode. Đối với những sự kiện phát trực tiếp không chứa dấu thời gian (audio/mpeg và audio/aac), bạn chỉ có thể thay đổi mode từ phân đoạn thành trình tự: sẽ xảy ra lỗi nếu bạn cố thay đổi mode từ trình tự thành phân đoạn. Đối với những luồng có dấu thời gian, bạn có thể chuyển đổi giữa phân đoạn và trình tự, mặc dù trong thực tế, cách đó có thể sẽ tạo ra hành vi không mong muốn, khó hiểu hoặc khó dự đoán.

Đối với tất cả các loại luồng, bạn có thể thay đổi giá trị từ phân đoạn thành trình tự. Tức là các đoạn sẽ được phát lại theo thứ tự thêm đoạn đó, kèm theo dấu thời gian mới được tạo tương ứng:

sourceBuffer.mode = 'sequence';

Việc có thể thiết lập giá trị mode thành trình tự sẽ đảm bảo nội dung nghe nhìn phát liên tục, bất kể dấu thời gian của đoạn nội dung đa phương tiện có gián đoạn hay không, chẳng hạn như khi video có sự cố kết hợp hoặc nếu (vì lý do bất kỳ) các đoạn không liên tục được thêm vào. Ứng dụng có thể dùng polyfill bằng timestampOffset để đảm bảo phát liên tục nếu có siêu dữ liệu luồng chính xác, nhưng chế độ trình tự giúp quá trình này đơn giản hơn và ít xảy ra lỗi hơn.

Ứng dụng và bản minh hoạ MSE

Các phần tử này cho thấy MSE trong thực tế, mặc dù không có thao tác SourceBuffer.mode:

Hỗ trợ trình duyệt

  • Chrome 50 trở lên theo mặc định
  • Đối với Firefox, hãy xem MDN để biết chi tiết

Thông số kỹ thuật

Thông tin về API