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