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

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>

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

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

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

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

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

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

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

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

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

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