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