آموزش کار با تگ audio و video

در این جلسه از دوره آموزش رایگان HTML و CSS قصد داریم درمورد تگ audio و video صحبت کنیم.

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

در زبان HTML برای نمایش یک فایل صوت یا ویدیو در صفحه از تگ audio و video استفاده می‌شود. که در ادامه به آموزش هرکدام از آنها می‌پردازیم.

آموزش استفاده از تگ audio در HTML

تگ <audio> برای پخش فایل‌های صوتی در صفحات وب کاربرد دارد. برای ایجاد یک player ساده که بتواند یک فایل صوتی را بخش کند، باید از این تگ استفاده کنید.

صفت controls به کاربر اجازه کنترل بخش فایل صوتی را می‌دهد. مثل متوقف کردن، بخش، کم و زیاد کردن صدا و…

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

و همچنین متنی که درون تگ audio نوشته می‌شود، در صورتی که مرورگر کاربر از تگ audio پشتیبانی نکند نمایش داده می‌شود. (منظور متن Your browser does not support the audio element است)

نکته: سعی کنید از فرمت mp3 استفاده کنید. چون تمام مرورگر‌های فعلی از آن پشتیبانی می‌کنند.

صفت type در تگ source نسبت به پسوند فایلی که فراخوانی می‌شود، مقدار می‌گیرد:

• اگر پسوند فایل MP3 باشد، مقدار صفت type باید audio/mpeg باشد.
• اگر پسوند فایل OGG باشد، مقدار صفت type باید audio/ogg باشد.
• اگر پسوند فایل WAV باشد، مقدار صفت type باید audio/wav باشد.

آموزش استفاده از تگ video در HTML

تگ <video> برای نمایش ویدیو در صفحه وب استفاده می‌شود. برای ایجاد یک player ساده که بتواند یک فایل ویدیویی را بخش کند، باید از این تگ استفاده کنید.

صفت controls دکمه‌های کنترلی را به player اضافه می‌کند. مانند دکمه play، pause و دکمه‌های کم و زیاد کردن صدا.

اینکه عرض و ارتفاع ویدیو با استفاده از صفت‌های width و height تنظیم شود، کار بسیار پسندیده‌ای است! چون اگر عرض و ارتفاع تنظیم نشده باشد و ابعاد ویدیو هم بزرگ باشد، ممکن است چیدمان صفحه وب شما را بهم بزند.

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

پخش خودکار ویدیو بعد از بارگیری صفحه

با اضافه کردن صفت autoplay به تگ video بعد از بارگیری صفحه ویدیو بصورت خودکار پخش خواهد شد.

نکته ۱: صفت autoplay در مرورگر‌های موبایل کار نمی‌کند.
نکته ۲: تقریبا تمام مرورگرها از فرمت MP4 پشتیبانی می‌کنند.

صفت type در تگ source نسبت به پسوند فایلی که فراخوانی می‌شود، مقدار می‌گیرد:

• اگر پسوند فایل MP4 باشد، مقدار صفت type باید video/mp4 باشد.
• اگر پسوند فایل WebM باشد، مقدار صفت type باید video/webm باشد.
• اگر پسوند فایل Ogg باشد، مقدار صفت type باید video/ogg باشد.