15. تضمين الصوت والفيديو

قدمت HTML5 عناصر قياسية لتضمين الوسائط دون الاعتماد على ملحقات طرف ثالث (مثل Flash).

15.1 عنصر الفيديو (<video>)

يضمّن عنصر <video> ملف فيديو. يستخدم عادةً خاصية controls لعرض أزرار التشغيل القياسية.

html <video width="640" height="360" controls> <source src="assets/intro-video.mp4" type="video/mp4"> <source src="assets/intro-video.webm" type="video/webm"> <!-- نص احتياطي إذا كان المتصفح لا يدعم عنصر الفيديو --> متصفحك لا يدعم وسم الفيديو. </video>

لماذا وسوم <source> متعددة؟

تدعم المتصفحات تنسيقات فيديو مختلفة (MP4، WebM، OGG). يوفر توفير مصادر متعددة التوافق. سيحاول المتصفح تشغيلها بالترتيب حتى يجد واحداً يمكنه تشغيله.

15.2 عنصر الصوت (<audio>)

يعمل عنصر <audio> بطريقة مماثلة ولكنه لا يحتاج إلى مواصفات العرض/الارتفاع.

html <audio controls> <source src="assets/background-music.mp3" type="audio/mp3"> <source src="assets/background-music.ogg" type="audio/ogg"> متصفحك لا يدعم عنصر الصوت. </audio>

15.3 الخصائص الهامة