الوسائط في HTML

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

ماذا تعني «الوسائط» هنا

في لغة الدورة اليومية، تعني الوسائط محتوى ليس فقط فقرات وعناوين — صور، أيقونات، مقاطع صوت، عروض توضيحية، وتضمينات. استخدام العنصر الصحيح يساعد المتصفحات على إظهار واجهة تشغيل أصلية، وتنزيل النوع المناسب من المورد، ومنح التقنيات المساعدة دورًا أوضح من <div> غامض مليء بالسكربتات.

إجابة مباشرة

• الصور → img (وأحيانًا picture لعدة ملفات)
• الصوت → audio
• الأفلام والمقاطع → video
• التصفح المتداخل (خرائط، مشغّلات مواقع أخرى) → غالبًا iframe
  فضّل العنصر المطابق للمهمة. امنح المستخدمين controls على الصوت والفيديو ما لم يكن لديك مشغّل مخصّص قوي وقابل للوصول. عندما تحمل الوسائط معلومات مهمة، خطّط لبديل نصي أو ترجمة أو transcript.

اللبنات بنظرة سريعة

عيّنة صغيرة

أنت تعرف img بالفعل. إليك كيف يجلس الصوت والفيديو بجانبه في صفحة تمرين أولى — المسارات أمثلة؛ استخدم ملفات لديك فعليًا عندما تجرّب في المنزل.

قراءة العيّنة

• img ما زال يحتاج src وalt ذا معنى
• audio وvideo يستخدمان src (أو أبناء source متداخلة في دروس لاحقة) ويستفيدان من controls
• width على video يمكن أن يحجز مساحة التخطيط أثناء تحميل الملف
• الملفات الفارغة أو المسارات الخاطئة تفشل بنفس طريقة الأصول الأخرى — افحص المجلدات مبكرًا

عناصر التحكم عادة للمبتدئ

سمة controls تطلب من المتصفح إظهار تشغيل وإيقاف وواجهة ذات صلة. تشغيل الصوت تلقائيًا بلا إجراء واضح من المستخدم غالبًا ما يُحظر وعادةً ما يزعج. ابدأ بعناصر تحكم مرئية. المشغّلات المخصّصة تأتي لاحقًا إذا احتاجها المشروع حقًا.

اختيار الأداة الصحيحة

• بودكاست أو ملاحظة صوتية → audio
• تسجيل شاشة أو مقطع → video
• صورة أو مخطط → img / picture
• ودجة خريطة أو صفحة مشغّل طرف ثالث → غالبًا iframe (مع وعي بالأداء والأمان)
  لا تجبر فيديوًا داخل وسم صورة، ولا تطبيقًا خارجيًا كاملًا داخل كتلة سكربت غامضة، عندما يوجد عنصر أصلي.

إمكانية الوصول والمعنى

إذا كانت الوسائط تعلّم شيئًا، خطّط كيف يحصل من لا يسمعها أو يراها على الفكرة: alt للصور الإعلامية، ترجمات للفيديو المنطوق، وtranscript للصوت الطويل. الحركة الزخرفية بلا معلومات يجب ألا تحبس التركيز أو تشغّل بصوت عالٍ تلقائيًا. الدروس المتخصّصة لاحقًا تتعمّق؛ ثبّت العادة الآن.

تكاليف iframe (معاينة)

iframe يضمّن سياق تصفح آخر. ذلك قوي للخرائط والمشغّلات المستضافة، ويجلب أيضًا سكربتات صفحة أخرى وكوكيزها ووزن تخطيطها إلى صفحتك. استخدمه عندما يكون التداخل هو الهدف الحقيقي — لا كافتراضي لكل ملف وسائط تستضيفه بنفسك. تبقى audio / video / img الأصلية أبسط لملفاتك.

كيف تتناسب الدروس التالية

بعد هذه الخريطة: الفيديو والصوت يعلّمان السمات والمصادر المتعددة وعادات الملفات العملية. الإضافات وYouTube تغطي أنماطًا أقدم أو مستضافة. iframe يتعمّق في التضمين. اعتبر هذه الصفحة الدليل؛ واعتبر تلك الصفحات الورش.

تمرّن في محررك

1. من الجدول، سمِّ العنصر الذي تختاره لملف بودكاست (audio).
2. أضف img واحدًا لصفحة تمرين مع alt واضح (تعرف ذلك بالفعل).
3. إن كان لديك mp3 أو mp4 صغير، أضف audio أو video مع controls.
4. اكتب سطرًا في ملاحظاتك: «ترجمات/transcripts للمحتوى المنطوق.»
5. اطّلع على عناوين جلسات الوسائط التالية حتى تبدو خارطة الطريق مألوفة.

أخطاء سهلة

• تشغيل صوت تلقائي بلا controls أو إيماءة مستخدم واضحة
• تضمين فيديوهات ضخمة بلا تفكير في الحجم وبلا خطة لنص بديل
• استخدام iframe لكل ملف بينما يكفي audio/video/img الأصلي
• نسيان أن iframes تستورد تكاليف أمان وأداء صفحة أخرى
• معاملة هذه النظرة العامة على أنها «كافية إلى الأبد» وتخطّي الدروس المتخصّصة عندما تنشر وسائط فعليًا

ملخص

• تغطي وسائط HTML الصور والصوت والفيديو والتضمينات
• فضّل العنصر المطابق للمهمة
• امنح المستخدمين عناصر تحكم وخطّط للبدائل عندما تحمل الوسائط معنى
• وسوم أصلية لملفاتك؛ iframe عندما تتداخل فعلًا صفحة أخرى أو مشغّل مستضاف
• الدروس التالية تتخصّص في كل نوع — هذه الصفحة هي الخريطة