MediaSource: addSourceBuffer() method

Khả dụng hạn chế

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Note: This feature is available in Dedicated Web Workers.

Phương thức addSourceBuffer() của giao diện MediaSource tạo một SourceBuffer mới với MIME type đã cho và thêm nó vào danh sách sourceBuffers của MediaSource. SourceBuffer mới cũng được trả về.

Cú pháp

js
addSourceBuffer(mimeType)

Tham số

mimeType

Một chuỗi chỉ định MIME type của SourceBuffer cần tạo và thêm vào MediaSource.

Giá trị trả về

Một đối tượng SourceBuffer đại diện cho source buffer mới đã được tạo và thêm vào media source.

Ngoại lệ

InvalidAccessError DOMException

Ném ra nếu giá trị chỉ định cho mimeType là một chuỗi rỗng thay vì một MIME type hợp lệ.

InvalidStateError DOMException

Ném ra nếu MediaSource không ở trạng thái "open" readyState.

NotSupportedError DOMException

Ném ra nếu mimeType được chỉ định không được user agent hỗ trợ, hoặc không tương thích với các MIME type của các đối tượng SourceBuffer khác đã có trong danh sách sourceBuffers của media source.

QuotaExceededError

Ném ra nếu tác nhân người dùng không thể xử lý thêm đối tượng SourceBuffer, hoặc việc tạo SourceBuffer mới với mimeType đã cho sẽ dẫn đến một cấu hình SourceBuffer không được hỗ trợ.

Ví dụ

Đoạn code sau từ một ví dụ do Nick Desaulniers viết (xem demo trực tiếp đầy đủ, hoặc tải mã nguồn xuống để xem kỹ hơn). Hàm getMediaSource(), không được định nghĩa ở đây, trả về một MediaSource.

js
const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
const mediaSource = getMediaSource();

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
  console.log(mediaSource.readyState); // closed
  mediaSource.addEventListener("sourceopen", sourceOpen);
  video.src = URL.createObjectURL(mediaSource);
} else {
  console.error("Unsupported MIME type or codec: ", mimeCodec);
}

function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  fetchAB(assetURL, (buf) => {
    sourceBuffer.addEventListener("updateend", () => {
      mediaSource.endOfStream();
      video.play();
      console.log(mediaSource.readyState); // ended
    });
    sourceBuffer.appendBuffer(buf);
  });
}

Thông số kỹ thuật

Thông số kỹ thuật
Media Source Extensions™
# dom-mediasource-addsourcebuffer

Tương thích trình duyệt

Xem thêm