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

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> البسيط فقط. تتضمّن خارطة الطريق لدينا خططًا لإتاحة استخدام إطارات العمل وإدارة الحقوق الرقمية وغيرها من الخصائص. لذا يُرجى الرجوع إلى هذه الصفحة من حين لآخر للاطّلاع على آخر الأخبار أو طلب ميزة. يمكنك الاطّلاع على مزيد من المعلومات عن ذلك في مقالة تطبيقات الويب التقدّمية مع ميزة البث بلا إنترنت.

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

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

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

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