شرح عنصر Video

أهلا بكم في كود ويب
أهلا بكم في درس جديد من دروس html5
في هذا الدرس سوف نتعرف على عنصر جديد وهو عنصر Video ، من خلال هذا العنصر يمكننا إدرج ملفات الفيديو فى صفحة الويب أو في موقعك بسهولة.
كما يمكنك التحكم في إعدادات مشغل الفيديو مثل كيف تجعله يشتغل تلقائيا عندما يقوم الزائر بفتح الصفحة مباشرة ، وكيف تقوم بإظهار خيارات الصوت مثل أزرار المشغل وغيره.

خصائص المشغل
العنصر	الوظيفة	يضاف ضمن
video	لتعريف أن هذا العنصر خاص بالفيديو
src='#'	لتحديد مسار ملف الفيديو استبدل رمز # بمسار الملف	video
controls	لإظهار مشغل الفديو فى المتصفح	video
autoplay	لتشغيل الفيديو تلقائيا	video
loop	تكرار الفيديو تلقائيا	video
muted	كتم الصوت تلقائيا	video
preload='auto'	تحميل الفيديو بالكامل عند بداية فتح الموقع	video
preload='metadata'	تحميل بيانات الملف فقط	video
preload='none'	وهو الوضع الافتراضى أى بعد الضغط على زر التشغيل تنتظر لحظات حتى يقوم بتجهيز الملف	video
width	تخصيص عرض المشغل	video
height	تخصيص ارتفاع المشغل	video

الكود المستخدم

 
<video src="#" controls width='300' height='200'></video>

النتيجةنلاحظ هنا ظهور المشغل دون ظهور الفيديو لأننا لم نقوم بإضافة مسار الفيديو بعد

مثال

 
<video src="http://media.natgeotv.com/bc/streams/1688195154/1688195154_634622928001_5635.mp4" controls width='100%' height='300'></video>

النتيجةفي المثال التالى تم استخدمنا عنصر video ثم استخدما خاصية src لتحديد رابط مسار الفيديو ثم استخدمنا خاصية controls ليظهر المشغل فى المتصفح ثم استخدمنا width لتحديد عرض المشغل كما نريد وأيضا استخدمنا height لتحديد ارتفاع المشغل

تشغيل الفيديو تلقائيا

من خلال استخدام خاصية autoplay ضمن عنصر video يمكننا جعل المشغل يقوم بتشغيل الفيديو تلقائيا عند تحميل الصفحة
الكود المستخدم


<video src="http://media.natgeotv.com/bc/streams/1688195154/1688195154_634622928001_5635.mp4" controls width='100%' height='500' autoplay></video>

اضغط هنا لمشاهدة النتيجة

تكرار الفيديو إلى مالا نهاية

من خلال استخدام خاصية autoplay ضمن عنصر audio يمكننا جعل المشغل يقوم بتشغيل الفيديو تلقائيا عند تحميل الصفحة ما ثم استخدمنا خاصية loop لجعل المشغل يقوم بتكرار الفيديو إلى مالا نهاية
الكود المستخدم


<video src="http://media.natgeotv.com/bc/streams/1688195154/1688195154_634622928001_5635.mp4" controls width='100%' height='500' autoplay loop></video>

اضغط هنا لمشاهدة النتيجة

تمارين

- كيف يمكنك إدراج مشغل وسائط الفيديو فى صفحة ما؟
- كيف يتم تشغيل الفيديو تلقائيا عند بداية تحميل الصفحة؟
- كيف يتم تكرار الفيديو تلقائيا إلى ما لا نهاية؟
- كيف يتم تفعيل خاصية كتم الصوت للمشغل تلقائيا عند بداية تحميل الصفحة؟
- هل يمكنك إدراج فيديو يعمل تلقائيا عند بداية تحميل الصفحة مع عدم ظهور المشغل فى الصفحة؟