Phát video trực tuyến bằng API MediaSource

API MediaSource mở rộng HTMLMediaElement để cho phép JavaScript tạo luồng nội dung nghe nhìn nhằm phát lại. Việc cho phép JavaScript tạo luồng sẽ tạo điều kiện thuận lợi cho nhiều trường hợp sử dụng như phát trực tiếp thích ứng và thay đổi thời gian phát trực tiếp.

Dưới đây là bản minh hoạ nhanh và ví dụ về cách sử dụng API:

const NUM_CHUNKS = 5;

var video = document.querySelector('video');
video.src = video.webkitMediaSourceURL;

video.addEventListener('webkitsourceopen', function(e) {
    var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

    // Slice the video into NUM_CHUNKS and append each to the media element.
    for (var i = 0; i < NUM_CHUNKS; ++i) {
    var startByte = chunkSize * i;

    // file is a video file.
    var chunk = file.slice(startByte, startByte + chunkSize);

    var reader = new FileReader();
    reader.onload = (function(idx) {
        return function(e) {
        video.webkitSourceAppend(new Uint8Array(e.target.result));
        logger.log('appending chunk:' + idx);
        if (idx == NUM_CHUNKS - 1) {
            video.webkitSourceEndOfStream(HTMLMediaElement.EOS_NO_ERROR);
        }
        };
    })(i);

    reader.readAsArrayBuffer(chunk);
    }
}, false);

MINH HOẠ

Ví dụ này chia video .webm thành 5 phần bằng API tệp. Sau đó, toàn bộ phim được "phát trực tuyến" vào thẻ <video> bằng cách thêm từng đoạn vào phần tử thông qua API MediaSource.

Nếu bạn muốn tìm hiểu thêm về API này, hãy xem thông số kỹ thuật.

Hỗ trợ: Hiện tại, API MediaSource chỉ có trong Kênh nhà phát triển Chrome 17 trở lên với cờ --enable-media-source được đặt hoặc được bật qua about:flags.