random
أخبار ساخنة

شرح كامل لعنصر الفيديو video في HTML وجميع خصائصه مع الأمثلة العملية

Samouel Ghaly
الصفحة الرئيسية
شرح كامل لعنصر الفيديو video في HTML وجميع خصائصه مع الأمثلة العملية

شرح عنصر الفيديو <video> في HTML — كل ما تحتاجه (autoplay, loop, poster, preload, track)

عنصر <video> هو الطريقة الرسمية لعرض مقاطع الفيديو داخل صفحات الويب باستخدام HTML5 بدون الحاجة لإضافات خارجية مثل Flash. في هذا الدليل سنغطي كل شيء عملياً: كيف تضيف فيديو، السمات (attributes) الأساسية والمتقدمة، تنسيقات الملفات المدعومة، إضافة ترجمات عبر عنصر <track>، وكيفية تحسين الأداء وتجربة المستخدم.

مقدمة سريعة — لماذا تستخدم <video>؟

استخدام عنصر <video> يسمح لك بعرض الفيديو مباشرة داخل الصفحة، ويعطيك تحكم كامل عبر السمات أو عبر JavaScript. هذا يسهل دمج واجهة تشغيل (controls)، التشغيل التلقائي (autoplay)، التكرار (loop)، وضع صورة معاينة (poster)، وخيارات التحميل (preload) بالإضافة إلى دعم ترجمات وفصول من خلال عنصر <track>.

مثال بسيط — أول كود

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  متصفحك لا يدعم عرض الفيديو.
</video>

المتصفح سيجرب المصدر الأول ثم التالي ويستخدم أول صيغة يتمكن من تشغيلها. ضع نص fallback بين الوسمين ليظهر في المتصفحات القديمة.

السمات الأساسية للعنصر

أهم السمات التي ستستخدمها عملياً: controls, autoplay, muted, loop, poster, preload، بالإضافة إلى عناصر <source> و <track>.

controls

تظهر واجهة تشغيل مضمنة (زر تشغيل/إيقاف، شريط التقدم، مستوى الصوت).

autoplay و muted

السمة autoplay تجعل الفيديو يبدأ تلقائياً عند تحميل الصفحة. ملاحظة مهمة: أغلب متصفحات Chromium تمنع التشغيل التلقائي إذا كان الصوت مفعلًا. لذلك إذا أردت autoplay موثوق به ضع أيضاً muted (صامت) أو تَرَك للمستخدم أن يتفاعل أولاً.

loop

السمة loop تعيد تشغيل الفيديو تلقائياً عند انتهاءه. مفيدة للمقاطع القصيرة أو الـ hero backgrounds. 

<video controls loop>
  <source src="looped.mp4" type="video/mp4">
</video>

poster

السمة poster="image.jpg" تعرض صورة ثابتة كمعاينة قبل تشغيل الفيديو، بدلاً من عرض أول إطار من الفيديو. مفيدة لتقليل تحميل المستخدم أو تحسين التصميم. 

<video controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>

preload

تحدد سمة preload ما إذا كان المتصفح يجب أن يحمل الفيديو تلقائياً أم لا. القيم:

  • none: لا يحمل شيئاً حتى يتفاعل المستخدم.
  • metadata: يحمل فقط البيانات الوصفية (المدة، الأبعاد).
  • auto: يحاول تحميل الفيديو بالكامل مع تحميل الصفحة.
اختيار مناسب لـ preload يساعد في تحسين أداء الصفحة واستهلاك الباندويث. 
<video controls preload="metadata">
  <source src="movie.mp4" type="video/mp4">
</video>

عنصر <track> لإضافة ترجمات وتوقيتات

عنصر <track> يُستخدم لإضافة ترجمات (subtitles/captions)، فصول (chapters)، أو تسميات (descriptions). الصيغة الشائعة للملفات هي WebVTT (.vtt). يمكنك إضافة عدة مسارات بلغات مختلفة ليختار المستخدم الترجمة المناسبة. 

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subs_ar.vtt" kind="subtitles" srclang="ar" label="العربية">
</video>

كل مسار يمكن أن يحتوي على نصوص وقتية متزامنة بالثواني أو بصيغ الوقت التي يدعمها WebVTT. استخدام الترجمات مهم لتحسين الوصول (accessibility) وتجربة المستخدمين الصم أو ضعاف السمع.

تنسيقات الفيديو المدعومة ومدى توافق المتصفحات

الصيغ الشائعة: MP4 (video/mp4), WebM (video/webm), Ogg (video/ogg). من الأفضل تزويد ملفين على الأقل (مثل MP4 وWebM) لضمان التوافق مع أشهر المتصفحات. ملاحظات: Safari يدعم MP4 جيداً، وبعض المتصفحات قد لا تدعم Ogg.

التحكم بالـ Video عبر JavaScript

يمكنك استخدام DOM لتشغيل الفيديو، إيقافه، تعديل الوقت الحالي، قراءة المدة، أو التحكم في الصوت. بعض الدوال والخصائص المهمة:

  • play() و pause()
  • currentTime لقراءة أو ضبط موقع التشغيل (بالثواني)
  • duration لمعرفة طول الفيديو
  • volume لقيمة الصوت من 0 إلى 1
  • أحداث مثل loadedmetadata, timeupdate, ended 

<video id="v" width="480" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="document.getElementById('v').play()">تشغيل</button>
<button onclick="document.getElementById('v').pause()">إيقاف</button>

تحسين الأداء وتجربة المستخدم (Performance & UX)

بعض النصائح العملية:

  • استخدم poster بدل تحميل الفيديو فوراً إذا كان المستخدم قد لا يشغّله.
  • استخدم preload="metadata" عندما تريد فقط معلومات مثل مدة الفيديو بدون تحميل الملف بأكمله.
  • أعد ترميز الفيديو (encode) بجودة متوازنة وحجم مناسب للويب واستخدم H.264 أو VP9 حسب الجمهور.
  • ضع ملفات الفيديو على CDN إذا كان جمهورك موزع جغرافياً.
  • فكر في lazy-loading أو تحميل الفيديو عند وصول المستخدم إلى قسم الصفحة (intersection observer).

الوصولية (Accessibility)

لتحسين الوصولية:

  • أضف ترجمات (captions) عبر <track kind="captions" ...>.
  • أضف وصف صوتي (audio description) لمحتوى الفيديو إن لزم.
  • اجعل عناصر التحكم قابلة للوصول عبر لوحة المفاتيح ووسوم ARIA عند الحاجة.

مثال شامل يجمع كل السمات

<video id="hero" width="720" height="405" controls autoplay muted loop poster="poster.jpg" preload="auto">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <track src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subs_ar.vtt" kind="subtitles" srclang="ar" label="العربية">
  متصفحك لا يدعم عرض الفيديو.
</video>

<script>
  const v = document.getElementById('hero');
  v.addEventListener('loadedmetadata', () => {
    console.log('مدة الفيديو:', v.duration);
  });
  v.addEventListener('ended', () => {
    console.log('انتهى الفيديو');
  });
</script>

نصائح نهائية وملخص

عنصر <video> مرن وقوي. اختصرها هكذا:

  • استخدم أكثر من صيغة فيديو لضمان التوافق.
  • استخدم poster لتجربة تحميل أنعم.
  • اعتمد preload بعناية لتقليل استهلاك الباندويث.
  • إذا استخدمت autoplay فاجعله مع muted لتجاوز قيود المتصفحات.
  • أضف ترجمات عبر <track> لتحسين الوصولية وتجربة المستخدم.

لو حابب، أقدر أجهز لك أيضاً: ملفي VTT جاهزين (English وArabic)، مثال lazy-loading باستخدام Intersection Observer، أو تصميم واجهة مشغل مخصص بـ CSS وJS لمدونتك.

تم إعداد المقال بواسطة مهندس صموئيل غالي — كورس تعلم HTML من الصفر. للمزيد من الدروس اطّلع على باقي مقالات السلسلة أو اطلب مني مثال تطبيقي.

google-playkhamsatmostaqltradent