تعلم كيفية إدراج الفيديوهات في HTML باستخدام وسم الفيديو

مرحبًا بكم، في هذا الدرس سنتعرف معًا على كيفية إدراج مقاطع الفيديو في صفحات الويب باستخدام لغة HTML.

سنتناول وسم <video> بالتفصيل، ونوضح كيفية استخدامه بشكل صحيح، مع استعراض الخصائص (Attributes) المختلفة التي يمكنك إضافتها لإظهار عناصر التحكم، ضبط الحجم، إضافة صورة تمهيدية، تشغيل تلقائي، تكرار الفيديو، كتم الصوت، وإضافة ترجمات.

أولًا: وسم الفيديو `<video>`

لبدء إدراج فيديو، نستخدم الوسم التالي:

<video></video>

وهو يتكون من وسم فتح ووسم إغلاق، ويمكنك إدراج مصدر الفيديو داخل هذا الوسم باستخدام خاصية src، أو باستخدام الوسم <source> كما سنوضح لاحقًا.

مثال بسيط:

<video src="video.mp4" controls></video>

ثانيًا: استخدام خاصية `src`

خاصية src تُستخدم لتحديد مسار الفيديو.
إذا كان الفيديو محفوظًا داخل مجلد ضمن ملفات المشروع، يجب تحديد المسار بدقة.

مثال:

<video src="videos/sample.mp4" controls></video>

ثالثًا: تحديد الأبعاد باستخدام `width` و`height`

يمكنك تحديد عرض وارتفاع مشغل الفيديو باستخدام خاصيتي width و height بوحدة البكسل:

<video src="videos/sample.mp4" width="400" height="300" controls></video>

رابعًا: عرض عناصر التحكم

لإظهار عناصر التحكم مثل زر التشغيل والإيقاف ومؤشر الزمن، استخدم الخاصية controls:

<video src="videos/sample.mp4" controls></video>

خامسًا: دعم عدة صيغ فيديو باستخدام `<source>`

بعض المتصفحات لا تدعم جميع صيغ الفيديو، لذلك يُفضل استخدام أكثر من مصدر داخل وسم <video>:

<video width="400" controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <source src="videos/sample.ogg" type="video/ogg">
  <source src="videos/sample.webm" type="video/webm">
  متصفحك لا يدعم عرض هذا الفيديو.
</video>

سادسًا: تشغيل الفيديو تلقائيًا باستخدام `autoplay`

لتشغيل الفيديو تلقائيًا عند تحميل الصفحة:

<video src="videos/sample.mp4" autoplay muted controls></video>

⚠️ ملاحظة: معظم المتصفحات لا تسمح بتشغيل الفيديو تلقائيًا إلا إذا كانت خاصية muted مفعلة.

سابعًا: تكرار تشغيل الفيديو باستخدام `loop`

إذا كنت تريد أن يعيد الفيديو تشغيل نفسه تلقائيًا عند الانتهاء:

<video src="videos/sample.mp4" loop controls></video>

ثامنًا: كتم الصوت تلقائيًا باستخدام `muted`

لكتم صوت الفيديو من البداية:

<video src="videos/sample.mp4" muted controls></video>

تاسعًا: صورة تمهيدية قبل التشغيل باستخدام `poster`

لإظهار صورة ثابتة بدلًا من أن تكون شاشة الفيديو سوداء قبل التشغيل:

<video src="videos/sample.mp4" poster="images/poster.jpg" controls></video>

عاشرًا: التحميل المسبق باستخدام `preload`

يمكنك تحديد كيفية تحميل الفيديو قبل تشغيله باستخدام الخاصية preload:

none: لا يتم تحميل أي شيء
metadata: تحميل بيانات الفيديو فقط (مثل المدة)
auto: المتصفح يقرر ما يجب تحميله

مثال:

<video src="videos/sample.mp4" preload="metadata" controls></video>

الحادي عشر: النص البديل في حالة عدم دعم المتصفح

يمكنك إضافة رسالة تظهر للمستخدم إذا كان المتصفح لا يدعم تشغيل الفيديو:

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  متصفحك لا يدعم تشغيل الفيديو. يُرجى استخدام متصفح أحدث.
</video>

الثاني عشر: إضافة الترجمة باستخدام `<track>`

يمكنك إرفاق ملف ترجمة للفيديو باستخدام الوسم <track>:

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <track src="subs/english.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="subs/arabic.vtt" kind="subtitles" srclang="ar" label="العربية">
</video>

src: مسار ملف الترجمة (يجب أن يكون بصيغة .vtt)
kind: نوع الترجمة (عادةً subtitles)
srclang: لغة الترجمة (مثل en أو ar)
label: الاسم الظاهر للمستخدم
default: لجعل الترجمة مفعلة تلقائيًا

خاتمة

كان هذا شرحًا شاملًا لكيفية استخدام وسم <video> في HTML، وتخصيصه باستخدام الخصائص المختلفة لتقديم تجربة مشاهدة احترافية داخل موقعك.
تأكد دائمًا من توفير أكثر من صيغة للفيديو ودعم الترجمة إذا لزم الأمر لتحسين تجربة المستخدم.

إذا كان لديك أي سؤال، لا تتردد في تركه في التعليقات. بالتوفيق في مشاريعك!

مواضيع تهمك

الصوت audio - تعلم Html

العناصر Block and Inline - تعلم Html

الجداول Table - تعلم Html

دروس اونلاين بلس

تعلم كيفية إدراج الفيديوهات في HTML باستخدام وسم الفيديو