بث الفيديو باستخدام MediaSource API

توفّر MediaSource API واجهة برمجة تطبيقات HTMLMediaElement للسماح لـ JavaScript بإنشاء مصادر وسائط لتشغيلها. يتيح السماح لـ JavaScript بإنشاء أحداث البث تسهيل مجموعة متنوعة من حالات الاستخدام، مثل البث التكيُّفي وتغيير وقت البث المباشر.

في ما يلي عرض توضيحي سريع ومثال على استخدام واجهة برمجة التطبيقات:

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);

DEMO

يقسّم المثال فيديو بتنسيق ‎ .webm إلى 5 أجزاء باستخدام File APIs. بعد ذلك، يتم "بث" الفيلم بأكمله إلى علامة <video> من خلال إلحاق كل جزء بالعنصر باستخدام MediaSource API.

إذا أردت الاطّلاع على مزيد من المعلومات عن واجهة برمجة التطبيقات، يمكنك الاطّلاع على المواصفات.

الدعم: لا تتوفّر MediaSource API حاليًا إلا في الإصدار 17 من قناة مطوّري برامج Chrome والإصدارات الأحدث، مع ضبط العلامة --enable-media-source أو تفعيلها من خلال about:flags.