HTML/video

يُستعمَل العنصر <video> لتضمين المحتوى الصوتي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية src أو عبر العنصر <source>، وسيختار المتصفح أنسب صيغة لتشغيلها.

مثال عن استخدام العنصر <video> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية src) يبدأ تلقائيًا (عبر الخاصية autoplay) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية poster)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <video>:

<video src="videofile.webm" autoplay poster="posterimage.jpg">
Sorry, your browser doesn't support embedded videos, 
but don't worry, you can <a href="videofile.webm">download it</a>
and watch it with your favorite video player!
</video>

هذا المثال عن استخدام العنصر <video> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية src) مع عرض ترجمتين (subtitles) واحدة بالإنكليزية والأخرى بالعربية وذلك عبر العنصر <track>:

<video src="videofile.webm">
  <track kind="subtitles" src="videofile.en.vtt" srclang="en"
    label="English">
  <track kind="subtitles" src="videofile.sv.vtt" srclang="ar"
    label="Arabic">
</video>

أما هذا المثال فيوفِّر ثلاثة مصادر مختلفة للمقطع، مما يسمح بتشغيله في المتصفح مهما كانت المرمازات (codex) التي يدعمها المتصفح، إذ سيُجرِّب المتصفح صيغة WebM وإن لم يستطع تشغيلها فسيجرب تشغيل MP4، وإن لم يستطع تشغيلها فسيجرب OGG. لاحظ استخدام الخاصية width لتحديد عرض الفيديو (بالبكسل)، مع استخدام الخاصية controls لإضافة عناصر للتحكم بالمقطع، والخاصية poster لإضافة غلاف له.

<video width="480" controls poster="videofile.gif" >
  <source src="videofile.webm" type="video/webm">
  <source src="videofile.mp4" type="video/mp4">
  <source src="videofile.ogv" type="video/ogg">
  Your browser doesn't support HTML5 video tag.
</video>

تصنيفات المحتوى	عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي.
المحتوى المسموح	إذا كان للعنصر الخاصية src فيمكن أن يحتوي على عنصر <track> واحد أو أكثر يتبعه محتوى عادي لا يتضمن العنصرين <audio> و <video>. أما إذا لم تكن له الخاصية src فيمكن أن يحتوي على عنصر <source> واحد أو أكثر، يتبعه عنصر <track> واحد أو أكثر ويتبعه محتوى عادي لا يتضمن العنصر <audio> و <video>.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل العناصر التضمينية.
واجهة DOM	HTMLVideoElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

بعض الخاصيات المُضافة حديثًا في HTML5 لا تعمل في جميع المتصفحات.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

autoplay

هذه الخاصية منطقية (Boolean) وإذا اُستعملت (حتى لو كانت قيمتها "false"!) فسيبدأ تشغيل مقطع الفيديو في أسرع وقت ممكن، دون الانتظار حتى يكتمل تنزيل الملف كله.

لاحظ أنَّ المواقع التي تُشغِّل الصوت تلقائيًا (أو تُشغِّل مقاطع الفيديو التي لها صوت) يمكن أن تزعج المستخدمي، لذا يجب تفادي استخدام هذه الخاصية إلا عند الضرورة، وإذا كان لا بُدّ فيجب أن تجعل هذه الميزة اختيارية وتطلب من المستخدم تفعيله. لكن قد تستفيد من هذه الميزة لو كان الغرض الرئيسي من الصفحة هو تشغيل مقطع فيديو معيّن.

buffered

خاصية قابلة للقراءة لتحديد ما هي المجالات التي نُزِّلَت من المقطع، إذ تحتوي هذه الخاصية على كائن TimeRanges.

controls

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

height

ارتفاع منطقة عرض الفيديو بواحدة البكسل (يسمح بالقيم المطلقة فقط، ولا يجوز استخدام القيم النسبية).

width

عرض منطقة عرض الفيديو بواحدة البكسل (يسمح بالقيم المطلقة فقط، ولا يجوز استخدام القيم النسبية).

loop

هذه الخاصية منطقية (Boolean)، فإن كانت موجودةً فسيُعاد تشغيل المقطع من البداية بعد الوصول إلى نهايته.

muted

هذه الخاصية منطقية (Boolean) تُشير إذا ما كان المقطع مكتوم الصوت بادئ الأمر. القيمة الافتراضية هي false.

played

هذه الخاصية قابلة للقراءة وتحتوي على كائن TimeRanges الذي يُشير إلى المجالات التي شغّلها المستخدم من المقطع.

preload

الغرض من هذه الخاصية هو إعطاء المتصفح فكرة عمّا يظنه مطور الصفحة أفضل لتجربة المستخدم، وتأخذ إحدى القيم الآتية:

• none: يجب ألّا يُحمَّل المقطع مسبقًا.
• metadata: يجب أن تُحمَّل البيانات الوصفية (مثل طول المقطع) فقط.
• auto: تُشير إلى أنَّ المقطع يمكن أن يُحمَّل حتى لو كان من المتوقع ألّا يشغله المستخدم.
• إذا كانت القيمة هي سلسلة نصية فارغة فهي تكافئ القيمة auto.

إذا لم تُضبَط قيمة هذه الخاصية، فستؤخذ القيمة الافتراضية من المتصفح (ولكل متصفح قيمة افتراضية خاصة به)، لكن تنصح المواصفة المتصفحات أن تكون القيمة الافتراضية هي metadata.

لاحظ أنَّ الخاصية autoplay لها أولوية على الخاصية preload، فلو حُدِّدَت الخاصية autoplay فمن المنطقي أن يبدأ المتصفح تنزيل المقطع مباشرةً.

يجدر بالذكر أنَّ المواصفة لم تُجبِر المتصفح على اتباع قيمة هذه الخاصية، فهي مجرد تلميحة عمّا يريده مطوِّر الصفحة.

poster

رابط URL يُشير إلى غلاف للفيديو الذي سيظهر حتى يبدأ المستخدم تشغيل الفيديو. إن لم تُحدَّد قيمة هذه الخاصية فلن يُعرَض شيء حتى يتوافر أوّل إطار من إطارات الفيديو، ثم سيُعرَض أوّل إطار كغلاف للفيديو.

src

تحتوي هذه الخاصية على رابط URL لملف الفيديو الذي سيُحمَّل، وهذه الخاصية اختيارية، ويمكنك استخدام العنصر <source> داخل العنصر <video> لتحديد رابط URL للمقطع (أو المقاطع) التي ترغب في تضمينها.

ملاحظات الاستخدام

يمكن أن يحتوي العنصر <video> على رابط URL لمقطع أو أكثر من مقاطع الفيديو، يمكن استخدام الخاصية src أو العنصر <source>، وسيختار المتصفح أكثر مقطع ملائم لتشغيله.

دعم الخادوم

إن كان نوع MIME لنوع مقاطع الفيديو الذي تستعمله ليس مضبوطًا ضبطًا صحيحًا، فقد لا يظهر مقطع الفيديو أو سيُعرَض مستطيلٌ فضيٌ يحتوي على إشارة × (إن كانت JavaScript مفعّلة).

إذا كنتَ تستخدم خادوم أباتشي (Apache) لتخديم مقاطع فيديو Ogg، فيمكنك حلّ هذه المشكلة بإضافة لاحقة ملفات الفيديو إلى نوع MIME باسم "video/ogg". أشهر امتدادات ملفات فيديو Ogg هي "‎.ogm" و "‎.ogv" و "‎.ogg".

لفعل ذلك عليك تعديل ملف mime.types في مجلد ‎/etc/apache أو استخدم تعليمة الضبط AddType في ملف httpd.conf:

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

أما إذا كانت صيغة ملفات الفيديو عندك هي WebM، فيمكنك حلّ هذه المشكلة في خادوم أباتشي بإضافة الامتداد الذي تستعمله لمقاطع الفيديو عندك (أشهر امتداد هو "‎.webm") إلى نوع MIME باسم "video/webm" في ملف mime.types في مجلد ‎/etc/apache أو استخدم تعليمة الضبط AddType في ملف httpd.conf:

AddType video/webm .webm

قد يوفِّر لك موفِّر خدمة الاستضافة واجهةً سهلةً لتعديل ضبط أنواع MIME.

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.