هناك عدة طرق لإضافة الوسائط إلى صفحة الويب. لقد تعرّفت سابقًا على كيفية
استخدام علامة <video> العادية. تقدّم هذه المقالة معلومات حول عدد من أُطر عمل الوسائط (أو المكتبات) المتاحة التي يمكنك استخدامها لتوسيع سلوك مشغّل فيديو HTML5 التلقائي أو استبداله.
تتوفّر إطارات عمل الوسائط في مجموعة متنوعة من التطبيقات المملوكة والمفتوحة المصدر، وتتضمّن في الأساس مجموعة من واجهات برمجة التطبيقات التي تتيح تشغيل الصوت و/أو الفيديو مع تنسيقات الحاويات وبروتوكولات النقل المختلفة. يحتوي الإطار الجيد على بنية نموذجية ويوفر وثائق واضحة ومفصلة. من الناحية المثالية، يجب أن يكون أيضًا سهل الإعداد والاستخدام نسبيًا. قد تسأل نفسك، "إذا كان مشغل فيديو HTML5 يوفر معظم الميزات بالفعل، فلماذا أحتاج إلى إطار عمل أو مكتبة؟" هذا سؤال رائع، دعونا نتعمق في.
مزايا استخدام إطار عمل
في معظم الحالات التي تتجاوز احتياجات صفحة الويب الأساسية، ستحتاج إلى استخدام إطار عمل وسائط لعرض المحتوى الخاص بك. إذا لم تكن مستعدًا لتطوير مجموعة من الميزات التفاعلية والحفاظ عليها، مثل "التشغيل بلا إنترنت"، والبث، والإحصاءات، وميزة "نافذة ضمن النافذة"، والصور المصغّرة للمعاينة، والتضمين، وتحقيق الربح، مثل تحسين معدّل التعبئة، أو جدولة عرض الإعلانات، أو تقديم عروض أسعار في رأس الصفحة، من الأفضل نقل هذه التعقيدات إلى حل حالي.
هنا يأتي دور أُطر العمل الإعلامية. حيث توفر لك مجموعة من الميزات والشروط التي يمكنك فيها استخدام هذه الميزات، ثم عليك أن تقرر إطار العمل المناسب لمشروعك. وسنناقش في المقالة التالية كيفية إنشاء تطبيق ويب تقدّمي (PWA) مع البث بلا اتصال بالإنترنت والذي ينفّذ العديد من الميزات المعقّدة. تنبيه حول كشف تفاصيل المشكلة، تطلّب الأمر الكثير من العمل ولا يزال بعيدًا عن أن يكون حلاً جاهزًا للإنتاج. وفر على نفسك عناء استخدام إطار عمل.
هناك الكثير من الخيارات المتاحة للاختيار من بينها، وسنركّز في هذه المقالة حاليًا على ثلاثة خيارات، وهي Shaka Player وJW Player وVideo.js.
مشغّل شاكا
ووفقًا للمستندات، إنّ Shaka Player من Google هي مكتبة JavaScript مفتوحة المصدر للوسائط التكيُّفية. ويشغِّل تنسيقات الوسائط التكيُّفية (مثل DASH وHLS) في المتصفح بدون استخدام مكوّنات إضافية. بدلاً من ذلك، يستخدم Shaka Player معايير الويب المفتوحة إضافات MediaSource وإضافات الوسائط المشفرة.
يتيح Shaka Player أيضًا إمكانية التخزين بلا إنترنت وتشغيل الوسائط باستخدام IndexedDB. يمكن تخزين المحتوى على أي متصفح. ويعتمد تخزين التراخيص على التوافق مع المتصفّح.
تتوفّر توجيهات حول الاستخدام الأساسي على موقع مستندات Shaka Player. ومع ذلك، باختصار لاستخدام Shaka Player، يجب أولاً إنشاء صفحة HTML تتضمّن عنصر فيديو أو صوت. بعد ذلك، في JavaScript على تطبيقك، يمكنك تثبيت رموز polyfills والتحقق من توافقها مع المتصفّح. بعد أن يؤكد المتصفح توافقه مع Shaka Player، سينشئ البرنامج النصي كائن 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 فقط بدون إطار عمل للتعامل مع الأعباء الثقيلة.