สตรีมวิดีโอโดยใช้ MediaSource API

Eric Bidelman

MediaSource API ขยาย HTMLMediaElement เพื่ออนุญาตให้ JavaScript สร้างสตรีมสื่อสำหรับการเล่น การอนุญาตให้ JavaScript สร้างสตรีมช่วยอำนวยความสะดวกในการใช้งานในกรณีต่างๆ เช่น การสตรีมแบบปรับอัตโนมัติและสตรีมแบบสดที่มีการเปลี่ยนแปลงเวลา

โปรดดูการสาธิตและตัวอย่างการใช้งาน 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);

สาธิต

ตัวอย่างนี้แบ่งวิดีโอ .webm ออกเป็น 5 ส่วนโดยใช้ File API จากนั้นภาพยนตร์ทั้งเรื่องจะได้รับการ "สตรีม" ไปยังแท็ก <video> โดยการนำชิ้นส่วนแต่ละส่วนไปต่อท้ายในองค์ประกอบโดยใช้ MediaSource API

หากสนใจดูข้อมูลเพิ่มเติมเกี่ยวกับ API โปรดดูข้อกำหนด

การสนับสนุน: ปัจจุบัน MediaSource API มีให้บริการเฉพาะใน Chrome Dev Channel 17 ขึ้นไปที่มีการตั้งค่าสถานะ --enable-media-source หรือเปิดใช้ผ่านทาง about:flags