بث الفيديو باستخدام 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);

إصدار تجريبي

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

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

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