X

إمكانية الوصول Accessibility

١١. بناء مشغل وسائط متعددة Multimedia Player

مختبر

في الدروس السابقة، تعرفت على كيفية التعامل مع "عناصر الصوت والفيديو" audio and video elements . وفي هذا المختبر، ستقوم بإنشاء "مشغل وسائط متعددة" (a multimedia player) يعرض مقطعاً صوتياً وفيديو مصحوباً بـ"نص مكتوب للمحتوى الصوتي" (a transcript) .

بالنسبة لـ"عنصر الصوت" audio ، ستحتاج إلى تضمين "عنصر مصدر" source يُستخدم لتحديد "الوسائط المُستخدَمة" (the media being used) .

إليك مثال:


<audio controls aria-label="هنا توضع التسمية الوصفية">
 <source src="ضع—الرابط—الصوتي—هنا" type="audio/mpeg">
</audio>

يمكن أيضاً استخدام "عنصر المصدر" source داخل "عنصر الفيديو" video على النحو التالي:


<video controls width="600" aria-label="هنا توضع التسمية الوصفية">
 <source src="هنا—ضع—الرابط—المؤدي—إلى—ملف—MP4" type="video/mp4">
 <!-- Remaining code goes here يتم وضع بقية الكود هنا -->
</video>

الهدف: تنفيذ "قصص المستخدم" (the user stories) الموضحة أدناه.

نموذج HTML


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مشغل وسائط متعددة Multimedia Player</title>
 </head>
 <body>
  
 </body>
</html>

قصص المستخدم User Stories :

  • ١. يجب أن يكون لديك عنصر h1 للعنوان الرئيسي للصفحة.

  • ٢. يجب أن يكون لديك ثلاثة عناصر من نوع section .

  • ٣. داخل عنصر القسم section الأول، يجب أن يكون لديك عنصر h2 لعنوان الأغنية التي يتم تشغيلها.

  • ٤. أسفل عنصر h2 ، يجب أن تضع عنصر صوت audio يحتوي على السمة controls والسمة aria-label .

  • ٥. داخل "عنصر الصوت" audio ، يجب أن يتوفر لديك "عنصر مصدر" source يحتوي على السمة src التي تشير إلى "ملف صوتي" (an audio file) ، بالإضافة إلى السمة type . يمكنك استخدام رابط الملف الصوتي هذا إذا أردت: https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3

  • ٦. داخل عنصر "القسم" section الثاني، يجب أن يكون لديك عنصر h2 لعنوان الفيديو الذي يتم تشغيله.

  • ٧. أسفل عنصر h2 ، يجب أن تضع "عنصر فيديو" video يحتوي على "عناصر تحكم" controls ، وسمات للعرض width ، وسمة aria-label .

  • ٨. داخل "عنصر الفيديو" video ، يجب أن يتوفر لديك "عنصر مصدر" source يحتوي على السمة src التي تشير إلى "ملف فيديو" (a video file) ، بالإضافة إلى السمة type . يمكنك استخدام رابط الفيديو هذا إذا أردت: https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4

  • ٩. أسفل "عنصر المصدر" source ، ينبغي أن تضع "عنصر المسار" track مزوداً بالسمات التالية: السمة src التي تشير إلى "ملف الترجمة" (a subtitles file) ، والسمات kind و srclang و label . يمكنك استخدام "رابط ملف الترجمة" (subtitles URL) هذا إذا أردت: https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.vtt

  • ١٠. داخل عنصر "القسم" section الثالث، يجب أن يكون لديك عنصر h2 لعنوان القسم، مثل "النص" (Transcript) .

  • ١١. أسفل عنصر h2 ، يجب أن تضع عنصر p يحتوي على "النص المفرّغ" (the transcript) للفيديو.

الحل The Solution


<!DOCTYPE html>
<html lang="ar" dir="rtl">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>مشغل وسائط متعددة Multimedia Player</title>
 </head>
 <body>

  <h1>مشغل وسائط متعددة</h1>

  <section>
   <h2>يُعرض الآن: الإبحار بعيداً</h2>
   <audio controls aria-label="الإبحار بعيداً">
    <source src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3" type="audio/mpeg">
   </audio>
  </section>

  <section>
   <h2>ما هي دالة map وكيف تعمل؟</h2>
   <video controls width="600" aria-label="ما هي دالة map وكيف تعمل؟">
    <source src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" type="video/mp4">
    <track
     src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.vtt"
     kind="subtitles"
     srclang="en"
     label="What is a map method and how does it work?"
    />
   </video>
  </section>

  <section>
   <h2>النص</h2>
   <p>
    ما هي دالة map وكيف تعمل؟ تُعد map دالةً قويةً وشائعة الاستخدام في لغة JavaScript ، وهي مخصصة للتعامل مع المصفوفات. صُممت هذه الدالة لإنشاء مصفوفة جديدة من خلال تطبيق دالة محددة على كل عنصر من عناصر المصفوفة الأصلية، فهي لا تُعدّل المصفوفة الأصلية، بل تُعيد مصفوفة جديدة تحتوي على نتائج تطبيق تلك الدالة على كل عنصر.
   </p>
  </section>

 </body>
</html>

التطبيق The Application