سرخط خبرها

تگ video و audio در html5

تگ video و audio در html5
تگ video و audio در html5

HTML5 وقتی اومد ، خیلی چیزا رو تغییر داد ، خیلی چیزا با خودش آورد و خیلی رو هم از بین برد! از مفید ترین چیزایی که با خودش آورد تگ video با کاربری و استفاده آسان و عالی با قابلیت پشتیبانی در تمامی مرورگرها. حالا میخوام در این پست بهتون بگم که چطوری میتونید با استفاده از این تگ در وب سایتتون فیلم بذارید

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

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

تگ <audio>

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

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

که آدرس فایل صوتی، برای صفت src نوشته میشه.
در تگ <audio> میشه از سه فرمت MP3 ، OGG و Wav استفاده کرد.

تگ video و audio در html5

کروم و فایرفاکس هر سه فرمت رو پشتیبانی میکنن ولی اینترنت اکسپلورر فقط 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>

از این تگ برای قرار دادن و اجرای فایل های تصویری و متحرک بر روی صفحات وب در Html 5 استفاده می شود . این تگ یک تگ جدید در Html 5 است و اکثر مرورگرهای مطرح از آن پشتیبانی می کنند .

نکته : اگر متنی بین تگ باز و بسته <video> قرار دهید در صورتی که مرورگر از آن تگ پشتیبانی نکند ، متن به جای فایل تصویری نمایش داده می شود .

 

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

<video src=”file.mp4″></video>

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

تگ video و audio در html5

برای اجرای فایل در همه‌ی مرورگرها حداقل از دو فرمت MP4 به همراه WebM یا OGG استفاده می‌کنیم.

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

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

  • فایرفاکس +۳٫۵
  • کروم +۴
  • اینترنت اکسپلورر +۹
  • سافاری +۴
  • اپرا +۱۰٫۵

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

 خاصیت source src

این پارامتر مکان یا آدرس فایل تصویری مورد نظر برای اجرا ، را تعیین می کند .
تعیین این پارامتر ، اجباری است . src تگ source اشاره به آدرس فایل ویدیو مورد نظر می کند که در اینجا ما در تگ اولین source آدرس file.mp4 را قرار داده ایم

 

خاصیتwidth و height

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

width : باهاش میشه طول نمایشگر فیلم رو تعیین کرد. در اینجا برابر با ۳۲۰ پیکسل قرار داده شده.

height : باهاش میشه ارتفاع یا عرض نمایشگر رو تعیین کرد که در اینجا برابر ۲۴۰ پیکسله.

 

خاصیت 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>

در پایان نیز تگ video را می بندیم . فقط توجه داشته باشید که تگ های source داخل تگ video می باشند .
QR Code For: تگ video و audio در html5

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.