HTML5 فيديو 10 أشياء المصممين بحاجة إلى معرفته

ثورة HTML5 هي مصممي مواقع ويب مثيرين من جميع مناطق العالم. تدعم المواصفات الجديدة عشرات العناصر والسمات لإنشاء مواقع الويب الدلالية. تتضمن هذه الميزات الجديدة علامات الوسائط المتعددة لتنسيقات الصوت والفيديو.

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

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

1. أنواع الوسائط

عند العمل مع مشغل فيديو فلاش ، من الشائع جدًا ربط جميع تنسيقات الفيديو بتنسيق .flv. بينما يعمل هذا ، فإن معظم ملفات flv لا يمكنها الاحتفاظ بالجودة في أي مكان بالقرب من تنسيقات / برامج الترميز الأكثر تقدماً. هناك 3 أنواع فيديو مهمة تدعمها HTML5: MP4 و WebM و Ogg / Ogv. يتم ترميز نوع ملف MPEG-4 عمومًا في H.264 والذي يسمح بالتشغيل في مشغلات Flash من الجهات الخارجية. هذا يعني أنك لست بحاجة إلى الاحتفاظ بنسخة فيديو .vv لدعم طريقة الإرجاع! WebM و Ogg هما نوعان من الملفات الأحدث المرتبطة بفيلم HTML5. يستخدم Ogg ترميز Theora الذي يستند إلى تنسيق ملف الصوت القياسي المفتوح المصدر. يمكن حفظها بامتداد .ogg أو .ogv.

WebM هو مشروع تم طرحه بواسطة Google ويمكنك قراءة المزيد عنه على موقع WebM Project. التنسيق معتمد بالفعل من قبل Opera و Google Chrome و Firefox 4+ ، وآخرها Internet Explorer 9. لا يزال غير معروف من قبل معظم محترفي الويب ولكن WebM هو تنسيق وسائط الفيديو الرائد في مستقبل فيديو الويب.

2. دعم المتصفح

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

• Mozilla Firefox - WebM، Ogg
• Google Chrome - WebM ، Ogg
• Opera - WebM ، Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - لا HTML5 ، فلاش فقط!

إذا كنت تتذكر ، فقد ذكرت في وقت سابق أن معظم مشغلات فيديو الفلاش ستدعم ملفات MP4 طالما تم تشفيرها في H.264. على هذا النحو ، ستقوم كل من هذه المتصفحات بتضمين MP4 + Flash كملاذ أخير. هذا يعني أنك تحتاج فقط إلى إنشاء اثنان صيغ فيديو مختلفة لدعم جميع المتصفحات. MP4 لـ Safari / IE9 والاختيار بين WebM أو Ogg للباقي.

في رأيي أوصي بشدة بالالتزام بتنسيق WebM. له بعض الأسماء الكبيرة وراء المشروع (وهي Google) واكتسب الكثير من الجر في مجتمع HTML5. سيتم دعم Ogg / Ogv ولكن على الأرجح سيخسر في شعبية أحجام ملفات WebM الأصغر. يمكنك قراءة مقالة ذات صلة حول مستقبل الفيديو على الويب كتبها Sean Golliher.

3. تضمين فيديو بسيط HTML5

دعونا الآن نلقي نظرة على بناء الجملة المطلوب لتضمين بعض نماذج التعليمات البرمجية. كل ما نحتاج إليه هو علامة فيديو HTML5 للإشارة إلى كل عنوان URL للفيلم.

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

نحن نقدم تنسيقات MP4 و WebM داخلية لعنصر الفيديو. إذا لم يكن بالإمكان تحميل أي من هذين الملفين ، فإننا نعرض خطأ للمستخدم لتحديث متصفحه.

4. تقديم فلاش احتياطي

المثال أعلاه مثالي لجميع متصفحات الويب المتوافقة مع المعايير. ومع ذلك ، نحتاج أيضًا إلى اعتبار أن العالم ليس دائمًا في طليعة التكنولوجيا. نحتاج إلى دعم المستخدمين في الإصدارات الأقدم من Safari و Mozilla Firefox ، وخاصة Internet Explorer.

أفضل طريقة لتحقيق ذلك هي من خلال مشغل فلاش احتياطي. هذه يمكن أن تضاف باستخدام تضمين أو موضوع علامات للإشارة إلى ملف .swf لجهة خارجية. JW Player و Flowplayer هما حلان مجانيان مفتوحان المصدر يمكنك التفكير فيهما. ولكن تحقق أيضًا من مشغلات الفيديو المتميزة على ActiveDen والتي يمكن أن تكون رخيصة ما بين 15 إلى 20 دولارًا.

الآن ، دعونا نعدل الشفرة أعلاه لتشمل مشغل فلاش احتياطي لدعم ما يقرب من كل متصفح موجود.

5. دعم الجهاز المحمول

لا يزال هذا الموضوع موضع نقاش كبير نظرًا لأن صناعة الأجهزة المحمولة صغيرة جدًا. خرجت Apple بدعم MP4 على أجهزة Mac و iOS. هذا يعني أنه يمكنك تشغيل ملفات الفيديو .mp4 محليًا على جهاز iPad أو iPhone أو iPod Touch في واجهة المستخدم القياسية للفيديو. هذا يغطي الكثير من حصة السوق.

واجهت أجهزة Android مؤخرًا صعوبة في الوصول إلى نفس المستوى من الدعم. ومع ذلك ، فقد تبنت Google أخيرًا تدفق الإنترنت بتنسيق .mp4 والذي يستفيد الآن من جميع مستخدمي الجوال تقريبًا. ونظرًا لأن Flash ليس خيارًا هنا ، فإن MP4 هو الحل الأفضل المتاح. هذا هو السبب في أنك تريد تضمين رمز .mp4 أولاً حتى تتمكن أجهزة iOS من التعرف على الملف على الفور.

6. سفاري وكيل المستخدم

أحد الأخطاء التي يجب ذكرها هو الموجود بين مشغلات Flash و HTML5 .mp4 الأصلي الذي يتدفق على Safari. نظرًا لأن المستعرض يمكنه دعم كلا الملفين ، فقد تواجه مشكلة في الحصول على دفق فيديو HTML5 بدلاً من Flash. ومع ذلك ، بفضل نشر المدونة الرائع هذا على TUAW ، من السهل تغيير وكيل مستخدم التصفح.

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

7. إدارة الضوابط لاعب

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

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

يوفر المطور نفسه في مقالة Opera عرضًا عمليًا لمشغل الفيديو النصي. فرصة تخصيص عناصر التحكم في واجهة المستخدم الخاصة بك رائعة. غني عن إظهار مدى قوة فيديو HTML5.

8. تحويل تنسيق الفيديو

هذه قضية كبيرة أخرى من المحتمل أن تخلط بين الأفراد الأقل ذكاءًا. هل تريد فقط الحصول على موقع ويب الخاص بك والبث والآن عليك التعامل مع تحويل الفيديو؟ حسنًا ، هذا ليس بالأمر الصعب.

للتعامل مع MP4 الذي يمثل الأولوية القصوى لديك ، يمكنك استخدام HandBrake وهو حل مجاني مفتوح المصدر يعمل على جميع أنظمة التشغيل الرئيسية الثلاثة. سوف تدعم H.264 مع بعض برامج الترميز الأخرى مما يجعل هذا الخيار الأفضل لمستخدمي الهدية الترويجية. إذا كان لديك المال اللازم لسداده ، يجب أن أوصي بمحول Xilisoft الموجود على متجر تطبيقات Mac مقابل ترخيص عمره 40 دولارًا فقط.

يبدو أن مسار WebM يجعل الحياة أسهل كثيرًا. يعد Miro Video Converter أداة مجانية لنظامي التشغيل Windows و OS X والتي تنتج ملفات WebM عالية الجودة. يمكن أيضًا القيام بترميز Ogg Theora الذي يأتي بجودة رائعة أيضًا.

9. بناء مشغل ويب

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

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

بناء مشغل فيديو HTML5

10. مكتبة VideoJS

قد يكون VideoJS هو الحل المفضل لمشغلات الفيديو HTML5. كل ما تحتاجه هو صفحات أنماط JavaScript و CSS المستضافة ذاتيا والمضمنة في مكان ما في وثيقتك. ثم تكتب كود فيديو HTML5 القياسي مع بعض الفئات الإضافية للسمك. أضفت رمز العينة الخاص بهم أدناه:

إذا كنت تدير مدونة WordPress ، فيمكنك أيضًا تجربة البرنامج المساعد المخصص لـ WP. سيتضمن تلقائيًا مكتبة js / css على الصفحات التي تعرض فيها فيديو HTML5. ويمكنك القيام بذلك من داخل أي منشور أو محرر صفحة باستخدام الرموز المختصرة (انظر هنا).

استنتاج

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