SourceBuffer

Thuộc tính phiên bản

SourceBuffer.appendWindowEnd

Kiểm soát dấu thời gian ở cuối cửa sổ chắp thêm.

SourceBuffer.appendWindowStart

Kiểm soát dấu thời gian để bắt đầu nối thêm cửa sổ. Đây là phạm vi dấu thời gian có thể được sử dụng để lọc dữ liệu phương tiện nào được thêm vào SourceBuffer. Các khung phương tiện được mã hóa có dấu thời gian trong phạm vi này sẽ được thêm vào, trong khi những khung nằm ngoài phạm vi này sẽ bị lọc ra.

SourceBuffer.audioTracks Read only

Danh sách các bản âm thanh hiện có trong SourceBuffer.

SourceBuffer.buffered Read only

Trả về phạm vi thời gian hiện được lưu vào bộ đệm trong SourceBuffer.

SourceBuffer.mode

Kiểm soát cách xử lý thứ tự của các phân đoạn phương tiện trong SourceBuffer, về việc chúng có thể được thêm vào theo bất kỳ thứ tự nào hay chúng phải được giữ theo một trình tự nghiêm ngặt.

SourceBuffer.textTracks Read only Experimental

Danh sách các đoạn văn bản hiện có trong SourceBuffer.

SourceBuffer.timestampOffset

Kiểm soát độ lệch được áp dụng cho dấu thời gian bên trong các phân đoạn phương tiện được thêm vào SourceBuffer.

SourceBuffer.updating Read only

Một boolean cho biết liệu SourceBuffer hiện có đang được cập nhật hay không - tức là, một thao tác appendBuffer() hay remove() hiện đang được tiến hành.

SourceBuffer.videoTracks Read only

Danh sách các bản nhạc video hiện có trong SourceBuffer.

Các phương thức thực thể

Kế thừa các phương thức từ giao diện chính của nó, EventTarget.

SourceBuffer.abort()

Hủy bỏ phân đoạn hiện tại và đặt lại trình phân tích cú pháp phân đoạn.

SourceBuffer.appendBuffer()

Nối dữ liệu phân đoạn phương tiện từ đối tượng ArrayBuffer, TypedArray hoặc DataView vào SourceBuffer.

SourceBuffer.appendBufferAsync() Non-standard Experimental

Bắt đầu quá trình thêm không đồng bộ bộ đệm được chỉ định vào SourceBuffer. Trả về Promise được hoàn thành sau khi bộ đệm được thêm vào.

SourceBuffer.changeType()

Thay đổi MIME type mà các lệnh gọi trong tương lai tới appendBuffer() sẽ yêu cầu dữ liệu mới tuân theo.

SourceBuffer.remove()

Xóa các phân đoạn phương tiện trong một phạm vi thời gian cụ thể khỏi SourceBuffer.

SourceBuffer.removeAsync() Non-standard Experimental

Bắt đầu quá trình loại bỏ không đồng bộ các phân đoạn phương tiện trong phạm vi được chỉ định khỏi SourceBuffer. Trả về Promise được thực hiện sau khi tất cả các phân đoạn phù hợp đã bị xóa.

Sự kiện

abort

Được kích hoạt khi việc thêm bộ đệm bị hủy bỏ, vì phương thức SourceBuffer.abort() hoặc MediaSource.removeSourceBuffer() được gọi trong khi thuật toán SourceBuffer.appendBuffer() vẫn đang chạy. SourceBuffer.updating thay đổi từ true thành false.

error

Được kích hoạt khi xảy ra lỗi trong quá trình xử lý thao tác appendBuffer(). SourceBuffer.updating thay đổi từ true thành false.

update

Được kích hoạt bất cứ khi nào SourceBuffer.appendBuffer() hoặc SourceBuffer.remove() hoàn thành. SourceBuffer.updating thay đổi từ true thành false.

updateend

Được kích hoạt sau khi hoàn thành (không nhất thiết thành công) thao tác appendBuffer() hoặc remove(). Sự kiện này được kích hoạt sau các sự kiện update, error hoặc abort.

updatestart

Được kích hoạt khi thao tác appendBuffer() hoặc remove() bắt đầu. updating thay đổi từ false thành true.

Ví dụ

Đang tải từng đoạn video

Ví dụ sau đây tải từng đoạn video nhanh nhất có thể, phát video đó ngay khi có thể.

Bạn có thể xem mã hoàn chỉnh tại https://github.com/mdn/dom-examples/tree/main/sourcebuffer và dùng thử bản demo trực tiếp tại https://mdn.github.io/dom-examples/sourcebuffer/.

const video = document.querySelector("video");

const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

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

async function sourceOpen() {
  console.log(this.readyState); // open
  const sourceBuffer = this.addSourceBuffer(mimeCodec);
  const response = await fetch(assetURL);
  const buffer = await response.arrayBuffer();
  sourceBuffer.addEventListener("updateend", () => {
    this.endOfStream();
    video.play();
    console.log(this.readyState); // ended
  });
  sourceBuffer.appendBuffer(buffer);
}

const load = document.querySelector("#load");
load.addEventListener("click", loadVideo);
```## Thông số kỹ thuật

If you're able to see this, something went wrong on this page.


## Khả năng tương thích của trình duyệt
If you're able to see this, something went wrong on this page.

## Xem thêm
- MediaSource- SourceBufferList