أساسيات بث الوسائط

Derek Herman

Jaroslav Polakovič

ستتعرّف في هذه المقالة على مفهوم أكثر تقدّمًا لبث الوسائط، ومن المفترض أن يكون لديك بحلول نهايتها فهم جيد لحالات استخدام بث الوسائط والبروتوكولات والإضافات المختلفة. لنبدأ أولاً بتقديم تعريف عميق عن البث.

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

يُرجى العِلم أنّه لتقديم بث على موقعك الإلكتروني، يجب أن يكون الخادم متوافقًا مع عنوان طلب HTTP Range. يمكنك الاطّلاع على مزيد من المعلومات حول Accept-Ranges العنوان في مقالة علامتا <video> و<source>.

حالات استخدام البث

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

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

بروتوكولات البث

إنّ بروتوكولَي البث الأكثر استخدامًا على الويب هما البث الديناميكي التكيُّفي عبر HTTP (DASH) والبث المباشر عبر بروتوكول HTTP (HLS). ستسترجع مشغّلات الوسائط التي تتيح هذه البروتوكولات ملف البيان الذي تم إنشاؤه، وتحدّد أجزاء الوسائط التي يجب طلبها، ثم تجمعها في تجربة الوسائط النهائية.

استخدام <video> لتشغيل بث

لن يشغّل العديد من المتصفّحات البث المباشر بشكلٍ أصلي. على الرغم من توفّر بعض الميزات المضمّنة لتشغيل HLS، لا تتيح المتصفّحات بشكل عام تشغيل البث باستخدام DASH . وهذا يعني أنّه في كثير من الأحيان لا يكفي الإشارة إلى <source> في عنصر <video> ببساطة إلى ملف بيان.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

ما قد يبدو على أنه نقص هو في الواقع قوة متنكرية. إنّ أحداث البث فعّالة، وتختلف احتياجات التطبيقات التي تستخدِم أحداث البث.

تصف ملفات البيان عادةً العديد من الصيغ لوسائط واحدة. فكِّر في معدّلات نقل بيانات مختلفة وعدّة مسارات صوتية وحتى الوسائط نفسها المشفّرة بتنسيقات مختلفة.

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

إضافات مصادر الوسائط

لحسن الحظ، حدّدت W3C ما يُعرف باسم إضافات مصدر الوسائط (MSE) التي ستسمح لـ JavaScript بإنشاء مصادر الوسائط. باختصار، تسمح MSE للمطوّرين بإرفاق عنصر MediaSource بعنصر <video> وتشغيله أي بيانات وسائط يتم ضخها في وحدات التخزين المؤقت المرتبطة بمثيل MediaSource.

مثال أساسي

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

يوضّح المثال المبسّط أعلاه بعض الأمور:

• بالنسبة إلى <video>، يتلقّى بيانات الوسائط من عنوان URL.
• إنّ عنوان URL الذي تم إنشاؤه هو مجرد مؤشر إلى مثيل MediaSource.
• ينشئ مثيل MediaSource مثيلًا واحدًا أو أكثر من SourceBuffer.
• بعد ذلك، نُلحق بيانات الوسائط الثنائية في المخزن المؤقت، مثلاً باستخدام fetch.

في حين أنّ هذه المفاهيم الأساسية بسيطة، ومن الممكن بالتأكيد كتابة مشغِّل فيديو متوافق مع DASH وHLS من البداية، يختار معظم المستخدمين عادةً أحد الحلول المفتوحة المصدر والمتقدمة المتوفرة حاليًا، مثل Shaka Player أو JW Player أو Video.js على سبيل المثال لا الحصر.

ومع ذلك، أنشأنا تطبيقًا تجريبيًا لتطبيق متعدّد الوسائط متوافق مع الويب يُسمى Kino يوضّح كيفية إنشاء موقع إلكتروني أساسي لبث الوسائط يتيح تشغيل الوسائط بلا إنترنت باستخدام عنصر <video> البسيط فقط. تتضمّن خارطة الطريق لدينا خططًا لإتاحة استخدام إطارات العمل وإدارة الحقوق الرقمية، بالإضافة إلى ميزات أخرى. لذا يُرجى الرجوع إلى هذه الصفحة من حين لآخر للاطّلاع على آخر الأخبار أو طلب ميزة. يمكنك الاطّلاع على المزيد من المعلومات حول هذا الموضوع في مقالة تطبيق الويب التقدّمي (PWA) مع البث بلا إنترنت.

تنسيق أجزاء الوسائط

لفترة طويلة، كان تنسيقا DASH وHLS يتطلبان ترميز أجزاء الوسائط بتنسيقات مختلفة. في عام 2016، تمت إضافة ملفات MP4 المجزّأة (fMP4) العادية إلى HLS، وهو تنسيق يتوافق أيضًا مع DASH.

تتوافق مقاطع الفيديو التي تستخدم الحاوية fMP4 وبرنامج ترميز H.264 مع كلا البروتوكولين ويمكن للغالبية العظمى من اللاعبين تشغيلها. يتيح ذلك لصنّاع المحتوى ترميز فيديوهاتهم مرة واحدة فقط، ما يؤدي بدوره إلى توفير الوقت ومساحة القرص.

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