علامة HTML "video"

اكتشف أساسيات العمل باستخدام HTMLvideoبطاقة شعار

الvideoتسمح لك بتضمين محتوى الفيديو في صفحات HTML.

يمكن لهذا العنصر دفق الفيديو باستخدام كاميرا الويب عبرgetUserMedia()أوWebRTC، أو يمكنه تشغيل مصدر فيديو تشير إليه باستخدامsrcينسب:

<video src="file.mp4" />

بشكل افتراضي ، لا يعرض المتصفح أي عناصر تحكم لهذا العنصر ، فقط الفيديو.

مما يعني أن الصوت لن يتم تشغيله إلا إذا تم ضبطه على التشغيل التلقائي (المزيد حول هذا لاحقًا) ولن يتمكن المستخدم من معرفة كيفية إيقافه أو إيقافه مؤقتًا أو التحكم في مستوى الصوت أو التخطي في موضع معين في الفيديو.

لإظهار عناصر التحكم المضمنة ، يمكنك إضافة ملفcontrolsينسب:

<video src="file.mp4" controls />

هكذا تبدو في Chrome:

Video tag appearance

الصورة المعروضة في البداية هي أول إطار للفيديو.

يمكنك عرض صورة أخرى ، وهي حاجة شائعة جدًا ، باستخدام ملفposterينسب:

<video src="video.mp4" poster="image.png" controls />

إذا لم يكن موجودًا ، فسيعرض المتصفح الإطار الأول للفيديو بمجرد توفره.

يمكنك تحديد نوع MIME لملف الفيديو باستخدام امتدادtypeينسب. إذا لم يتم التعيين ، فسيحاول المستعرض تحديده تلقائيًا:

<video src="file.mp4" controls type="video/mp4" />

لا يتم تشغيل ملف الفيديو بشكل افتراضي تلقائيًا. أضف الautoplayالسمة لتشغيل الصوت تلقائيًا:

<video src="file.mp4" controls autoplay />

تتطلب بعض المتصفحات أيضًاmutedالسمة إلى التشغيل التلقائي. يتم تشغيل الفيديو تلقائيًا فقط إذا تم كتمه:

<audio src="file.mp3" controls autoplay muted />

الloopتعيد السمة تشغيل الفيديو عند 0:00 إذا تم تعيينها ، وإلا إذا لم تكن موجودة ، يتوقف الفيديو في نهاية الملف:

<video src="file.mp4" controls autoplay loop />

يمكنك ضبط ملفwidthوheightلتعيين المساحة التي سيشغلها العنصر ، بحيث يمكن للمتصفح حسابها ولا يغير التنسيق عند تحميله أخيرًا. يأخذ قيمة عددية ، معبراً عنها بالبكسل.

كورس

الفيديو يخضع لكورسوما لم تسمح بذلك على جانب الخادم ، لا يمكن تشغيل الفيديو عبر الأصل.

لا شيء يحدث إذا وضعت هذه العلامة في صفحة ويب. لا توجد طريقة لبدء الفيديو ، ولا يتم تشغيله بشكل مستقل. لتشغيل الفيديو ، يجب عليك إضافة ملفautoplayينسب:

<video src="video.mp4" autoplay />

تغيير خصائص عرض الفيديو

يمكنك تعيين عرض وارتفاع لمنطقة الفيديو ، معبراً عنها بالبكسل ، باستخدام ملفwidthوheightصفات:

<video src="video.mp4" poster="image.png" controls
height="600"
width="800" />

عرض المحتوى إذاvideoغير مدعومة

الvideoالعلامة هيدعم جيد جدا، حتى IE9 ، لذلك في الوقت الحاضر لن تكون هناك حاجة إلى نص عنصر نائب ، ولكن لدينا هذا الخيار. ما عليك سوى إضافة علامة إغلاق وإدراج نص بين علامة الفتح والإغلاق:

<video src="video.mp4">Video tag not supported</video>

إضافة مصادر متعددة

يمكن للمتصفحات تنفيذ برنامج ترميز فيديو واحد وليس آخر. ربما ترغب في استخدام معيار أحدث يخفض حجم الملف إلى النصف ولكنك لا تزال ترغب في دعم المتصفحات القديمة.

أنت تفعل ذلك معsourceبطاقة شعار:

<video controls>
 <source src="video.mp4" type="video/mp4" />
 <source src="video.avi" type="video/avi"/>
</audio>

يمكنك تصميم عناصر التحكم باستخدام CSS ، على الرغم من أن هذا خارج نطاق هذه المقدمة.

التحميل المسبق للفيديو

إذا لم تقم بتعيينautoplay، تشير المواصفات إلى أن المتصفحات ستقوم فقط بتنزيل البيانات الوصفية للفيديو (لمعرفة الطول ، على سبيل المثال) ولكنها لن تقوم بتنزيل الفيديو نفسه.

يمكنك فرض تحميل الفيديو مسبقًا باستخدام

<video src="video.mp4" preload="auto" />

العمل مع أحداث الفيديو

يمكننا الاستماع إلى الأحداث على كل منهاvideoباستخدام JavaScript ، لإنشاء واجهات ومشاريع مثيرة للاهتمام. هناك الكثير من الأحداث المختلفة للعب بها.

الplayيتم تشغيل الحدث عند بدء تشغيل الفيديو:

document.querySelector('video').addEventListener('play', () => {
  alert('Video is playing!!!')
})

يمكنك أيضًا إضافة هذا الحدث مباشرةً (مثل الأحداث الأخرى) باستخدام ملفon<event>السمة مباشرة على عنصر HTML:

<video src="video.mp4" controls onplay="playing()" />
const playing = () => {
  alert('Video is playing!!!')
})

هذه بعض الأحداث التي يمكنك الاستماع إليها:

  • playبدأ تشغيل الفيديو
  • pauseتم إيقاف الفيديو مؤقتًا
  • endedاكتمل تشغيل الفيديو
  • timeupdateيتفاعل المستخدم مع الجدول الزمني للتشغيل ويتقدم للأمام / للخلف
  • volumechangeقام المستخدم بتغيير الحجم

هناك الكثير من الأحداث المتعلقة بتحميل الفيديو ويمكنك العثور على القائمة الكاملة على MDN.

تحميل مجانيكتيب HTML


المزيد من دروس html: