شرح عنصر 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>
اضغط هنا لمشاهدة النتيجة

تمارين

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