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 nghe nhìn chỉ bằng cách cung cấp URL src:

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

Cách 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ư phát trực tuyến thích ứng, API Tiện ích nguồn nội dung nghe nhìn (MSE) sẽ cung cấp nhiều quyền kiểm soát hơn. MSE cho phép xây dựng luồng bằng JavaScript từ các đ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 bằng API MSE.

Mã bên dưới là từ ví dụ đó.

MediaSource đại diện cho một nguồn nội dung nghe nhìn cho 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 vùng đệm 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 bổ sung tính năng hỗ trợ 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 nghe nhìn được phát liên tục, theo thứ tự được thêm vào, bất kể các phân đoạn nội dung nghe nhì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. Thuộc tính này có một trong hai giá trị:

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

Nếu các phân đoạn nội dung đa phương tiệ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 phân đoạn. Nếu không, mode sẽ được đặt thành trình tự. Xin lưu ý rằng dấu thời gian không phải là không bắt buộc: dấu thời gian phải có trong hầu hết các loại luồng và không được có trong các loại luồng khác: dấu thời gian trong băng tần là đặc trưng của các loại luồng 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 các luồng không chứa dấu thời gian (audio/mpeg và audio/aac), bạn chỉ có thể thay đổi mode từ segments (phân đoạn) thành sequence (trình tự): hệ thống sẽ báo lỗi nếu bạn cố gắng thay đổi mode từ sequence (trình tự) thành segments (phân đoạn). Đối với các 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ế, điều đó có thể 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 phân đoạn sẽ được phát lại theo thứ tự thêm vào và các dấu thời gian mới sẽ được tạo tương ứng:

sourceBuffer.mode = 'sequence';

Việc có thể đặt giá trị mode thành trình tự sẽ đảm bảo việc phát nội dung nghe nhìn liên tục, bất kể dấu thời gian của phân đoạn nội dung nghe nhìn có bị gián đoạn hay không — ví dụ: nếu có vấn đề với việc kết hợp video hoặc nếu (vì lý do gì) các phân đoạn không liên tục được thêm vào. Một ứng dụng có thể chèn polyfill bằng timestampOffset để đảm bảo phát liên tục nếu có siêu dữ liệu chính xác của luồng dữ liệu. Tuy nhiên, chế độ trình tự giúp quá trình này đơn giản hơn và ít gặp lỗi hơn.

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

Các mã này cho thấy MSE đang hoạt động, 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 API