وسائط HTML5: الصوت والفيديو والتضمين

عنصر الفيديو

قبل HTML5، كان تضمين الفيديو في صفحة ويب يتطلب اضافات خارجية مثل Flash. غير عنصر <video> كل شيء بجعل الفيديو جزءا اصيلا من المتصفح. يمكنك تضمين ملف فيديو مباشرة في صفحتك بوسم واحد فقط، ويتولى المتصفح التشغيل وعناصر التحكم والعرض بدون اي اضافات.

يدعم عنصر الفيديو عدة سمات مهمة:

• src -- عنوان URL لملف الفيديو المراد تشغيله.
• controls -- يعرض عناصر التحكم الافتراضية للمتصفح (تشغيل، ايقاف، مستوى الصوت، شريط التقدم، ملء الشاشة).
• autoplay -- يبدا تشغيل الفيديو تلقائيا عند تحميل الصفحة. معظم المتصفحات تحظر التشغيل التلقائي ما لم يكن الفيديو مكتوم الصوت ايضا.
• muted -- يبدا الفيديو مع ايقاف الصوت. مطلوب لعمل التشغيل التلقائي في معظم المتصفحات الحديثة.
• loop -- يعيد تشغيل الفيديو تلقائيا عند وصوله للنهاية.
• poster -- يحدد صورة لعرضها قبل بدء تشغيل الفيديو. تعمل كصورة مصغرة او اطار معاينة.
• preload -- يلمح للمتصفح بمقدار الفيديو الذي يجب تحميله مسبقا. القيم هي none و metadata (تحميل المدة والابعاد فقط) و auto (تحميل الملف بالكامل).

<video
    src="intro.mp4"
    controls
    poster="thumbnail.jpg"
    preload="metadata"
    width="640"
    height="360"
>
    متصفحك لا يدعم عنصر الفيديو.
</video>

<!-- التشغيل التلقائي يتطلب muted في معظم المتصفحات -->
<video src="background.mp4" autoplay muted loop></video>

تنسيقات فيديو متعددة مع Source

تدعم المتصفحات المختلفة تنسيقات فيديو مختلفة. MP4 (H.264) لديه اوسع دعم، لكن WebM و Ogg يوفران بدائل مفتوحة المصدر. بدلا من الاعتماد على تنسيق واحد، يمكنك توفير مصادر متعددة والسماح للمتصفح باختيار اول تنسيق يدعمه. يقرا المتصفح عناصر <source> من الاعلى للاسفل ويشغل اول تنسيق متوافق.

<video controls poster="preview.jpg" width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    <p>متصفحك لا يدعم فيديو HTML5.
       <a href="video.mp4">حمل الفيديو</a> بدلا من ذلك.
    </p>
</video>

عنصر الصوت

يعمل عنصر <audio> بشكل مطابق تقريبا لعنصر الفيديو لكنه مصمم لملفات الصوت. يدعم نفس السمات الرئيسية: src و controls و autoplay و muted و loop و preload. تماما مثل الفيديو، يمكنك توفير تنسيقات مصادر متعددة لتوافق اوسع. تنسيقات الصوت الاكثر دعما هي MP3 و WAV و Ogg Vorbis.

<audio controls preload="metadata">
    <source src="podcast.mp3" type="audio/mpeg">
    <source src="podcast.ogg" type="audio/ogg">
    <source src="podcast.wav" type="audio/wav">
    متصفحك لا يدعم عنصر الصوت.
</audio>

<!-- موسيقى خلفية (تشغيل تلقائي مكتوم، متكرر) -->
<audio src="ambient.mp3" autoplay muted loop></audio>

اضافة ترجمات ونصوص توضيحية مع Track

يتيح لك عنصر <track> اضافة مسارات نصية لعناصر الفيديو والصوت. يمكن ان توفر هذه المسارات ترجمات او نصوصا توضيحية او اوصافا او علامات فصول. يستخدم ملف المسار تنسيق WebVTT، وهو تنسيق نصي بسيط تحدد فيه الطوابع الزمنية والنص المعروض خلال كل نطاق زمني. النصوص التوضيحية ضرورية للوصول، حيث تساعد المستخدمين الصم وضعاف السمع على فهم محتوى الوسائط. كما تفيد المستخدمين الذين يشاهدون في بيئات صاخبة او بلغة يتعلمونها.

<video controls width="640" height="360">
    <source src="lecture.mp4" type="video/mp4">

    <track
        src="captions-en.vtt"
        kind="subtitles"
        srclang="en"
        label="English"
        default
    >
    <track
        src="captions-ar.vtt"
        kind="subtitles"
        srclang="ar"
        label="العربية"
    >
</video>

<!-- نموذج ملف WebVTT (captions-ar.vtt) -->
<!--
WEBVTT

00:00:01.000 --> 00:00:04.000
مرحبا بكم في درس وسائط HTML5.

00:00:04.500 --> 00:00:08.000
اليوم سنتعلم عن عناصر الفيديو والصوت.
-->

تضمين محتوى خارجي باستخدام Iframe

يقوم عنصر <iframe> بتضمين صفحة HTML اخرى داخل صفحتك الحالية. هذه هي الطريقة القياسية لتضمين محتوى من جهات خارجية مثل مقاطع YouTube وخرائط Google ومنشورات وسائل التواصل الاجتماعي وعناصر خارجية اخرى. كل iframe يحمل مستنده المنفصل مع DOM وسياق تصفح خاص به. هذا امر قوي وخطير محتملا في نفس الوقت، وهذا هو سبب اهمية سمات الامان.

<!-- تضمين فيديو YouTube -->
<iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    width="560"
    height="315"
    title="مشغل فيديو YouTube"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
></iframe>

<!-- تضمين خرائط Google -->
<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    title="موقع المكتب"
></iframe>

جعل الفيديو المضمن متجاوبا

بشكل افتراضي، عناصر الفيديو و iframe لها ابعاد ثابتة. على الشاشات الصغيرة، تتجاوز حاوياتها وتكسر التخطيط. لجعل الوسائط المضمنة متجاوبة، تستخدم تقنية CSS تسمى غلاف نسبة العرض للارتفاع. تنشئ حاوية بحشوة مبنية على النسبة المئوية تحافظ على نسبة العرض للارتفاع الصحيحة، ثم تضع iframe او الفيديو بشكل مطلق داخلها. CSS الحديث يدعم ايضا خاصية aspect-ratio التي تبسط هذا النمط بشكل كبير.

<!-- النهج الحديث باستخدام aspect-ratio -->
<style>
.video-responsive {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
}
.video-responsive iframe,
.video-responsive video {
    width: 100%;
    height: 100%;
}
</style>

<div class="video-responsive">
    <iframe
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        title="فيديو"
        allowfullscreen
    ></iframe>
</div>

<!-- النهج الكلاسيكي باستخدام حيلة الحشوة -->
<style>
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* نسبة 16:9 */
    height: 0;
    overflow: hidden;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

امان Iframe: Sandbox و Allow

تضمين محتوى خارجي يحمل مخاطر امنية. الصفحة المضمنة قد تشغل نصوصا برمجية ضارة او تعيد توجيه صفحتك او تصل لبيانات حساسة. يوفر HTML5 سمتين مهمتين للتخفيف من هذه المخاطر:

• sandbox -- يطبق مجموعة قيود على محتوى iframe. بشكل افتراضي، iframe المحمي لا يمكنه تشغيل النصوص البرمجية او ارسال النماذج او فتح النوافذ المنبثقة او التنقل في الصفحة الام. يمكنك تمكين القدرات بشكل انتقائي باضافة قيم مثل allow-scripts و allow-forms و allow-same-origin.
• allow -- يتحكم في ميزات المتصفح التي يمكن لـ iframe الوصول اليها. هذا هو نهج سياسة الاذونات الاحدث. القيم الشائعة تشمل camera و microphone و geolocation و fullscreen و autoplay.

استخدم دائما الاعدادات الاكثر تقييدا وامنح فقط الاذونات التي يحتاجها المحتوى المضمن فعلا.