8 الفصل الثالث: الصور والوسائط المتعددة
تمام! هنتعلم في الفصل الثالث عن إضافة الفيديو والصوت في HTML باستخدام وسوم <video>
و**<audio>
**. هنتناول كيفية تضمين ملفات الوسائط المتعددة في صفحة HTML.
الفصل الثالث: الصور والوسائط المتعددة
2. إضافة الفيديو والصوت
في HTML، يُمكنك إضافة الوسائط المتعددة مثل الفيديو والصوت بسهولة باستخدام الوسوم <video>
و**<audio>
**. هنتناول كل وسم على حدة وكيفية استخدامه لتضمين ملفات الفيديو والصوت في صفحتك.
2.1. إضافة الفيديو باستخدام وسم <video>
وسم <video>
يُستخدم لتضمين الفيديو داخل صفحة الويب. يتيح لك إضافة ملفات فيديو بصيغ مثل MP4 و WebM و Ogg.
الخصائص الرئيسية لوسم <video>
:
src
: لتحديد مسار ملف الفيديو.controls
: لإضافة عناصر التحكم مثل التشغيل والإيقاف والصوت.autoplay
: لجعل الفيديو يبدأ تلقائيًا عند تحميل الصفحة.loop
: لجعل الفيديو يعيد التشغيل تلقائيًا بعد انتهائه.muted
: لجعل الصوت مرفوعًا عند تشغيل الفيديو.width
وheight
: لتحديد أبعاد الفيديو.
مثال لإضافة فيديو:
<video src="videos/sample.mp4" controls width="600" height="400">
متصفحك لا يدعم الفيديو.
</video>
في المثال ده:
src="videos/sample.mp4"
: يُحدد مسار ملف الفيديو.controls
: يظهر عناصر التحكم (تشغيل، إيقاف، رفع الصوت).width="600"
وheight="400"
: تحديد أبعاد الفيديو.
نص بديل: في حالة كان المتصفح لا يدعم الفيديو، سيظهر النص “متصفحك لا يدعم الفيديو”.
إضافة أكثر من صيغة فيديو
يمكنك تضمين أكثر من صيغة فيديو باستخدام وسم <source>
لتضمن أن الفيديو يعمل في جميع المتصفحات.
مثال:
<video controls width="600" height="400">
<source src="videos/sample.mp4" type="video/mp4">
<source src="videos/sample.webm" type="video/webm">
<source src="videos/sample.ogv" type="video/ogv">
متصفحك لا يدعم الفيديو.
</video>
في المثال ده:
- إذا كان المتصفح لا يدعم صيغة MP4، سيتم محاولة تحميل WebM أو OGV، وإذا لم تدعم أي صيغة، سيظهر النص البديل.
2.2. إضافة الصوت باستخدام وسم <audio>
وسم <audio>
يُستخدم لإضافة الصوت إلى صفحات الويب. يمكنك تضمين ملفات صوتية بصيغ مثل MP3 و Ogg و WAV.
الخصائص الرئيسية لوسم <audio>
:
src
: لتحديد مسار ملف الصوت.controls
: لإضافة عناصر التحكم مثل التشغيل والإيقاف.autoplay
: لجعل الصوت يبدأ تلقائيًا عند تحميل الصفحة.loop
: لجعل الصوت يعاد تلقائيًا بعد انتهائه.muted
: لجعل الصوت مرفوعًا عند تشغيل الصوت.
مثال لإضافة صوت:
<audio src="audio/sample.mp3" controls>
متصفحك لا يدعم الصوت.
</audio>
في المثال ده:
src="audio/sample.mp3"
: يُحدد مسار ملف الصوت.controls
: يظهر عناصر التحكم (تشغيل، إيقاف، رفع الصوت).
نص بديل: في حالة كان المتصفح لا يدعم الصوت، سيظهر النص “متصفحك لا يدعم الصوت”.
إضافة أكثر من صيغة صوت
يمكنك تضمين أكثر من صيغة صوتية باستخدام وسم <source>
لتضمن أن الصوت يعمل في جميع المتصفحات.
مثال:
<audio controls>
<source src="audio/sample.mp3" type="audio/mpeg">
<source src="audio/sample.ogg" type="audio/ogg">
متصفحك لا يدعم الصوت.
</audio>
في المثال ده:
- إذا كان المتصفح لا يدعم صيغة MP3، سيتم محاولة تحميل OGG، وإذا لم تدعم أي صيغة، سيظهر النص البديل.
2.3. تحسين أداء الفيديو والصوت على الويب
1. تقليص حجم الملفات:
- استخدم أدوات لضغط الفيديوهات والصوتيات لتقليل الحجم وتحسين أداء تحميل الصفحة.
- أدوات مثل HandBrake لضغط الفيديو و Audacity لتحرير الصوت يمكن أن تساعد في تقليل الحجم بدون فقدان كبير للجودة.
2. استخدام صيغة مناسبة:
- MP4 و WebM هما أكثر الصيغ المتوافقة مع المتصفحات.
- MP3 و Ogg هما أكثر الصيغ شيوعًا في الصوتيات.
3. تحميل الوسائط عند الحاجة (Lazy Loading):
- يمكنك استخدام خاصية
loading="lazy"
لتحميل الفيديو والصوت فقط عندما يكونان مرئيين للمستخدم.
مثال:
<video src="videos/sample.mp4" controls loading="lazy" width="600" height="400">
متصفحك لا يدعم الفيديو.
</video>
مثال كامل لإضافة الفيديو والصوت:
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>إضافة الفيديو والصوت في HTML</title>
</head>
<body>
<h1>أمثلة على إضافة الفيديو والصوت في HTML</h1>
<h2>إضافة فيديو</h2>
<video controls width="600" height="400">
<source src="videos/sample.mp4" type="video/mp4">
<source src="videos/sample.webm" type="video/webm">
<source src="videos/sample.ogv" type="video/ogv">
متصفحك لا يدعم الفيديو.
</video>
<h2>إضافة صوت</h2>
<audio controls>
<source src="audio/sample.mp3" type="audio/mpeg">
<source src="audio/sample.ogg" type="audio/ogg">
متصفحك لا يدعم الصوت.
</audio>
</body>
</html>
ملخص الفصل الثالث – الجزء الثاني: إضافة الفيديو والصوت
- وسم
<video>
: يستخدم لإضافة الفيديو في صفحات الويب. - وسم
<audio>
: يستخدم لإضافة الصوت في صفحات الويب. - خاصية
controls
: لإضافة عناصر التحكم مثل التشغيل والإيقاف. - استخدام عدة صيغ: لضمان أن الوسائط تعمل عبر المتصفحات المختلفة.
- تحسين الأداء: عبر تقليص حجم الملفات واستخدام صيغة مناسبة، ويمكنك تطبيق Lazy Loading لتحميل الفيديو والصوت عند الحاجة.
جرب إضافة الفيديو والصوت في صفحتك وتأكد من تحسين الأداء لتجربة أفضل! لو محتاج مساعدة تانية، أنا هنا! 😄