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

Derek Herman

Jaroslav Polakovič

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

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

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

تنبيه: هذا HTML صالح، ولكنه لا يعمل في الواقع. لا تتيح المتصفّحات في الأساس تشغيل بيان DASH الذي تتم إضافته إلى السمة src.

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

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

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

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

لحسن الحظ، حدّدت 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 على سبيل المثال لا الحصر.

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

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

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

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

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