X

أساسيات اتش.تي.إم.إل

١٢. إنشاء مشغل الصوت والفيديو

مختبر

الهدف: استيفاء قصص المستخدم أدناه والحصول على جميع الاختبارات اللازمة لإكمال المختبر.

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

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

٢. يجب أن يكون لديك عنصرين للقسم section.

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

٤. أسفل عنصر h2، يجب أن يكون لديك عنصر فيديو video مع عناصر تحكم controls وسمات عرض width. يجب ضبط سمة العرض width على 640.

٥. داخل عنصر الفيديو video، يجب أن يكون لديك عنصر مصدر source مع سمة src تشير إلى ملف فيديو وسمة النوع type.

  • يمكنك استخدام
    • https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4.

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

٧. أسفل عنصر h2، يجب أن يكون لديك عنصر صوتي audio يحتوي على عناصر التحكم controls وسمات الحلقة او التكرار loop، وسمة "اس.ار.سي" src التي تشير إلى ملف صوتي audio file.

  • يمكنك استخدام
    • https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3.
  • أو
    • https://cdn.freecodecamp.org/curriculum/js-music-player/we-are-going-to-make-it.mp3.

الحل :

code 


<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>

  <meta charset="UTF-8" />
  <title>مشغل الصوت والفيديو</title>
  <meta name="description" content="إنشاء مشغل الصوت والفيديو"/>

</head>

<body>

  <h1>مشغل الصوت والفيديو</h1>

  <section>
        <h2>عنوان الفيديو</h2>

        <video controls width="640">
            <source src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" type="mp4" />
        </video>
  </section>

  <section>
        <h2>عنوان الأغنية</h2>

        <audio 
            src="https://cdn.freecodecamp.org/curriculum/js-music-player/we-are-going-to-make-it.mp3" 
            loop
            controls
            >
        </audio>
  </section>


</body>
</html>

معاينة :