واجهة برمجة تطبيقات مصدر الوسائط - ضمان التشغيل السلس لأجزاء الوسائط بترتيب الإلحاق تلقائيًا

تتيح لك عناصر الصوت والفيديو في HTML تحميل الوسائط وفك ترميزها وتشغيلها، وذلك ببساطة من خلال تقديم عنوان URL لعنصر src:

    <video src='foo.webm'></video>

يعمل ذلك بشكل جيد في حالات الاستخدام البسيطة، ولكن بالنسبة إلى تقنيات مثل البث التكيُّفي، توفّر Media Source Extensions API (MSE) مزيدًا من التحكّم. تتيح تقنية MSE إنشاء أحداث البث باستخدام JavaScript من مقاطع صوتية أو فيديو.

يمكنك تجربة MSE على الرابط simpl.info/mse:

لقطة شاشة لفيديو يتم تشغيله باستخدام واجهة برمجة التطبيقات MSE API

الرمز البرمجي أدناه مأخوذ من هذا المثال.

يمثّل الرمز 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 التلاعب:

دعم المتصفح

  • الإصدار 50 من Chrome والإصدارات الأحدث تلقائيًا
  • بالنسبة إلى Firefox، يُرجى الاطّلاع على MDN للحصول على التفاصيل.

المواصفات

معلومات واجهة برمجة التطبيقات