کار با تگ audio و video در html
با افزایش سرعت اینترنت در جهان، کم کم فایل‌های صوتی و ویدیویی به وبسایت‌ها اضافه شدند. و البته طرفداران زیادی هم پیدا کردند. امروزه اکثر افراد مشاهده یک ویدیو یا گوش کردن به یک فایل صوتی را به خواندن یک متن طولانی ترجیح می‌دهند.
در زبان HTML برای نمایش یک فایل صوت یا ویدیو در صفحه از تگ audio و video استفاده می‌شود.
آموزش استفاده از تگ audio در HTML
تگ <audio> برای پخش فایل‌های صوتی در صفحات وب کاربرد دارد. برای ایجاد یک player ساده که بتواند یک فایل صوتی را بخش کند، باید از این تگ استفاده کنید.
<audio controls>
<source src=”myMusic.ogg” type=”audio/ogg”>
<source src=”myMusic.mp3″ type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
صفت controls به کاربر اجازه کنترل بخش فایل صوتی را می‌دهد. مثل متوقف کردن، بخش، کم و زیاد کردن صدا و…
تگ <source> که یک تگ تهی است، به شما این اجازه را می‌دهد تا فایل‌های صوتی با پسوند‌های مختلفی را تعریف کنید. اینکه کدام فایل صوتی بخش می‌شود، بستگی به مرورگر کاربر دارد. چون مرورگر از هر پسوندی که پشتیبانی کند، آن فایل را پخش می‌کند.
و همچنین متنی که درون تگ audio نوشته می‌شود، در صورتی که مرورگر کاربر از تگ audio پشتیبانی نکند نمایش داده می‌شود.(منظور متن Your browser does not support the audio element است)
آموزش استفاده از تگ video در HTML
تگ <video> برای نمایش ویدیو در صفحه وب استفاده می‌شود. برای ایجاد یک player ساده که بتواند یک فایل ویدیویی را بخش کند، باید از این تگ استفاده کنید.
<video width=”320″ height=”240″ controls>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
صفت controls دکمه‌های کنترلی را به player اضافه می‌کند. مانند دکمه play، pause و دکمه‌های کم و زیاد کردن صدا.
اینکه عرض و ارتفاع ویدیو با استفاده از صفت‌های width و height تنظیم شود، کار بسیار پسندیده‌ای است! چون اگر عرض و ارتفاع تنظیم نشده باشد و ابعاد ویدیو هم بزرگ باشد، ممکن است چیدمان صفحه وب شما را بهم بزند.
با استفاده از تگ source می‌توانید چند فرمت مختلف از ویدیو را معرفی کنید. تا مرورگر از هر فرمتی که پشتیبانی می‌کند، استفاده کند.