تتيح لك عناصر الصوت والفيديو في HTML تحميل الوسائط وفك ترميزها وتشغيلها، وذلك ببساطة من خلال تقديم عنوان URL لعنصر src:
<video src='foo.webm'></video>
يعمل ذلك بشكل جيد في حالات الاستخدام البسيطة، ولكن بالنسبة إلى تقنيات مثل البث التكيُّفي، توفّر Media Source Extensions API (MSE) مزيدًا من التحكّم. تتيح تقنية MSE إنشاء أحداث البث باستخدام JavaScript من مقاطع صوتية أو فيديو.
يمكنك تجربة MSE على الرابط simpl.info/mse:

الرمز البرمجي أدناه مأخوذ من هذا المثال.
يمثّل الرمز MediaSource
مصدرًا للوسائط لعنصر صوتي أو فيديو. بعد إنشاء مثيل لعنصر MediaSource
وبدء حدث open
، يمكن إضافة عناصر SourceBuffer
إليه. تعمل هذه العناصر كمخازن مؤقتة لمقاطع الوسائط:
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
var sourceBuffer =
mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
// Get video segments and append them to sourceBuffer.
}
يتم "بثّ" أقسام الوسائط إلى عنصر صوتي أو فيديو من خلال إضافة كل قسم إلى SourceBuffer
باستخدام appendBuffer()
. في هذا المثال، يتم جلب الفيديو من الخادم ثم تخزينه باستخدام واجهات برمجة تطبيقات File APIs:
reader.onload = function (e) {
sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
if (i === NUM_CHUNKS - 1) {
mediaSource.endOfStream();
} else {
if (video.paused) {
// start playing after first chunk is appended
video.play();
}
readChunk(++i);
}
};
ضبط ترتيب التشغيل
يضيف الإصدار 50 من Chrome ميزات إضافية للسمة SourceBuffer
mode
، ما يتيح لك تحديد تشغيل مقاطع الوسائط بشكل مستمر بالترتيب الذي تم إلحاقها به، بغض النظر عمّا إذا كانت مقاطع الوسائط تحتوي في البداية على طوابع زمنية غير متّصلة.
استخدِم السمة mode
لتحديد ترتيب التشغيل لمقاطع الوسائط. يمكن أن يكون لها إحدى القيمتَين التاليتَين:
- المقاطع: يحدّد الطابع الزمني لكل مقطع (الذي قد تم تعديله باستخدام
timestampOffset
) ترتيب التشغيل، بغض النظر عن ترتيب إلحاق المقاطع. - التسلسل: يتم تحديد ترتيب المقاطع المخزّنة مؤقتًا في مخطط زمني للوسائط حسب ترتيب إلحاق المقاطع بـ
SourceBuffer
.
إذا كانت مقاطع الوسائط تحتوي على طوابع زمنية تم تحليلها من بيانات تدفق البايتات عند إلحاقها بـ SourceBuffer
، سيتم ضبط سمة mode
في SourceBuffer
على segments. بخلاف ذلك، سيتم ضبط mode
على sequence. تجدر الإشارة إلى أنّ الطوابع الزمنية ليست اختيارية: يجب أن تكون متوفّرة لمعظم أنواع أحداث البث، ولا يمكن أن تكون متوفّرة لأنواع أخرى: فالطوابع الزمنية المضمّنة في البث هي ميزة أساسية لأنواع أحداث البث التي تحتوي عليها.
إنّ ضبط سمة mode
اختياري. بالنسبة إلى أحداث البث التي لا تحتوي على الطوابع الزمنية (audio/mpeg وaudio/aac)، لا يمكن تغيير mode
إلا من المقاطع إلى التسلسل: سيظهر خطأ إذا حاولت تغيير mode
من التسلسل إلى المقاطع. بالنسبة إلى أحداث البث التي تتضمّن طوابع زمنية، من الممكن التبديل بين المقاطع والتسلسل، إلا أنّ ذلك قد يؤدي في الواقع إلى سلوك غير مرغوب فيه أو يصعب فهمه أو التنبؤ به.
بالنسبة إلى جميع أنواع أحداث البث، يمكنك تغيير القيمة من المقاطع إلى التسلسل. وهذا يعني أنّه سيتم تشغيل المقاطع بالترتيب الذي تمّ إلحاقها به، وسيتمّ إنشاء الطوابع الزمنية الجديدة وفقًا لذلك:
sourceBuffer.mode = 'sequence';
إنّ إمكانية ضبط قيمة mode
على تسلسل تضمن تشغيل الوسائط بشكل مستمر، بغض النظر عمّا إذا كانت الطوابع الزمنية لمقاطع الوسائط غير متّصلة، على سبيل المثال، إذا كانت هناك مشاكل في دمج الفيديو أو إذا تم إلحاق مقاطع غير متّصلة (لأي سبب). يمكن للتطبيق استخدام timestampOffset
لإضافة عناصر polyfill لضمان التشغيل المستمر، إذا كانت البيانات الوصفية للبث صحيحة، ولكن وضع sequence يجعل العملية أكثر بساطة وأقل عرضة للخطأ.
تطبيقات MSE والعروض التوضيحية
تعرض هذه الأمثلة MSE أثناء التشغيل، ولكن بدون SourceBuffer.mode
التلاعب:
- Media Source API
- Shaka Player: عرض توضيحي لمشغّل الفيديو الذي يستخدم MSE لتنفيذ DASH مع مكتبة JavaScript من Shaka
دعم المتصفح
- الإصدار 50 من Chrome والإصدارات الأحدث تلقائيًا
- بالنسبة إلى Firefox، يُرجى الاطّلاع على MDN للحصول على التفاصيل.