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

سنضع الإطار الأساسي للتطبيق ثم نستخدم

المتطلبات الأساسية

استخدم Chrome أو Safari أو Internet Explorer 9+. في الوقت الحالي ، سيتعين عليك تجنب Firefox و Opera بسبب مشكلات في تنسيق ملفات الفيديو عبر المتصفح. على الرغم من أن دعم عنصر الفيديو متناسق عبر جميع المتصفحات الحديثة ، إلا أن تنسيق MP4 يقوم بتنشيط Firefox و Opera. تستطيع تحقق من التوافق هنا.

قبل البدء ، ستحتاج إلى العثور على ملف .mp4 الذي يمكنك استخدامه ، إذا لم يكن لديك واحد ، ستجد الكثير من ملفات mp4 المجانية عبر الإنترنت.

بناء الإطار الأساسي

التعليمة البرمجية التالية هي الإطار الذي تقوم ببناء المشغل حوله. ينشئ تنسيقًا بسيطًا ولديه عنصر نائب للفيديو نفسه.

يجب إنشاء ملف HTML جديد في دليل العمل الخاص بك وتسمية it index.html ، ثم إضافة هذا الرمز:

HTML5 Video Player

الآن ، مع وضع الأساس ، دعنا ندخل إلى الجزء الممتع من المشغل بإضافة فيديو إلى الصفحة.

استخدام عنصر الفيديو لإضافة مقاطع الفيديو إلى صفحات الويب

الهدف في تصميم HTML5

في ما يلي شكل فيديو HTML5 في Chrome:

تعرض القائمة التالية جميع التعليمات البرمجية المطلوبة لعرض الفيديو. كما ترون ، الأمر ليس معقدًا.

أدخل هذا الرمز بدلاً من " "التعليق في الكود أعلاه ، تأكد من استبدال [YOUR VIDEO] بمسار إلى ملف .mp4 الخاص بك ، وتحديث الصفحة.