العنصر <video>
يُستعمَل العنصر <video> لتضمين المحتوى المرئي في المستندات، وقد يحتوي على ملف مصدري واحد أو أكثر التي تُمثَّل باستخدام الخاصية src أو عبر العنصر <source>، وسيختار المتصفح أنسب صيغة لتشغيلها.
مثال عن استخدام العنصر <video> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية src) بارتفاع 360، مع عرض عناصر التحكم (عبر الخاصية controls) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية poster)، وستُعرَض رسالة نصية تنوِّه المستخدم أنَّ متصفحه لا يدعم العنصر <video>:
<video src="khamsat.webm" controls poster="khamsat-poster.jpg" height="360">
لا يدعم متصفحك العنصر <code>video</code>.
</video>
هذا المثال عن استخدام العنصر <video> لإضافة مقطع فيديو بصيغة WebM (عبر الخاصية src) مع عناصر تحكم (عبر الخاصية controls) ويبدأ تشغيله تلقائيًا (الخاصية autoplay) مع عرض تفريغ نصي (captions) بالعربية وذلك عبر العنصر <track>:
<video src="khamsat.webm" controls autoplay height="360">
<track kind="captions" src="khamsat.vtt" srclang="ar" label="عربي" default>
لا يدعم متصفحك العنصر <code>video</code>.
</video>
أما هذا المثال فيوفِّر مصدرين مختلفين للمقطع، مما يسمح بتشغيله في المتصفح مهما كانت المرمازات (codex) التي يدعمها المتصفح، إذ سيُجرِّب المتصفح صيغة WebM وإن لم يستطع تشغيلها فسيجرب تشغيل MP4.
لاحظ استخدام الخاصية height لتحديد ارتفاع الفيديو (بالبكسل)، مع استخدام الخاصية controls لإضافة عناصر للتحكم بالمقطع، والخاصية poster لإضافة غلاف له.
<video controls poster="khamsat-poster.jpg" height="360">
<source src="khamsat.webm" type="video/webm">
<source src="khamsat.mp4" type="video/mp4">
لا يدعم متصفحك العنصر <code>video</code>.
</video>
بطاقة العنصر
| تصنيفات المحتوى | عنصر تنظيمي أو عنصر عادي أو عنصر يحتوي وسائط مضمّنة أو عنصر تفاعلي. |
|---|---|
| المحتوى المسموح | إذا كان للعنصر الخاصية src فيمكن أن يحتوي على عنصر <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.