درس دوازدهم: افزودن ویدیو (video) و صوت (audio) در HTML

اموزش رایگان HTML

مقدمه

وب‌سایت‌ها فقط متن و عکس ندارند؛ معمولاً لازم میشه ویدیو یا موسیقی هم توش بذاریم.
تو HTML5 راحت و بدون افزونه (مثل Flash) می‌تونی ویدیو و صدا رو مستقیماً داخل صفحه قرار بدی.

افزودن ویدیو

برای نمایش ویدیو از تگ <video> استفاده می‌کنیم.

مثال ساده:

<video src="movie.mp4" controls width="320" height="240">
  ویدیوی شما توسط مرورگر پشتیبانی نمی‌شود.
</video>

توضیح تگ‌ها:

  • src : آدرس فایل ویدیو
  • controls : دکمه‌های پخش، مکث و صدا رو نشون می‌ده
  • width و height: اندازه نمایش ویدیو
  • متن بین تگ (اختیاری): اگه مرورگر ویدیو رو پشتیبانی نکنه، این متن رو نشون میده

نکته بهتر!

برای اطمینان بیشتر و ساپورت همه مرورگرها، بهتره چند فرمت مختلف ویدیو معرفی کنی:

<video controls width="320" height="240">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند.
</video>

افزودن صوت

برای پخش صدا از تگ <audio> استفاده می‌کنیم.

مثال ساده:

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

چند فرمت صوت:

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

ویژگی‌های مهم:

  • controls: نمایش دکمه‌های کنترل (اجباری نیست ولی معمولاً باید بذارید)
  • autoplay: فایل بلافاصله بعد از لود پخش میشه (توصیه: زیاد استفاده نکن مگر ضرورت)
  • loop : فایل بعد از تمام شدن، دوباره پخش میشه
  • muted : پخش بدون صدا

مثال:

<video src="movie.mp4" controls autoplay loop muted></video>

تمرین برای شما

یک صفحه HTML بساز که،

  • یک فایل ویدیوی دلخواه (مثل movie.mp4) و یک فایل صوتی (مثل audio.mp3) را با دکمه‌های کنترل داخل صفحه نمایش دهد.

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *