تگ‌های video و audio (پخش محتوای چندرسانه‌ای)

تگ‌های <video> و <audio>: پخش جادویی صدا و تصویر در وب! 🎬🎶

سلام به دنیای رسانه! وب‌سایت‌ها دیگه فقط متن و عکس نیستن. امروزه صدا و تصویر نقش خیلی مهمی در تعامل با کاربر دارن. HTML5 تگ‌های قدرتمندی به نام <video> و <audio> رو معرفی کرده که به ما اجازه می‌دن محتوای چندرسانه‌ای رو مستقیماً توی صفحه وب پخش کنیم، بدون نیاز به پلاگین‌های خارجی!

این تگ‌ها به ما کنترل کاملی روی پخش، توقف، صدا و حتی نمایش زیرنویس برای محتوای صوتی و تصویری می‌دهند.

تگ <video>: دنیای تصویر در اختیار شماست! 📽️

تگ <video> به شما امکان می‌ده فایل‌های ویدیویی رو در صفحه وب خودتون قرار بدید.

ساختار پایه:

<video>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند.
</video>

خصوصیات مهم تگ <video>:

• controls: این خصوصیت، کنترل‌های استاندارد پخش ویدئو (دکمه پخش/توقف، نوار پیشرفت، تنظیم صدا، تمام صفحه) رو به کاربر نشون می‌ده. اگه این رو ننویسید، کاربر کنترلی روی ویدئو نخواهد داشت!
• width و height: ابعاد ویدئو رو مشخص می‌کنه. می‌تونید به پیکسل یا درصد بدید.
• autoplay: اگه این خصوصیت رو داشته باشید، ویدئو به محض بارگذاری صفحه شروع به پخش می‌کنه. (توجه: خیلی از مرورگرها برای جلوگیری از مزاحمت کاربر، پخش خودکار صدا رو بلاک می‌کنن.)
• loop: باعث می‌شه ویدئو بعد از اتمام، دوباره از اول پخش بشه.
• muted: ویدئو رو بدون صدا پخش می‌کنه.
• poster: آدرس تصویری رو مشخص می‌کنه که قبل از شروع پخش ویدئو نمایش داده می‌شه (مثل کاور ویدئو).

تگ <source> درون <video>:

مثل تصاویر، برای اینکه ویدئو در مرورگرهای مختلف به درستی پخش بشه، بهتره چندین فرمت از ویدئو رو با استفاده از تگ <source> ارائه بدید.

• src: آدرس فایل ویدئویی.
• type: نوع (MIME Type) فرمت ویدئویی (مثل `video/mp4`, `video/ogg`, `video/webm`).

مثال کامل تگ <video>:

<video controls poster="images/video-preview.jpg" width="700">
  <!-- برای مرورگرهایی که MP4 رو پشتیبانی می‌کنن -->
  <source src="videos/my-video.mp4" type="video/mp4">

  <!-- برای مرورگرهایی که WebM رو پشتیبانی می‌کنن -->
  <source src="videos/my-video.webm" type="video/webm">

  <!-- پیام جایگزین اگر مرورگر نتونه ویدئو رو پخش کنه -->
  مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند. لطفاً از یک مرورگر مدرن استفاده کنید.
</video>

تگ <audio>: دنیای صدا در دستان شماست! 🎙️

تگ <audio> دقیقاً شبیه تگ <video> عمل می‌کنه، اما برای فایل‌های صوتی.

ساختار پایه:

<audio controls>
  <source src="sounds/chime.mp3" type="audio/mpeg">
  <source src="sounds/chime.ogg" type="audio/ogg">
  مرورگر شما از پخش صدا پشتیبانی نمی‌کند.
</audio>

خصوصیات مهم تگ <audio>:

• controls: کنترل‌های پخش صدا (پخش/توقف، صدا).
• autoplay: پخش خودکار (با محدودیت مرورگرها).
• loop: پخش تکراری.
• muted: پخش بدون صدا.

تگ <source> درون <audio>:

برای ارائه فرمت‌های مختلف صدا:

• src: آدرس فایل صوتی.
• type: نوع (MIME Type) فرمت صدا (مثل `audio/mpeg`, `audio/ogg`, `audio/wav`).

برای اطمینان از پخش شدن محتوای شما در اکثر مرورگرها، همیشه حداقل دو فرمت مختلف (مثلاً MP3 و Ogg برای صدا، یا MP4 و WebM برای ویدئو) رو با تگ <source> ارائه بدید.

با استفاده از تگ‌های <video> و <audio>، می‌تونید تجربه‌ای غنی و تعاملی رو برای کاربران وب‌سایتتون فراهم کنید. فقط یادتون باشه که استفاده بیش از حد از این امکانات می‌تونه سرعت بارگذاری صفحه رو کم کنه، پس هوشمندانه ازشون استفاده کنید! 😉