ویدئو را با استفاده از MediaSource API پخش کنید

Eric Bidelman

MediaSource API HTMLMediaElement را گسترش می دهد تا به جاوا اسکریپت اجازه دهد تا جریان های رسانه ای را برای پخش تولید کند. اجازه دادن به جاوا اسکریپت برای تولید استریم ها، موارد استفاده متنوعی مانند پخش جریانی تطبیقی ​​و جریان های زنده با تغییر زمان را تسهیل می کند.

در اینجا یک نسخه آزمایشی و نمونه استفاده از 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. را با استفاده از File API به 5 تکه تقسیم می کند. سپس کل فیلم با اضافه کردن هر تکه به عنصر با استفاده از MediaSource API به یک تگ <video> "استریم" می شود.

اگر علاقه مند به کسب اطلاعات بیشتر در مورد API هستید، مشخصات را ببینید.

پشتیبانی: در حال حاضر، MediaSource API فقط در کانال برنامه‌نویس Chrome 17+ با پرچم --enable-media-source تنظیم شده یا از طریق about:flags فعال شده است.