أُطر عمل الوسائط

ديريك هيرمان

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

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

مزايا استخدام إطار عمل

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

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

هناك الكثير من الخيارات المتاحة للاختيار من بينها، وفي الوقت الحالي ستركز هذه المقالة على ثلاثة خيارات، وهي Shaka Player وJW Player وVideo.js.

مشغل شاكا

ووفقًا للوثائق، فإن Shaka Player من Google هو مكتبة JavaScript مفتوحة المصدر للوسائط التكيُّفية. وتعمل هذه الخدمة على تشغيل تنسيقات الوسائط التكيُّفية (مثل DASH وHLS) في متصفّح بدون استخدام مكوّنات إضافية. بدلاً من ذلك، تستخدم Shaka Player معايير الويب المفتوحة، مثل إضافات مصدر الوسائط وإضافات الوسائط المشفرة.

يتيح Shaka Player أيضًا التخزين بلا إنترنت وتشغيل الوسائط باستخدام IndexedDB. يمكن تخزين المحتوى على أي متصفح. يعتمد تخزين التراخيص على توافق المتصفّح.

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

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

إن الأمر الرائع في Shaka Player هو أيضًا أداة رائعة وحزمة SDK لملفات وسائط DASH وHLS وتشفيرها تسمى Shaka Packager. يمكنها إعداد وتجميع محتوى الوسائط للبث على الإنترنت، وهو ما تعرّفت عليه سابقًا في تحويل الوسائط وتشفير الوسائط.

مشغّل JW

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

يتيح JW Player البث باستخدام MPEG-DASH (الإصدار المدفوع فقط)، وإدارة الحقوق الرقمية (DRM) (باستخدام Vualto)، والإعلانات التفاعلية، وتخصيص الواجهة، والمحتوى المضمّن. هناك واجهة برمجة تطبيقات وحزمة تطوير برامج (SDK) موثقتان جيدًا. في المقابل، إذا كنت تبحث عن طريقة سريعة ومجانية لاستضافة الوسائط الخاصة بك، تكون عادةً ميزة تضمين فيديوهات YouTube هي الخيار المجاني الأفضل لك.

Video.js

وفقًا لموقعهم الإلكتروني، تم إنشاء Video.js من البداية لعالم HTML5. وهو يدعم فيديو HTML5 وتنسيقات البث الحديثة مثل DASH وHLS، بالإضافة إلى YouTube وVimeo. وهو يتيح تشغيل الفيديو على سطح المكتب والأجهزة المحمولة وتبدو جيدة في كل مكان باستخدام المظاهر المستندة إلى CSS.

هناك عدة طرق لاستخدام Video.js، ولكن الطريقة الأسهل هي استخدام نسخة شبكة توصيل المحتوى (CDN) المجانية التي توفّرها منصة Fastly. يمكنك الاطّلاع على مزيد من المعلومات حول كيفية إعداد المشغّل من صفحة البدء. إنّ Video.js مشغّل فيديو قوي جدًا، وهي تشبه إلى حدّ كبير Shaka Player، إذ ستحتاج أيضًا إلى استضافة الفيديو وترميزه. مع ذلك، هناك اختلاف واحد يتمثّل في نظام المكوّنات الإضافية الذي يمكنك من خلاله تنفيذ إجراءات مثل تشغيل فيديوهات YouTube في مشغّل Video.js، والتي يمكن تخصيصها أيضًا.

أُطر العمل الأخرى

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

ستتعرَّف بعد ذلك على تطبيق الويب التقدّمي (PWA) مع البث بلا إنترنت الذي صمّمناه لتوضيح كيفية التعامل مع التحديات الرئيسية التي تصاحبها طرح الحلول الخاصة بك باستخدام عنصر فيديو HTML5 فقط بدون إطار عمل لمعالجة المهام الصعبة.