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

ما هي أدوار عناصر اتش.تي.إم.إل HTML الصوت audio والفيديو video، وكيف تعمل؟

يتيح لك عنصرا الصوت audio والفيديو video إضافة محتوى صوتي وفيديو إلى مستندات اتش.تي.إم.إل HTML. يدعم عنصر الصوت audio تنسيقات الصوت الشائعة مثل mp3، wav و ogg، بينما يدعم عنصر الفيديو video تنسيقات mp4، ogg و webm.

لتضمين محتوى صوتي على صفحتك على الويب، يمكنك استخدام عنصر الصوت audio مع الإشارة إلى موقع ملف الصوت audio file الخاص بك من خلال السمة "اس.ار.سي" src.

كما ترى في نافذة المعاينة، لا يظهر أي شيء على الصفحة.

الكود :

code 

<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3"></audio>
	

معاينة :

إذا كنت تريد رؤية مشغل الصوت audio player على الصفحة، فيمكنك إضافة عنصر الصوت audio باستخدام سمة عناصر التحكم controls.

اضغط على زر التشغيل في نافذة المعاينة للاستماع إلى إحدى أغاني "كوينسي لارسون" Quincy Larson.

الكود :

code 

<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3" controls></audio>
	

معاينة :

تُمكّن سمة "عناصر التحكم" controls المستخدمين users من إدارة تشغيل الصوت، بما في ذلك ضبط مستوى الصوت، وإيقاف التشغيل مؤقتًا أو استئنافه. سمة "عناصر التحكم" controls هي سمة منطقية boolean attribute يُمكن إضافتها إلى أي عنصر لتمكين عناصر التحكم المدمجة في التشغيل. في حال حذفها، لن تظهر أي عناصر تحكم.

إلى جانب سمات المصدر src وعناصر التحكم controls، هناك العديد من السمات الأخرى التي تُحسّن وظائف عنصر الصوت audio. سمة الحلقة loop هي سمة منطقية boolean attribute تُشغّل الصوت باستمرار continuously.

إليكم مثالاً على استخدام خاصية التكرار loop لتشغيل إحدى أغاني "كوينسي لارسون" Quincy Larson بعنوان "لا أستطيع البقاء" Can't stay down. لمشاهدة التكرار أثناء التشغيل، امسح رأس التشغيل قرب نهاية الأغنية، وسيبدأ التشغيل مجددًا بعد انتهائها.

الكود :

code 

<audio 
    src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3" 
    loop
    controls
    >
</audio>
	

معاينة :

هناك سمة أخرى يمكنك استخدامها وهي سمة كتم الصوت muted. عند وجودها في عنصر الصوت (الصوت)، ستبدأ هذه السمة المنطقية boolean attribute تشغيل الصوت في حالة صامت muted.

إليك مثال على استخدام خاصية "كتم الصوت" muted. للاستماع إلى الموسيقى، انقر على أيقونة مستوى الصوت في مشغل الصوت audio player.

الكود :

code 

<audio 
    src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3" 
    loop
    controls
    muted
    >
</audio>
	

معاينة :

فيما يتعلق بأنواع types ملفات الصوت audio file، تختلف المتصفحات browsers في دعمها لكل نوع. ولتحقيق ذلك، يمكنك استخدام عناصر المصدر source داخل عنصر الصوت audio، وسيختار المتصفح أول مصدر يفهمه.

فيما يلي مثال لاستخدام عناصر مصدر source متعددة لعنصر صوتي audio:

الكود :

code 

<audio controls>
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
  <source src="audio.mp3" type="audio/mpeg" />
</audio>
	

سيبدأ المتصفح أولاً بنوع ogg، وإذا لم يتمكن من تشغيل الصوت، فسينتقل إلى النوع التالي في القائمة.

جميع السمات التي تعلمناها حتى الآن مدعومة supported أيضًا في عنصر الفيديو video.

إليك مثال على استخدام عنصر فيديو video مع سمات التكرار loop، وعناصر التحكم controls، وكتم الصوت muted. يمكن إضافة سمة التشغيل التلقائي autoplay إلى وسم الفيديو video الافتتاحي لتشغيل الفيديو تلقائيًا.

ملاحظة: تُستخدم خاصية العرض width هنا لتصغير حجم الفيديو وإظهاره بشكل أفضل في نافذة المعاينة. ستتعلم المزيد عن خاصية العرض width في دروس قادمة.

الكود :

code 

<video
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    loop
    controls
    muted
    width="400"
    >
</video>
	

معاينة :

بالنسبة لسمة "اس.ار.سي" src او "المصدر" source، نستخدم فيديو بعنوان "بيڨ باك بوني" Big Buck Bunny من archive.org. إذا أردت عرض صورة image أثناء تنزيل الفيديو، يمكنك استخدام سمة "الملصق" poster. هذه السمة غير متاحة لعناصر الصوت audio، وهي خاصة بعنصر الفيديو video.

فيما يلي مثال لاستخدام سمة الملصق poster مع المحتوى المقدم بواسطة peach.blender.org.

الكود :

code 

<video
    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
    loop
    controls
    muted
    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
    width="400"
    >
</video>
	

معاينة :