رسانه (video/audio/iframe)

ویدیو

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

ویژگی‌های video

• controls — نمایش دکمه‌های کنترل (پخش، توقف، صدا و...)
• autoplay — پخش خودکار (بهتر است با muted استفاده شود)
• loop — تکرار بی‌پایان ویدیو
• muted — بی‌صدا بودن ویدیو
• poster — تصویر کاور قبل از پخش
• width و height — ابعاد ویدیو
• preload — پیش‌بارگذاری (auto, metadata, none)
• playsinline — پخش درون‌خطی در iOS

صوت

تگ <audio> برای پخش فایل صوتی استفاده می‌شود. اکثر ویژگی‌های video را دارد.

ویژگی‌های audio

• controls — نمایش دکمه‌های کنترل
• autoplay — پخش خودکار
• loop — تکرار
• muted — بی‌صدا
• preload — پیش‌بارگذاری

iframe

<iframe> یک صفحه وب دیگر را داخل صفحه شما نمایش می‌دهد. کاربردهای رایج: نقشه، ویدیو، پست شبکه‌های اجتماعی و...

ویژگی‌های iframe

• src — آدرس صفحه خارجی
• width و height — ابعاد
• frameborder — حاشیه (۰ برای حذف)
• scrolling — اسکرول (yes, no, auto)
• sandbox — محدود کردن دسترسی‌های iframe
• allow — اجازه دادن به قابلیت‌های خاص
• loading — lazy loading برای بهبود performance

source

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

ویژگی‌های source

• src — آدرس فایل
• type — نوع MIME (مثل video/mp4)
• media — مدیا کوئری برای responsive
• sizes — اندازه تصاویر responsive

track

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

ویژگی‌های track

• src — آدرس فایل زیرنویس (VTT)
• kind — نوع (subtitles, captions, descriptions, chapters)
• srclang — زبان زیرنویس
• label — برچسب برای کاربر
• default — پیش‌فرض بودن

embed و object

تگ‌های قدیمی برای جاسازی محتوای خارجی (مثل Flash). امروزه کمتر استفاده می‌شوند.

فرمت‌های پشتیبانی‌شده

ویدیو

• MP4 (H.264): پشتیبانی عالی در همه مرورگرها
• WebM (VP8/VP9): کیفیت خوب، حجم کم
• Ogg (Theora): رایگان، پشتیبانی محدود

صوت

• MP3: پشتیبانی عالی در همه مرورگرها
• WAV: کیفیت بالا، حجم زیاد
• Ogg (Vorbis): رایگان، کیفیت خوب
• AAC: کیفیت خوب، پشتیبانی خوب

ویژگی sandbox در iframe

برای امنیت، می‌توان دسترسی‌های iframe را محدود کرد:

sandbox="allow-same-origin allow-scripts allow-forms"

• allow-same-origin — اجازه دسترسی به same-origin
• allow-scripts — اجازه اجرای JavaScript
• allow-forms — اجازه ارسال فرم
• allow-popups — اجازه باز کردن popup
• allow-top-navigation — اجازه ناوبری در صفحه اصلی

بهترین شیوه‌ها

• چند فرمت: همیشه چند فرمت ارائه دهید
• پیش‌بارگذاری: از preload="metadata" استفاده کنید
• پس‌زمینه: برای ویدیوهای پس‌زمینه، muted و loop استفاده کنید
• Responsive: ویدیوها را responsive کنید
• زیرنویس: همیشه زیرنویس ارائه دهید
• امنیت iframe: از sandbox استفاده کنید
• Lazy Loading: از loading="lazy" برای iframeها استفاده کنید

دسترس‌پذیری (Accessibility)

• همیشه زیرنویس برای ویدیوها
• توضیحات صوتی برای ویدیوهای مهم
• کنترل‌های کیبورد برای پخش‌کننده
• aria-label برای iframe بدون عنوان

نکات مهم

• autoplay بدون muted در اکثر مرورگرها کار نمی‌کند
• ویدیوهای بزرگ را CDN کنید
• از فرمت مناسب برای هر پلتفرم استفاده کنید
• iframeها می‌توانند امنیت سایت را به خطر بیندازند
• برای ویدیوهای شخصی از تگ video استفاده کنید