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

MediaSource API mở rộng HTMLMediaElement để cho phép JavaScript tạo luồng nội dung đa phương tiện để phát. Việc cho phép JavaScript tạo luồng hỗ trợ nhiều trường hợp sử dụng, chẳng hạn như phát trực tuyến thích ứng và phát trực tiếp chuyển đổi thời gian.

Sau đâ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);

BẢN MINH HỌA

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

Nếu bạn muốn tìm hiểu thêm về API này, hãy xem quy cách.

Hỗ trợ: Hiện tại, MediaSource API 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 bật thông qua about:flags.