HTML

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

سوف تتعلم في هذا الدرس كيفية عرض المقاطع المرئية videos داخل صفحة HTML، عن طريق استخدام عنصر <video> كما ستتعرف أيضاً على جميع خصائص هذا العنصر.

التاريخ

29 يناير 2020

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

4626

المواضيع

12
الشروحات chevron_left HTML Video chevron_left HTML

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

</> HTML video
مقاطع الفيديو في لغة HTML

تستطيع تشغيل فيديو في صفحة HTML عن طريق استخدام عنصر <video>.

  • يجب إضافة خاصية 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
مصطلحات الدرس
Video
Video

فيديو

Videos
Videos

فيديوهات

Element
Element

عنصر

Controls
Controls

تحكم

Play
Play

تشغيل

Pause
Pause

إيقاف مؤقت

Volume
Volume

مستوي الصوت

Width
Width

عرض

Height
Height

ارتفاع

Source
Source

مصدر

External
External

خارجي

Internal
Internal

داخلي

Autoplay
Autoplay

تشغيل تلقائي

Muted
Muted

صامت

Google Chrome
Google Chrome

موقع جوجل كروم

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
Src
Src

source

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

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.