تگ Audio و Video در HTML5

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

در HTML5، دو تگ <audio> برای قرار دادن فایل صوتی و<video> برای قرار دادن مستقیم فایل‌های ویدیویی در صفحه، معرفی شدن.

تگ Audio

تگ <audio> به صورت زیر استفاده میشه:

<audio src="file.mp3"></audio>

که آدرس فایل صوتی، برای صفت src نوشته میشه.
در تگ <audio> میشه از سه فرمت MP3 ، OGG و Wav استفاده کرد.
آموزش video tutorial html5 html audio  تگ Audio و Video در HTML5   Pouya Saadeghi
کروم و فایرفاکس هر سه فرمت رو پشتیبانی میکنن ولی اینترنت اکسپلورر فقط MP3 رو اجرا می‌کنه؛ از طرفی اپرا فایل‌های MP3 رو اجرا نمیکنه و سافاری هم OGG رو پخش نمیکنه. پس برای اجرای درست در همه‌ی مرورگرها، حداقل به دو فایل MP3 به همراه Wav یا OGG نیاز داریم. برای مقداردهی همزمان دو فایل به تگ audio ، از تگ source استفاده می‌کنیم:

<audio>
  <source src="file.mp3" type="audio/mpeg">
  <source src="file.ogg" type="audio/ogg">
</audio>

همچنین برای اینکه متنی برای مرورگرهای قدیمی‌تر نمایش داده بشه، این متن رو بین دو تگ audio قرار میدیم. یا حتی میتونیم به جای متن، از فایل‌های صوتی فلش استفاده کنیم تا اگه مرورگر قدیمی بود، آبجکت فلش رو اجرا کنه.

<audio>
  <source src="file.mp3" type="audio/mpeg">
  <source src="file.ogg" type="audio/ogg">
  Update your browser dude!
</audio>

 

تگ Video

تگ <video> هم مثل تگ audio، استفاده میشه:

<video src="file.mp4"></video>

مرورگرها از سه فرمت MP4، WebM و OGG برای پخش ویدیو پشتیبانی می‌کنن.

آموزش video tutorial html5 html audio  تگ Audio و Video در HTML5   Pouya Saadeghi
برای اجرای فایل در همه‌ی مرورگرها حداقل از دو فرمت MP4 به همراه WebM یا OGG استفاده می‌کنیم.

<video>
  <source src="file.mp4" type="audio/mpeg">
  <source src="file.ogg" type="audio/ogg">
</video>

البته تگ‌های audio و video در سه نسخه‌ی آخر همه‌ی مرورگرها کار می‌کنن و به راحتی می‌تونید استفاده کنید.

 

آموزش video tutorial html5 html audio  تگ Audio و Video در HTML5   Pouya Saadeghi

 

خاصیت Controls

کنترل‌های Play/Pause، نوار پیمایش و Volume رو نمایش میده.
اگه این خاصیت رو برای تگ audio استفاده نکنیم، هیچ عنصری در صفحه دیده نمیشه.

<audio src="file.mp3" controls></audio>
<video src="file.mp4" controls></video>
خاصیت autoplay

به محض لود شدن عنصر، شروع به پخش فایل می‌کنه

<audio src="file.mp3" autoplay></audio>
<video src="file.mp4" autoplay></video>
خاصیت loop

باعث میشه بعد از اتمام پخش، فایل مجددا پخش بشه

<audio src="file.mp3" loop></audio>
<video src="file.mp4" loop></video>
خاصیت muted

در حالت پیشفرض، صدا رو قطع میکنه

<audio src="file.mp3" muted></audio>
<video src="file.mp4" muted></video>
خاصیت preload

اگه auto باشه، به محض بارگذاری عنصر، دریافت فایل صوتی شورع میشه؛ اگه none باشه، تا قبل از play شدن، فایل از سرور دریافت نمیشه.

<audio src="file.mp3" preload="auto"></audio>
<video src="file.mp4" preload="auto"></video>

نوشته شده توسط پویا صادقی

بیشتر بخونید:

مقدمات HTML5شبه عنصرها در CSSتغییر شکل دوبعدی در CSS3سلکتورهای CSS3
پاسارگاد گرافیک در گوگل پلاس
پاسارگاد گرافیک را دنبال کنید!