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