وثائق HTML قابلة للتشغيل: وسم video

Q: كيف أضيف فيديو في HTML؟

استخدم . السمة controls تُظهر زر التشغيل والشريط الزمني ومستوى الصوت في المتصفح. من دونها يُظهر الفيديو إطاره الأول (أو صورة الغلاف) ولا يستطيع المستخدم تشغيله.

Q: لماذا لا يعمل التشغيل التلقائي للفيديو؟

تمنع المتصفحات التشغيل التلقائي مع الصوت. أضف muted بجانب autoplay، وplaysinline كي تشغّله أجهزة iPhone داخل الصفحة بدلًا من ملء الشاشة: .

Q: كيف أضيف صورة مصغرة إلى الفيديو؟

استخدم السمة poster مع عنوان صورة: . تظهر الصورة حتى يبدأ تشغيل الفيديو.

Q: كيف أضيف ترجمة إلى فيديو HTML؟

أضف داخل الفيديو. يستخدم الملف صيغة WebVTT، ويُظهر المتصفح زر الترجمة في عناصر التحكم.

Q: كيف أجعل الفيديو متجاوبًا؟

اضبط width: 100% وheight: auto في CSS (أو max-width: 100%). يتكيف الفيديو مع حاويته ويحافظ على نسبة أبعاده.

كيف تضيف فيديو

اجعل العنصر <video> يشير إلى ملف فيديو وأضف controls كي يستطيع القارئ تشغيله:

<video src="movie.mp4" controls width="640"></video>

controls تُظهر مشغل المتصفح الخاص: التشغيل والإيقاف المؤقت، والشريط الزمني، ومستوى الصوت، وملء الشاشة. من دونها يبقى الفيديو ساكنًا. هذه المعاينة لا تستطيع تحميل ملفات الفيديو، لذلك تغذي الأمثلة في هذه الصفحة العنصر من رسم متحرك صغير على canvas يرسمه سكربت، والسمات تعمل تمامًا كما تعمل مع ملف:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

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

سمات الفيديو

السمة	وظيفتها
`controls`	تُظهر عناصر التحكم في مشغل المتصفح
`autoplay`	يبدأ التشغيل بمجرد الإمكان (عمليًا فقط مع `muted`)
`muted`	يبدأ والصوت مكتوم
`loop`	يبدأ من جديد حين ينتهي
`playsinline`	يُشغَّل داخل الصفحة على iPhone بدلًا من الانتقال إلى ملء الشاشة
`poster="thumb.jpg"`	صورة تظهر قبل تشغيل الفيديو
`preload`	`none` أو `metadata` (الحجم والمدة فقط) أو `auto` (المتصفح يقرر كم ينزّل)
`width`, `height`	الحجم بالبكسل، وضبطهما معًا يحجز المساحة قبل تحميل الفيديو

التشغيل التلقائي وmuted وloop

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

السمات الأربع تعمل كمجموعة: autoplay للبدء، وmuted كي يسمح المتصفح بذلك، وloop للمقطع المتكرر، وplaysinline كي لا تفتحه أجهزة iPhone بملء الشاشة. الفيديو الذي يعمل تلقائيًا مع الصوت ليس ممنوعًا فحسب، بل هو مشكلة أيضًا لمستخدمي قارئات الشاشة الذين يغرق كلامهم فيه. وإذا استمر مقطع أكثر من خمس ثوانٍ، فأعطِ الناس طريقة لإيقافه مؤقتًا.

صورة الغلاف وpreload

poster تُظهر صورة قبل تشغيل الفيديو، مثل الصورة المصغرة. هنا لا مصدر للفيديو إطلاقًا، فالغلاف هو كل ما يمكن رؤيته:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

مع preload="none" لا ينزّل المتصفح شيئًا حتى يضغط القارئ زر التشغيل، والغلاف يمنع المساحة من أن تبدو فارغة. استخدم preload="metadata" حين تريد أن تظهر المدة قبل التشغيل. ومن دون غلاف تُظهر معظم المتصفحات الإطار الأول بعد تحميله.

الصيغ والبدائل بـ source

بدلًا من src يمكنك إدراج عدة ملفات بعناصر <source>. يشغّل المتصفح أول ملف يدعمه:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

MP4 بترميز H.264 يعمل في كل المتصفحات الحالية، فهو الخيار الآمن حين يكون لديك ملف واحد فقط. السمة type تتيح للمتصفح تخطي الصيغ التي لا يستطيع تشغيلها من دون تنزيلها. والنص في النهاية لا يظهر إلا في المتصفحات التي لا تدعم <video> أصلًا.

الترجمات بـ track

<track kind="captions"> يحمّل ملف WebVTT، وهو ملف نصي عادي من أسطر موقوتة. يضيف المتصفح زر ترجمة إلى عناصر التحكم ويرسم النص فوق الفيديو:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

الترجمات تساعد الصم وضعاف السمع، ومن يشاهدون والصوت مغلق، وكل من يتابع فيديو بلغة ثانية. أضف default إلى المسار لإظهاره من دون نقر. وملف الترجمة من نطاق آخر يحتاج إلى ترويسات CORS وcrossorigin على الفيديو.

التنسيق والتحكم بـ JavaScript

الفيديو عنصر مستبدَل مثل الصورة: width: 100% مع height: auto تجعله متجاوبًا، وobject-fit تحدد كيف يملأ صندوقًا بشكل مختلف. تحصل JavaScript على play() وpause() وcurrentTime وvolume وأحداث مثل play وpause وended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() تُرجع promise تُرفض حين يمنع المتصفح التشغيل (مثل التشغيل التلقائي غير المكتوم)، لذلك يجب أن تلتقطها شيفرة الإنتاج بـ catch. بناء عناصر تحكم خاصة اختياري، فعناصر controls المدمجة تعمل بلوحة المفاتيح ومترجمة، وعلى الأزرار المخصصة أن تعيد إنتاج ذلك. أما الفيديوهات المستضافة على YouTube أو Vimeo فتضمّن مشغلها بـ iframe بدلًا من ذلك.

أخطاء شائعة

التشغيل التلقائي بلا muted. يمنعه المتصفح. أضف muted وplaysinline.
نسيان controls. ما لم تبنِ عناصر تحكم خاصة، لا يملك القارئ طريقة لتشغيل الفيديو.
غياب width وheight. تقفز الصفحة حين يُحمَّل الفيديو. اضبطهما معًا، ثم غيّر الحجم بـ CSS.
ملفات ضخمة. اضغط الفيديوهات للويب واستخدم preload="none" أو "metadata" للفيديوهات الموجودة أسفل الصفحة.
فيديوهات فيها كلام بلا ترجمة. أضف <track kind="captions">.

الأسئلة الشائعة

كيف أضيف فيديو في HTML؟

استخدم <video src="movie.mp4" controls width="640"></video>. السمة controls تُظهر زر التشغيل والشريط الزمني ومستوى الصوت في المتصفح. من دونها يُظهر الفيديو إطاره الأول (أو صورة الغلاف) ولا يستطيع المستخدم تشغيله.

لماذا لا يعمل التشغيل التلقائي للفيديو؟

تمنع المتصفحات التشغيل التلقائي مع الصوت. أضف muted بجانب autoplay، وplaysinline كي تشغّله أجهزة iPhone داخل الصفحة بدلًا من ملء الشاشة: <video autoplay muted loop playsinline>.

ما صيغة الفيديو التي أستخدمها للويب؟

MP4 بترميز H.264 يعمل في كل المتصفحات الحالية، فهو الخيار الافتراضي الآمن. يمكنك إدراج ملف WebM أصغر أولًا بـ <source> وترك المتصفح يختار أول صيغة يدعمها.

كيف أضيف صورة مصغرة إلى الفيديو؟

استخدم السمة poster مع عنوان صورة: <video poster="thumb.jpg" controls>. تظهر الصورة حتى يبدأ تشغيل الفيديو.

كيف أضيف ترجمة إلى فيديو HTML؟

أضف <track kind="captions" src="captions.vtt" srclang="en" label="English"> داخل الفيديو. يستخدم الملف صيغة WebVTT، ويُظهر المتصفح زر الترجمة في عناصر التحكم.

كيف أجعل الفيديو متجاوبًا؟

اضبط width: 100% وheight: auto في CSS (أو max-width: 100%). يتكيف الفيديو مع حاويته ويحافظ على نسبة أبعاده.

مفاهيم ذات صلة