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

سام دوتون

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

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

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

يمكنك تجربة الخطأ التربيعي المتوسط من خلال 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);
    }
};

ضبط ترتيب التشغيل

يضيف Chrome 50 المزيد من الدعم لسمة SourceBuffer mode، ما يسمح لك بتحديد تشغيل مقاطع الوسائط بشكل مستمر بالترتيب الذي تم إلحاقه بها، بغض النظر عما إذا كان لهذه المقاطع طوابع زمنية غير متصلة في البداية.

استخدِم السمة mode لتحديد ترتيب التشغيل لأجزاء الوسائط. وهي تحتوي على إحدى القيمتين التاليتين:

  • الشرائح: يحدد الطابع الزمني لكل مقطع (يمكن أن يكون قد تم تعديله من قِبل timestampOffset) ترتيب التشغيل، بغض النظر عن الترتيب الذي تم إلحاق المقطع به.
  • التسلسل: يتم تحديد ترتيب المقاطع التي تم تخزينها مؤقتًا في المخطّط الزمني للوسائط حسب الترتيب الذي تم إلحاقه به بـ SourceBuffer.

إذا كانت شرائح الوسائط تتضمّن طوابع زمنية يتم تحليلها من بيانات مصدر بيانات البايت عند إلحاقها بالسمة SourceBuffer، سيتم ضبط سمة mode في SourceBuffer على الشرائح. وبخلاف ذلك، سيتم ضبط mode على تسلسل. ملاحظة: إنّ الطوابع الزمنية ليست اختيارية، إذ يجب أن تكون متوفرة لمعظم أنواع مجموعات البث ولا يمكن أن تكون متاحة لغيرها، لأنّ الطوابع الزمنية المضمّنة في النطاق تكون مضمّنة في أنواع مجموعات البث التي تتضمنها.

إنّ ضبط السمة mode هو إجراء اختياري. في أحداث البث التي لا تتضمّن طوابع زمنية (صوت/mpeg وصوت/aac) يمكن تغيير mode فقط من الشرائح إلى تسلسل: سيظهر خطأ إذا حاولت تغيير mode من التسلسل إلى الشرائح. في أحداث البث التي تتضمّن طوابع زمنية، من الممكن التبديل بين الشرائح والتسلسل، على الرغم من أنّه قد يؤدي عمليًا إلى إنشاء سلوك غير مرغوب فيه أو يصعب فهمه أو توقّعه.

بالنسبة إلى جميع أنواع مصادر البيانات، يمكنك تغيير القيمة من الشرائح إلى التسلسل. ويعني ذلك أنّه سيتم تشغيل المقاطع بالترتيب الذي تم إلحاقها به وإنشاء طوابع زمنية جديدة وفقًا لذلك:

sourceBuffer.mode = 'sequence';

يمكن ضبط القيمة mode على تسلسل لضمان التشغيل المستمر للوسائط، بغضّ النظر عمّا إذا كانت الطوابع الزمنية لأجزاء الوسائط غير متصلة، على سبيل المثال، في حال حدوث مشاكل في دمج الفيديوهات، أو في حال إلحاق مقاطع غير متصلة (لأي سبب كان). إذا توفرت بيانات وصفية صحيحة للبث، يمكن أن يعج أحد التطبيقات باستخدام timestampOffset لضمان التشغيل المستمر، ولكن وضع التسلسل يجعل العملية أكثر بساطة وتقل احتمالات حدوث أخطاء.

تطبيقات وتطبيقات الخطأ التربيعي المتوسط (MSE)

وفي ما يلي أمثلة على الخطأ التربيعي المتوسط أثناء الاستخدام، ولكن بدون التلاعب بـ SourceBuffer.mode:

المتصفحات المتوافقة

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

المواصفات

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