الصوت والفيديو والتضمين — أساسيات HTML

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

الفيديو

<video controls width="640" height="360" poster="images/cover.jpg" preload="metadata">
    <source src="videos/intro.webm" type="video/webm">
    <source src="videos/intro.mp4" type="video/mp4">
    <track kind="subtitles" src="videos/intro.ar.vtt" srclang="ar" label="العربية" default>
    متصفحك لا يدعم الفيديو. <a href="videos/intro.mp4">حمّل الفيديو</a>.
</video>

| الخاصية | المعنى |

|---|---|

| controls | أزرار التشغيل — بدونها لا يستطيع المستخدم التحكم |

| poster | صورة تظهر قبل التشغيل |

| preload="metadata" | حمّل المدة والأبعاد فقط، لا الفيديو كله |

| autoplay | تشغيل تلقائي — المتصفحات تمنعه إلا مع muted |

| muted / loop / playsinline | كتم / تكرار / تشغيل داخل الصفحة على iPhone |

- عدة <source>: يختار المتصفح أول صيغة يدعمها.

- النص داخل <video> يظهر فقط للمتصفحات التي لا تدعمه.

- <track>: ملف ترجمة بصيغة WebVTT — مهم للصم ولمن يشاهد بلا صوت.

الصوت

<audio controls preload="none">
    <source src="audio/lesson1.mp3" type="audio/mpeg">
    <source src="audio/lesson1.ogg" type="audio/ogg">
    متصفحك لا يدعم الصوت.
</audio>

للمحتوى الصوتي (بودكاست، درس) وفّر نصاً مكتوباً (transcript) أيضاً للوصولية ومحركات البحث.

الصور المتجاوبة

لماذا يحمّل الجوال صورة بعرض 2000px لشاشة عرضها 400px؟ srcset يعطي المتصفح خيارات:

<img src="images/hero-800.jpg"
     srcset="images/hero-400.jpg 400w, images/hero-800.jpg 800w, images/hero-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     alt="طلاب يتعلمون البرمجة" width="800" height="450">

- 400w: العرض الحقيقي للملف بالبكسل.

- sizes: كم سيكون عرض الصورة على الشاشة؛ المتصفح يحسب ويختار أصغر ملف كافٍ (مع مراعاة دقة الشاشة).

picture: صيغ مختلفة أو قص مختلف

<picture>
    <source srcset="images/hero.avif" type="image/avif">
    <source srcset="images/hero.webp" type="image/webp">
    <img src="images/hero.jpg" alt="طلاب يتعلمون البرمجة" width="800" height="450">
</picture>

المتصفح يأخذ أول صيغة يدعمها، و <img> الأخير هو الاحتياط وإلزامي (وفيه alt).

iframe: تضمين صفحة داخل صفحة

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=44.3,33.2,44.5,33.4"
        width="600" height="400"
        title="خريطة بغداد"
        loading="lazy"></iframe>

- title ضروري: قارئ الشاشة يعلن عن الإطار بعنوانه.

- loading="lazy": لا يُحمّل حتى يقترب المستخدم — الإطارات ثقيلة.

- الأمان: الصفحة المضمّنة كود من موقع آخر. للمحتوى غير الموثوق استخدم sandbox الذي يمنع السكربتات والنماذج إلا ما تسمح به: sandbox="allow-scripts".

- كثير من المواقع تمنع تضمينها (البنوك، جوجل) لحماية مستخدميها من خداع النقر (clickjacking)، فلن تظهر في iframe.

نصائح الأداء

- الفيديو أثقل شيء في الصفحة: ضغطه، و preload="metadata" أو none.

- للفيديوهات الطويلة استخدم منصة (YouTube، Vimeo) وضمّنها بـ iframe بدل رفعها على خادمك.

تمرين

أنشئ صفحة "درس مسجل": فيديو بـ controls و poster ومصدرين، وترجمة عربية، ومقطع صوتي للملخص مع نص مكتوب تحته، وخريطة مضمّنة بـ iframe مع title و loading="lazy".

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>درس مسجل</title>
</head>
<body>
    <h1>الدرس الأول: مقدمة في الويب</h1>

    <video controls width="640" height="360" poster="images/lesson1-cover.jpg" preload="metadata">
        <source src="videos/lesson1.webm" type="video/webm">
        <source src="videos/lesson1.mp4" type="video/mp4">
        <track kind="subtitles" src="videos/lesson1.ar.vtt" srclang="ar" label="العربية" default>
        متصفحك لا يدعم الفيديو. <a href="videos/lesson1.mp4">حمّل الفيديو</a>.
    </video>

    <h2>ملخص صوتي</h2>
    <audio controls preload="none">
        <source src="audio/summary.mp3" type="audio/mpeg">
        متصفحك لا يدعم الصوت.
    </audio>
    <details>
        <summary>النص المكتوب</summary>
        <p>في هذا الدرس تعرفنا على HTML و CSS و JavaScript ودور كل منها.</p>
    </details>

    <h2>موقع المعهد</h2>
    <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=44.3,33.2,44.5,33.4"
            width="600" height="400" title="خريطة موقع المعهد في بغداد" loading="lazy"></iframe>
</body>
</html>