يستخدم الوسم <video> لإعلام المتصفح اننا سوف نقوم بعرض ملف فيديو فى الصفحة.
والوسم <video> له وسم الإغلاق <video/>
وتتشابه خصائص الوسم <video> بنسبة كبيرة مع خصائص الوسم <audio> الذى سبق شرحه فى الدرس السابق.
ولتحديد مسار ملف الفيديو نستخدم src ونتبعه بمسار الملف مع الامتداد.
كما يمكن استخدام الوسم
<source src="مسار ملف الفيديو +الامتداد" type="نوع ملف الفيديو">
video type
بصفة عامة يوجد ثلاثة أنواع من ملفات الفيديو مدعومة بشكل كامل من جميع المتصفحات الحديثة وهذه الأنواع هي التى لها الامتداد:-
mp4 - ogg - webm
type ="video/mp4"
type="video/ogg"
type="video/webm"
وللوسم <video> العديد من الخصائص attributes منها
controls
ويستخدم لإظهار أزرار التحكم فى ملف الفيديو مثل تشغيله وإيقافه .
autoplay
ويستخدم للتشغيل التلقائي لملف الفيديو بمجرد تحميل صفحة الويب مع ملاحظة أن هذه الخاصية لا تعمل على متصفح جوجل كروم chrome browser.
muted
ويستخدم لكتم الصوت بحيث عند تحميل ملف الفيديو يظهر الصوت مكتوماً بشكل افتراضي.
loop
ويعمل على إعادة تشغيل الفيديو كلما انتهى ملف الفيديو من العرض يعيد تشغيله مرة أخرى.
width
ويعمل على تحديد عرض نافذة الفيديو والرقم الذي نقوم بإدخاله يكون بالبيكسل
height
ويعمل على تحديد ارتفاع(طول) نافذة الفيديو والرقم الذى نقوم بإدخاله يكون بالبيكسل.
<video controls width="400" height="300" autoplay muted>
<source src="media/excel.mp4" type="video/mp4">
المتصفح لا يدعم عرض الفيديو
</video>
كما يمكن عرض عنوان للفيديو من خلال الخاصية figcaption كما هو موضح.
<figure>
<video controls width="400" height="300" autoplay muted>
<source src="media/excel.mp4" type="video/mp4">
المتصفح لا يدعم عرض الفيديو
</video>
<figcaption> السؤال الثاني فى برنامج الاكسل خاصية الملء التلقائي </figcaption>
</figure>
poster
وهذه الخاصية تعمل على عرض صورة في نافذة الفيديو حتى يتم تحميل الفيديو أو حتى يتم تشغيل الفيديو.
<figure>
<video controls width="400" height="300" poster="images/excel.jpg">
<source src="media/excel.mp4" type="video/mp4">
المتصفح لا يدعم عرض الفيديو
</video>
<figcaption> السؤال الثاني فى برنامج الاكسل خاصية الملء التلقائي </figcaption>
</figure>
نلاحظ أنه تم وضع الصورة التى اخترناها فى نافذة الفيديو وتظهر حتى يتم تشغيل الفيديو.
المشاركات
ليست هناك تعليقات:
إرسال تعليق