تم إنشاء c4a.dev لمساعدتك على التركيز أثناء مُشاهدة الكورسات والإبتعاد عن إزعاج اليوتيوب
كيفية الشراء من الموقع

منطقة إعلانية

يُمكننا وضع إعلانك هنا 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك

سعر الإعلان 3$ فى اليوم الواحد

شرح html Audio, Video tags

شرح الوسوم الخاصة ب ادراج الملفات الصوتية ومقاطع الفيديو html Audio, Video tags والتي تُمكننا من وضع الفيديوهات ومقاطع الصوت داخل الموقع.

1

html audio tag

<audio controls> </audio>

وسم ال audio يُستخدم عندما نريد وضع ملف صوتي في الموقع ونضيف دائما له اثنان attribute خاص به:

  • controls : لعرض عناصر التحكم في الصوت وبدونه لا يظهر الملف الصوتي في الصفحة.
  • src : وتكون قيمته عبارة عن مسار واسم الملف الصوتي.
نصيحة : دائما استخدم امتداد mp3 لان جميع المتصفحات تدعمه.
مثال على ذلك:
 
<audio controls src="example.mp3">
</audio> 

2

html source tag

<source src="" >

دائما يُستخدم هذا العنصر بداخل عنصر ال <video> او عنصر ال <audio> إذا كان لدينا امتدادين او أكثر مختلفين لنفس الملف الصوتي او الفيديو فيختار منهم المتصفح واحد فقط لعرضه.
ويحتوي على attribute أساسي هو src وتكون قيمته عبارة عن مسار واسم الملف الصوتي.
وهو من العناصر التي ليس لها نهاية وسم (closing tag).
مثال على ذلك:

 
<audio controls>
  <source src="example.mp3">
  <source src="example.ogg">
</audio> 

3

html video tag

<video controls> </video>

يُستخدم هذا العنصر عندما نريد إضافة فيديو داخل الموقع.

الموقع ونضيف دائما له أربع attribute خاص به:

  • controlsلعرض عناصر التحكم في الصوت وبدونه لا يظهر الملف الصوتي في الصفحة.
  • srcوتكون قيمته عبارة عن مسار واسم الملف الصوتي.
  • widthوتكون قيمته عبارة عن عرض الفيديو.
  • heightوتكون قيمته عبارة عن طول او ارتفاع الفيديو.
نصيحة : دائما استخدم امتداد mp4 لان جميع المتصفحات تدعمه.
مثال على ذلك:
 
<video controls src="example.mp4">
</video>
4

html track tag

<track >

يُستخدم هذا العنصر عند عمل ترجمة لمقطع فيديو وتظهر اثناء تشغيل الفيديو مثل فيديوهات اليوتيوب كده.
وبالتالي هذا العنصر يُستخدم دائما داخل عنصر ال <video>
وهو من العناصر التي ليس لها نهاية وسم (closing tag).
ويُمكن كتابته <track > او <track />
وله اثنان attribute خاص به :

  • default: نضعه مع هذا العنصر اذا اردنا تشغيل الترجمة تلقائيه عند تشغيل الفيديو وهو ليس له قيمة.
  • src : وتكون قيمته عبارة عن مسار واسم الملف الصوتي.

مثال على ذلك:
 
<video controls src="example.mp4">
  <track default src="example.vtt" />
</video>


المصادر

w3.org

  1. w3.org audio tag
  2. w3.org source tag
  3. w3.org video tag
  4. w3.org track tag

w3schools.com

  1. w3schools.com audio tag
  2. w3schools.com source tag
  3. w3schools.com video tag
  4. w3schools.com track tag
😡
انت مشغل الـ AdBlock !!

خلى بالك يامعلم ✋ انا هكر جامد جداً وعرفت انك مشغل ال AdBlock ف ياريت تقفله بدل ما اولع فى ام الجهاز بتاعك ده 😡 😡