قبل ظهور HTML 5 ، كان على مطوري الويب تضمين الفيديو على صفحة ويب باستخدام مكون إضافي مثل Adobe flash player.
اليوم ، يمكنك بسهولة تضمين مقاطع الفيديو في HTML باستخدام الوسم <video> .
في هذه المقالة ، سنرى :
كيف يعمل الوسم <video> في HTML.
النحو الأساسي Basic Syntax
تمامًا مثل الوسم <img>، مع الخاصية src والتي تحتاج من خلالها إلى تحديد مصدر الفيديو.
بشكل افتراضي ، يتم عرضها كصورة في المتصفح:
نقوم بكتابة كود CSS هذا لتوسيط كل شيء في صفحة الويب وتغيير لون الخلفية لرؤية افضل :
بالإضافة إلى ذلك ، يمكنك تحديد مصادر فيديو متعددة بواسطة الوسم <source>
الوسم <source> يجب أن يحمل الخاصية src أيضًا.
يمكنك استخدام الوسم <source> مرات متعددة مع تنسيقات مختلفة لنفس الفيديو. سيقوم المتصفح بعد ذلك بتشغيل التنسيق الذي يدعمه.
خواص الوسم <video>
يدعم الوسم <video> :
الخواص العامة
مثل id - class - style وما إلى ذلك.
إذا كنت تتساءل عن الخواص العامة ، فهي خواص تدعمها جميع وسوم HTML.
الخواص المحددة
src - poster - controls - loop - autoplay - width - height - muted - preload وغيرها.
الخاصية src
تُستخدم الخاصية src لتحديد مصدر الفيديو. يمكن أن يكون مسار للفيديو على جهازك المحلي أو رابط فيديو مباشر من الإنترنت.
ويمكنك استخدام الوسم <source> بدلاً منه.
الخاصية poster
باستخدام هذه الخاصية ، يمكنك عمل صورة غلاف للفيديو والتي سوف تظهر قبل تشغيل الفيديو -مثل الفيديوهات على اليوتيوب .
وسوف تظهر على المتصفح بهذا الشكل
الخاصية controls
عند استخدام هذه الخاصية ، فإنها تتيح للمتصفح إظهار وحدات التحكم في التشغيل مثل التشغيل والإيقاف المؤقت ، ومستوى الصوت ، والبحث ، وما إلى ذلك.
الخاصية loop
باستخدام هذه الخاصية ، يمكنك جعل الفيديو يتكرر تلقائيًا.
الخاصية autoplay
تتيح لك هذه الخاصية بدء تشغيل الفيديو تلقائيًا فور تحميل الصفحة.
الخاصيتين width - height
يمكنك استخدام خاصيتي العرض width والارتفاع height لتحديد العرض والارتفاع للفيديو بالبكسل.
الخاصية muted
يمكنك استخدام سمة كتم الصوت لإخبار المتصفح بعدم تشغيل أي صوت مرتبط بالفيديو عند بدء تشغيله.
إذا تم تحديد الخاصية controls، يمكن للمستخدم النقر فوق زر الصوت لإلغاء كتم الصوت.
الخاصية preload
باستخدام هذه الخاصية، يمكنك تقديم تلميح للمتصفح حول ما إذا كنت تريد تنزيل الفيديو أم لا عند تحميل الصفحة.
هذه الخاصية مهمة لتجربة المستخدم.
يمكنك استخدام 3 قيم مع خاصية preload:
- none: يحدد عدم تحميل الفيديو حتى يضغط المستخدم على تشغيل
- auto: تحديد وجوب تنزيل الفيديو حتى عندما لا يضغط المستخدم على تشغيل
- metadata: تحدد أن المستعرض يجب أن يجمع البيانات الوصفية مثل الطول والحجم والمدة وما إلى ذلك.
خاتمة
في هذه المقالة ، تعرفت على الوسم <video> في HTML5 وخواصها، بحيث يمكنك استخدامها في مشروعاتك بالطريقة الصحيحة.