<video> يتيح تشغيل فيديو مباشرة في المتصفح دون plugins.
أهم الصفات: • src: مسار الفيديو • controls: يُظهر أدوات التحكم (play, pause, volume) • autoplay: تشغيل تلقائي (يحتاج muted في المتصفحات الحديثة) • muted: كتم الصوت • loop: تكرار • poster: صورة تظهر قبل التشغيل • preload: auto | metadata | none • width, height: الأبعاد
صيغ الفيديو المدعومة: • MP4 (H.264): مدعوم في كل مكان • WebM (VP9): أصغر حجماً • OGV: قديم، نادر الاستخدام
<track> - الترجمة والتسميات: • kind="subtitles": ترجمة الحوار • kind="captions": توضيحات للصم • kind="descriptions": وصف صوتي للمكفوفين • srclang: لغة الترجمة • label: اسم الترجمة في القائمة
| 1 | <!-- فيديو أساسي --> |
| 2 | <video controls width="800" height="450" poster="/thumbnail.jpg"> |
| 3 | <source src="/video/course-intro.mp4" type="video/mp4"> |
| 4 | <source src="/video/course-intro.webm" type="video/webm"> |
| 5 | <p>متصفحك لا يدعم الفيديو. <a href="/video/course-intro.mp4">حمّله هنا</a></p> |
| 6 | </video> |
| 7 | |
| 8 | <!-- فيديو مع ترجمة --> |
| 9 | <video controls width="800" poster="/thumbnail.jpg"> |
| 10 | <source src="/video/lesson.mp4" type="video/mp4"> |
| 11 | <track src="/subs/arabic.vtt" kind="subtitles" srclang="ar" label="العربية" default> |
| 12 | <track src="/subs/english.vtt" kind="subtitles" srclang="en" label="English"> |
| 13 | </video> |
| 14 | |
| 15 | <!-- فيديو خلفية صامت --> |
| 16 | <video autoplay muted loop playsinline> |
| 17 | <source src="/bg-video.mp4" type="video/mp4"> |
| 18 | </video> |
مثال 1: مشغل فيديو دورة تعليمية
| 1 | <section class="video-lesson"> |
| 2 | <h2>الدرس الأول: مقدمة HTML</h2> |
| 3 | |
| 4 | <video |
| 5 | controls |
| 6 | width="100%" |
| 7 | poster="/lessons/html-intro-thumbnail.jpg" |
| 8 | preload="metadata" |
| 9 | > |
| 10 | <!-- WebM أولاً لأنه أصغر --> |
| 11 | <source src="/lessons/html-intro.webm" type="video/webm"> |
| 12 | <!-- MP4 كـ fallback --> |
| 13 | <source src="/lessons/html-intro.mp4" type="video/mp4"> |
| 14 | |
| 15 | <!-- ترجمة عربية --> |
| 16 | <track |
| 17 | src="/subs/lesson1-ar.vtt" |
| 18 | kind="subtitles" |
| 19 | srclang="ar" |
| 20 | label="العربية" |
| 21 | default |
| 22 | > |
| 23 | |
| 24 | <!-- للمتصفحات القديمة --> |
| 25 | <p>متصفحك قديم. <a href="/lessons/html-intro.mp4">حمّل الفيديو</a></p> |
| 26 | </video> |
| 27 | </section> |