تتيح لك عناصر الصوت والفيديو في HTML تحميل الوسائط وفك ترميزها وتشغيلها، وذلك ببساطة من خلال تقديم عنوان URL لعنصر src:
<video src='foo.webm'></video>
يعمل ذلك بشكل جيد في حالات الاستخدام البسيطة، ولكن بالنسبة إلى تقنيات مثل البث التكيُّفي، توفّر Media Source Extensions API (MSE) مزيدًا من عناصر التحكّم. تتيح تقنية MSE إنشاء أحداث البث باستخدام JavaScript من مقاطع صوتية أو فيديو.
يمكنك تجربة الخطأ التربيعي المتوسط على 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);
}
};
ضبط ترتيب التشغيل
يتيح إصدار Chrome 50 إمكانية استخدام السمة SourceBuffer mode، ما يسمح لك بتحديد أن يتم تشغيل شرائح الوسائط باستمرار بترتيب إلحاقها، بصرف النظر عمّا إذا كانت شرائح الوسائط في البداية تتضمّن طوابع زمنية غير متواصلة.
استخدِم السمة mode لتحديد ترتيب التشغيل لمقاطع الوسائط. وهي قيمة من قيمتين:
- المقاطع: يحدّد الطابع الزمني لكل مقطع (الذي قد تم تعديله باستخدام
timestampOffset) ترتيب التشغيل، بغض النظر عن ترتيب إلحاق المقاطع. - التسلسل: يتم تحديد ترتيب المقاطع المخزّنة مؤقتًا في مخطط زمني للوسائط حسب ترتيب إلحاق المقاطع بـ
SourceBuffer.
إذا كانت مقاطع الوسائط تحتوي على طوابع زمنية تم تحليلها من بيانات تدفق البايتات عند إلحاقها بـ SourceBuffer، سيتم ضبط سمة mode في SourceBuffer على segments. بخلاف ذلك، سيتم ضبط mode على sequence. تجدر الإشارة إلى أنّ الطوابع الزمنية ليست اختيارية: يجب أن تكون متوفّرة لمعظم أنواع أحداث البث، ولا يمكن أن تكون متوفّرة لأنواع أخرى: فالطوابع الزمنية المضمّنة في البث هي ميزة أساسية لأنواع أحداث البث التي تحتوي عليها.
إنّ ضبط سمة mode اختياري. بالنسبة إلى أحداث البث التي لا تتضمّن طوابع زمنية (صوت/mpeg وصوت/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 للحصول على التفاصيل.