الوسائط: audio و video و figure و figcaption

أدرج الصوت والفيديو والرسوم التوضيحية المعنونة دون أي إضافة برمجية.

8 دقيقة · 3 أسئلة

يشغّل HTML الصوت والفيديو أصلاً: دون الحاجة إلى مشغّل خارجي. حالات استخدام واقعية: حلقة بودكاست على مدونة، عرض توضيحي لمنتج على صفحة هبوط، درس تعليمي مضمّن في التوثيق. لنرَ كيف نفعل ذلك بشكل صحيح.

<video controls width="640" poster="preview.jpg">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track src="subs-fr.vtt" kind="subtitles"
         srclang="fr" label="French" default>
  Your browser doesn't support HTML5 video.
</video>

ثلاث خلاصات احترافية. تُجرّب عناصر source بالترتيب: يشغّل المتصفح أول واحد يستطيع فك ترميزه. تعرض سمة poster صورة نائبة قبل التشغيل. أخيرًا، يضيف track ترجمات نصية بصيغة WebVTT: أساسية لسهولة الوصول ومُقدّرة كثيرًا للمشاهدة الصامتة.

<audio controls preload="metadata">
  <source src="podcast-ep12.mp3" type="audio/mpeg">
  <a href="podcast-ep12.mp3">Download the episode</a>
</audio>

لتوضيح المحتوى، يقرن figure عنصر وسائط بتسميته التوضيحية عبر figcaption. وليس الصور فقط: المخطط، أو مقتطف كود، أو اقتباس هي أيضًا مرشحة جيدة. تُربط التسمية التوضيحية بالشكل برمجيًا، وهو ما لا تقدّمه فقرة عادية أسفل الصورة.

<figure>
  <img src="chart-sales.png"
       alt="Sales up 12% in Q2 2026">
  <figcaption>
    Sales trend, second quarter of 2026.
  </figcaption>
</figure>

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. لماذا نضع عدة عناصر source داخل وسم video؟
   • لتشغيل كل مقاطع الفيديو الواحد تلو الآخر
   • كي يختار المتصفح أول صيغة يعرف كيف يشغّلها
   • لتسريع التنزيل بالتوازي
2. أي سمة تعرض أزرار التشغيل والإيقاف والصوت على مشغّل فيديو؟
   • controls
   • poster
   • preload
   • muted
3. ما دور figcaption؟
   • استبدال سمة alt الخاصة بالصورة
   • توفير تسمية توضيحية مرئية، مرتبطة دلاليًا بالشكل figure الخاص بها
   • عرض تلميح عند تمرير المؤشر فوق الصورة