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

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

شرح 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>