الوسائط المتعددة في Html

البرمجة
a pic of منير
2024/02/29
17

الصور، الفيديوهات والصوتيات. تعلم كيف تتعامل مع هذه العناصر في لغة Html

الوسائط المتعددة في Html
الوسائط المتعددة في Html
#HowToFrontend

الوسائط المتعددة

إن الوسائط المتعددة هي العناصر المسؤولة عن عرض الصور،

مقاطع الفيديو والصوتيات في الصفحة.

#HowToFrontend

src

alt

loading

لتحديد مصدر الصورة

لعرض نص بديل في حال فشل

تحميل الصورة

لتحديد متى يتم تحميل الصورة.

للتحميل عندeagerتأخذ القيمة

لتحميلlazyتحميل الصفحة أو

الصورة عند المرور بها

الصور

>img</ العنصر المسؤول عن عرض الصور في الصفحة هو العنصر

التالية :attributesيلحق به ال

#HowToFrontend

autoplay

loop

controls

muted

poster

تشغيل الفيديو تلقائياً عند فتح

الصفحة

لتكرار المقطع عند انتهائه

إضافة أزرار التحكم بالفيديو

لتشغيل المقطع بدون صوت

لتعيين صورة غلاف الفيديو

الفيديو

العنصر المسؤول عن عرض الفيديو في الصفحة هو العنصر > video></video<

التالية :attributesيلحق به ال

#HowToFrontend

src

type

لتحديد مسار الفيديو أو الصوت

لتعيين نوع الملف ولاحقته

(video/mp4)

>source</

لتحديد srcفي كل من عنصري الفيديو والصوت يمكن أن تستخدم المسار المطلوب للملف أو يمكنك استخدام هذا العنصر داخلهما لتحديد نوع ومصدر الفيديو أو الصوت المطلوب.

التالية :attributesيلحق به ال

#HowToFrontend

autoplay

loop

controls

muted

تشغيل المقطع تلقائياً عند فتح

الصفحة

لتكرار المقطع عند انتهائه

إضافة أزرار التحكم المقطع

لتشغيل المقطع بدون صوت

الصوتيات

العنصر المسؤول عن عرض الصوتيات في الصفحة هو العنصر > audio></audio<

التالية :attributesيلحق به ال

#HowToFrontend

ماذا تعلمت؟

<body>

<!-- Example of image -->

<img src=”./images/logo.png” alt=”my logo>

<!-- Example of video -->

<video controls loop muted poster=”./poster.jpg>

<source src=”./vids/vid1.mp4” type=”video/mp4 />

</video>

<!-- Example of audio -->

<audio controls loop>

<source src=”./auds/aud1.mp3” type=”audio/mp3 />

</audio>

</body>