آموزش تگ video و تگ audio در html5
در این جلسه می خواهیم به آموزش تگ video و تگ audio در html5 بپردازیم.بدون هیچ مقدمه ای آموزش امروز رو شروع می کنیم.
تا قبل از پیدایش HTML5 برای اجرای فایل های صوتی و ویدیویی به ابزارهای جانبی مثل flash player نیاز بود یعنی یک پلاگین به نام flash player باید روی مرورگر نصب می بود تا فایل صوتی یا ویدیویی موجود روی صفحه وب برای کاربر اجرا شود و این موضوع برای کاربران سایت مشکل بود.
اما html5 برای حل این کاستی دو تا تگ مهم video و audio رو معرفی کرد .
تگ video در html5
تگ video در html5 تگی است که با استفاده از آن می توان یک ویدیو را در صفحه وب قرار داد. توجه داشته باشید که این تگ تنها نیست و همراه با تگ فرزندش به نام source استفاده می شود. از تگ source برای مشخص کردن مسیر فایل ویدیو استفاده می شود.
در جدول زیر می توانید مشاهده کنید که مرورگرها از چه نسخه ای به بعد تگ video را پشتیبانی می کنند:
از تگ video به شکل زیر در کدها استفاده می کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html dir="rtl" lang="fa"> <head> <title></title> </head> <body> <video controls width="480" height="288"> <source src="myvideo.mp4" type="video/mp4" /> <source src="myvideo.ogg" type="video/ogg" /> <source src="myvideo.webm" type="video/webm" /> مرورگر شما تگ ویدیو را پشتیبانی نمی کند </video> </body> </html> |
نتیجه اجرا :
نکته: هر مرورگری نحوه نمایش متفاوتی برای نمایش فایل ویدیویی دارد.
Width و height: برای مشخص کردن عرض و طول ویدیو به کار می رود.
Controls: برای نمایش بخش های کنترلی ویدیو به کار می رود: مثل صدا،نوار وضعیت پیشرفت ویدیو،play و stop و …بدون این صفت به شکل زیر می باشد:
source: همانطور که گفتیم از source برای مشخص کردن مسیر فایل ها استفاده می شود. با صفت src مسیر فایل را مشخص می کنیم و با صفت type نوع فایل را مشخص می کنیم.
نکته: متنی که مستقیم داخل تگ video قرار می گیرد ، در صورتی نمایش داده می شود که مرورگر این تگ را پشتیبانی نکند نه اینکه مسیر فایل ویدیو اشتباه باشد و یا سایر مسائل….( چیزی هم ننویسید مشکلی پیش نمیاد.)
نکته: می توانیم از چندین source داخل تگ video استفاده کنیم و فایل ویدیویی را با پسوندهای مختلف مسیردهی کنیم ، تا مرورگر از اولین پسوندی که پشتیبانی کرد استفاده کند. اگر به هر دلیلی هیچ کدام از پسوندهای فایل ویدیویی توسط مرورگر پشتیبانی نشد پیغامی که مستقیم در تگ video نوشتیم نمایش داده می شود.
تگ video از سه پسوند زیر برای نمایش فایل ویدیو پشتیبانی می کند که هر کدام از این سه نوع پسوند هم توسط مرورگر خاصی پشتیبانی می شود.
نکته: در مثال بالا ما از سه پسوند استفاده کردیم یعنی یک فایل ویدیو با سه پسوند مختلف در روت سایت باید قرار بگیرد، تا در صورت شناسایی نشدن دیگری استفاده شود .(در باب بحث کیفیتی فیلم ها پسوند ogg کیفیت کمتری نسبت به mp4 دارد)
Poster : از این خصوصیت با مقدار “url” (آدرس تصویر) ، برای دادن یک اسپلش به ویدیو استفاده می شود. یعنی قبل از اجرای ویدیو یک تصویر نمایش داده شود و بعد از فشردن دکمه player ویدیو پخش می شود.البته باید تصویر مورد نظر را در روت سایت قرار دهید و صفت را به شکل زیر به کد اضافه کنید:
|
1 2 3 4 5 6 |
<video controls width="480" height="288" poster="sp.png"> <source src="myvideo.mp4" type="video/mp4" /> <source src="myvideo.ogg" type="video/ogg" /> <source src="myvideo.webm" type="video/webm" /> مرورگر شما تگ ویدیو را پشتیبانی نمی کند </video> |
تگ audio در html5
این تگ هم مشابه video می باشد و به شکل زیر استفاده می شود:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html dir="rtl" lang="fa"> <head> <title></title> </head> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.wav" type="audio/wav"> Your browser does not support the audio tag. مرورگر شما تگ را پشتیبانی نمی کند </audio> </body> </html> |
نتیجه اجرا :
نکته: باز هم مشابه تگ video، این تگ هم در هر مرورگری واسط کاربری متفاوتی دارد.
نکته: مشابه تگ video، متنی که داخل تگ audio قرار دادیم ، در صورتی نمایش داده می شود که مرورگر این تگ را پشتیبانی نکند.در جدول زیر می توانید مشاهده کنید که مرورگرها از چه نسخه ای به بعد این تگ را پشتیبانی می کنند:
نکته:تگ audio از سه پسوند زیر برای نمایش فایل صوتی پشتیبانی می کند که هر کدام از این سه نوع پسوند هم توسط مرورگر خاصی پشتیبانی می شود:
نکته: آیا می شود که ویدیو یا صوت های ما در تمام مرورگرها به یک شکل نمایش داده شود؟بله با استفاده از کتابخانه هایی مثل jwplayer و …
صفات مشترک تگ video و تگ audio در HTML5
Controls: همانطور که قبلا گفتیم برای نمایش بخش های کنترلی فایل صوتی یا ویدیویی به کار می رود.
src: این خصوصیت با مقدار “url“برای مشخص کردن آدرس فایل ویدیویی یا صوتی استفاده می شود (ولی ما در مثال های بالا از تگ فرزند source استفاده کردیم)
loop :این خصوصیت با مقدار “loop” باعث می شود، به محض تمام شدن فایل، مجدد از اول پخش شود .
Autoplay : این خصوصیت با مقدار “autoplay” باعث می شود، به محض اینکه فایل صوتی یا ویدیویی لود شد خود به خود پخش شود.
Preload :سه مقدار دریافت می کند auto و none و metadata. به صورت پیشفرض مقدارش auto می باشد یعنی به محض بارگذاری فایل صوتی یا ویدیویی ، پخش فایل شروع شود. اما none یعنی چه؟ یعنی تا زمانی که دکمه play را نزده ایم، فایل از سرور دریافت نشود.(اگر خصوصیت autoplay وجود داشته باشد این خصوصیت نادیده گرفته می شود)
Muted : این خصوصیت با مقدار “muted” باعث می شود، به صورت پیش فرض خروجی صدا قطع باشد.مثال:
در آموزش امروز با تگ video و تگ audio در html5 آشنا شدیم در جلسات بعد با امکانات بیشتر HTML5 آشنا خواهیم شد. با ما همراه باشید.
باز هم تاکید می کنم اگر خودتون دست به کار نشین و کد نزنید، خوندن این مطالب هیچ فایده ای نداره! اگر سوال یا نظری دارین میتونید از طریق دیدگاه زیر همین پست با ما در ارتباط باشین. شاد باشید ;-)
به این مقاله چند تا ستاره میدی؟[تعداد رای: 2 امتیاز: 4]
دیدگاه خود را بنویسید