فصل ۳۲ | چندرسانه‌ای و تکمیلی

پخش رسانه بدون نیاز به افزونه

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

پخش صدا

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

پخش ویدئو

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

چند ویژگی رایج

  • controls — نمایش دکمه‌های پخش، توقف و تنظیم صدا.
  • autoplay — شروع خودکار پخش به‌محض بارگذاری صفحه (بسیاری مرورگرها بدون muted این را مسدود می‌کنند).
  • loop — تکرار خودکار رسانه پس از پایان.
  • muted — پخش بدون صدا در ابتدای بارگذاری.
  • poster — تصویری که پیش از شروع پخش ویدئو نمایش داده می‌شود.

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

نکته: همیشه یک متن جایگزین بین برچسب باز و بسته‌ی audio یا video قرار دهید تا در مرورگرهای بسیار قدیمی که این عناصر را نمی‌شناسند، کاربر پیام مناسبی ببیند.