يجب إضافة خاصية controls attribute لكي يظهر على المتصفح شريط الأدوات الخاص بالمقطع المرئي، والذي تظهر فيه خيارات التحكم في إيقاف الفيديو وتشغيله، وخيارات كتم الصوت وتشغيله وغير ذلك..
عن طريق خاصية height وخاصية width يمكن التحكم في طول وعرض الفيديو.
يجب إضافة عنصر <source> بداخل عنصر <video> لتحديد مسار الفيديو.
عن طريق خاصية src مع عنصر <source> يتم الإشارة إلى مسار الفيديو سواء كان المسار من رابط خارجي أو رابط داخلي.
النص الموجود بين علامة open tag وبين علامة closet tag (علامة بداية عنصر <video> وعلامة إغلاق العنصر) يظهر فقط على المتصفحات التي لا تدعم المقطع المرئي.
امتداد ملفات الصوت المسموح بها مع عنصر HTML video هي: MP4,WebM,Ogg.

جربها بنفسك

HTML video

يُستخدم عنصر HTML video لعرض مقطع مرئي على صفحة الويب.

<video width="320" height="240">
  <source src="/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

جربها بنفسك

</> HTML video attributes
خصائص عنصر HTML video

تُستخدم عدّة خصائص مع عنصر HTML video حيث تمتلك كل خاصية وظيفة محدّدة، وهذه الخصائص هي:

attribute الخاصية	شرح الخاصية ووظيفتها description
autoplay	تُستخدم هذه خاصية لتشغيل الفيديو بشكل تلقائي عند تحميل الصفحة، حيث لا يستمر تشغيل الفيديو إلى نهايته. خاصية autoplay من النوع boolean حيث تأخذ خاصية autoplay إحدى القيمتين: true: للسماح بالتشغيل التلقائي للفيديو. False: لعدم السماح بالتشغيل التلقائي للفيديو.
controls	تُستخدم هذه الخاصية لإظهار عناصر التحكم الخاصة بالفيديو على المتصفح.
loop	تُستخدم هذه الخاصية لتكرار تشغيل الفيديو عند تحديدها، كما تأخذ هذه الخاصية إحدى القيمتين (true / false).
poster	تستخدم هذه الخاصية لإضافة صورة يتم عرضها عند تحميل الفيديو من خلال إضافة عنوان URL خاص بالصورة. إذا لم يتم تحديد هذه الخاصية، لن يتم عرض أي صورة أثناء تحميل الفيديو.
muted	تُستخدم هذه الخاصية لكتم الصوت الخاص بالفيديو في بداية تشغيله في حال تعيينه، كما يمكن أن تأخذ هذه الخاصية إحدى القيمتين: True: تجعل الفيديو بلا صوت. False: تترك الفيديو مع صوته كما هو.
preload	تهدف هذه الخاصية إلى تقديم تلميح للمتصفح حول ما يعتقد المؤلف أنه سيؤدي إلى أفضل تجربة للمستخدم فيما يتعلق بالمحتوى الذي يتم تحميله قبل تشغيل الفيديو. ويمكن أن تحتوي على إحدى القيم التالية: none : تعني أن الفيديو لن يتم تحميله بشكل تلقائي عند تحميل الصفحة. auto : تعني أن المستخدم يستطيع تحميل الفيديو.

</> HTML video autoplay
خاصية autoplay مع عنصر HTML video

تُستخدم خاصية autoplay attribute لتشغيل الفيديو بشكل تلقائي عند فتح وتحميل صفحة الويب، لكن لا تسمح المتصفحات الحديثة بتشغيل الفيديو تلقائياً إلا بعد كتم صوته.

جربها بنفسك

HTML video autoplay

خاصية autoplay مع HTML video.

<video width="320" height="240" autoplay>
  <source src="/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

جربها بنفسك

</> HTML video muted
خاصية muted مع عنصر HTML video

تُستخدم خاصية muted بعد خاصية autoplay حتى يتم كتم صوت الفيديو عند تشغيله تلقائياً، وذلك لضمان عدم إزعاج زوار صفحة الويب.

جربها بنفسك

HTML video muted

خاصية muted مع عنصر HTML video.

<video width="320" height="240" autoplay muted>
  <source src="/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

جربها بنفسك

لا يسمح متصفح Google Chrome بتشغيل الفيديو تلقائياً إلا في حالة كتم صوت الفيديو.

</> HTML video types
أنواع الفيديوهات المسموح بها مع عنصر HTML video

قائمة امتدادات الفيديوهات المسموح بها مع عنصر HTML video.

video format	MIME type
mp4	video/mp4
ogg	video/ogg
webM	video/webM

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Video
مقاطع الفيديو في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Video HTML