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

ديريك هيرمان
ديريك هيرمان
X GitHub
ياروسلاف بولاكوفيتش
ياروسلاف بولاكوفيتش
X GitHub

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

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

تذكَّر أنّه لتوفير البث على موقعك الإلكتروني، يجب أن يدعم الخادم عنوان طلب 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>

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

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

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

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

من الجيّد أنّ W3C قد حددت إضافات مصادر الوسائط (MSE) للسماح لJavaScript بإنشاء ساحات مشاركات الوسائط لدينا. باختصار، تتيح الخطأ التربيعي المتوسط لمطوّري البرامج إرفاق كائن 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 على سبيل المثال لا الحصر.

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

تنسيق مقاطع الوسائط

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

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

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