عنصر HTML <video> يُستخدم لعرض مقطع فيديو على صفحة الويب.
مثال
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
إليك شرح كيفية عمل عنصر الفيديو
عناصر التحكم:
- الخاصية
controlsتُضيف عناصر التحكم بالفيديو مثل التشغيل والإيقاف المؤقت والصوت. - يُنصح دائمًا بتضمين خاصيتي
widthوheightلتحديد عرض وارتفاع الفيديو. إذا لم يتم تحديدهما، فقد تومض الصفحة أثناء تحميل الفيديو.
المصادر البديلة:
- عنصر
<source>يسمح لك بتحديد ملفات فيديو بديلة يمكن للمتصفح الاختيار منها. سيستخدم المتصفح أول تنسيق يمكنه التعرف عليه.
المحتوى البديل:
- النص الموجود بين علامتي
<video>و</video>سيظهر فقط في المتصفحات التي لا تدعم عنصر الفيديو.
HTML <فيديو> التشغيل التلقائي
لبدء تشغيل الفيديو تلقائيًا، استخدم الخاصية autoplay في عنصر الفيديو:
مثال:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
ملاحظة هامة: لا تسمح متصفحات Chromium (مثل Chrome و Edge) بالتشغيل التلقائي في معظم الحالات. ومع ذلك، يُسمح دائمًا بالتشغيل التلقائي مع إسكات الصوت.
لتشغيل الفيديو تلقائيًا مع إسكات الصوت، أضف الخاصية muted بعد الخاصية autoplay:
مثال:
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
دعم المتصفحات للفيديو <video>:
يوضح الجدول أول إصدار من كل متصفح يدعم عنصر الفيديو بشكل كامل:
| المتصفح | الإصدار |
|---|---|
| Internet Explorer | 9.0 |
| Chrome | 4.0 |
| Firefox | 3.5 |
| Safari | 4.0 |
| Opera | 10.5 |
تنسيقات الفيديو المدعومة في HTML:
يوجد ثلاث تنسيقات فيديو مدعومة بشكل أساسي في HTML:
- MP4: التنسيق الأكثر شيوعًا واستخدامًا على الإنترنت، مدعوم من جميع المتصفحات الحديثة.
- WebM: تنسيق مفتوح المصدر يتميز بجودة عالية وحجم ملفات صغير نسبيًا، مدعوم من معظم المتصفحات الحديثة ما عدا Safari.
- Ogg: تنسيق مفتوح المصدر آخر، مدعوم من معظم المتصفحات الحديثة ما عدا Safari.
دعم المتصفحات للتنسيقات المختلفة:
| المتصفح | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | نعم | نعم | نعم |
| Chrome | نعم | نعم | نعم |
| Firefox | نعم | نعم | نعم |
| Safari | نعم | نعم | لا |
| Opera | نعم | نعم | نعم |
أنواع الوسائط المستخدمة في فيديوهات HTML:
يوضح الجدول أنواع الوسائط (Media Types) المرتبطة بكل تنسيق ملف فيديو:
| صيغة الملف | نوع الوسائط |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
طرق وخصائص وأحداث فيديو HTML:
يحدد HTML DOM طرق وخصائص وأحداث خاصة لعنصر الفيديو <video>. يسمح ذلك بالتحكم في الفيديو باستخدام JavaScript، بما في ذلك:
طرق التحكم:
play(): تشغيل الفيديو.pause(): إيقاف الفيديو مؤقتًا.load(): تحميل الفيديو.
خصائص الفيديو:
src: مسار الفيديو.currentTime: الوقت الحالي للتشغيل بالثواني.duration: المدة الإجمالية للفيديو بالثواني.volume: مستوى الصوت (من 0 إلى 1).paused: قيمة boolean تشير إلى ما إذا كان الفيديو متوقفًا مؤقتًا أم لا.ended: قيمة boolean تشير إلى ما إذا كان الفيديو قد انتهى أم لا.
أحداث الفيديو:
play: يتم إطلاقه عند بدء تشغيل الفيديو.pause: يتم إطلاقه عند إيقاف الفيديو مؤقتًا.ended: يتم إطلاقه عند انتهاء الفيديو.
مثال باستخدام JavaScript:
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
<p>Video courtesy of <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
