آموزش طراحی سایتآموزش HTML

آشنایی با تگ audio و video در HTML

آموزش صدا و تصویر در HTML

چگونه می‌توانیم در HTML5 از صدا و تصویر استفاده کنیم ؟ منظور از تگ audio چیست؟ و چطور از آن استفاده کنم؟ منظور از تگ video چیست؟ و چگونه از آن تگ؟ در ادامه مقاله قصد داریم آموزش تگ Video در HTML و تگ audio در HTML را به شما عزیزان در سایت میزفا بدهیم. همراه ما باشید.

صدا و تصویر در HTML

در مقاله های گذشته در رابطه با رسانه در HTML و همچنین تگ های جدید HTML5 صحبت کردیم و متوجه شدیم که چه دو تگ جدید به نام های audio و video به HTML اضافه شده است.

با استفاده از این تگ ها می‌توانیم صدا و تصویر را درون صفحاتمان ایجاد کنیم.

چرا تگ audio و video

قبل از HTML5 ، برای معرفی کردن صدا و تصویر به صفحات HTML از تگی به نام object استفاده می‌شد و این مورد باعث می‌شد که شما نتوانید خیلی شخصی سازی خوبی برای اجرا کننده های صدا و اجرا کنندگان ویدئو ها ایجاد کنید.

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

تگ Audio

تگ audio برای قرار گیری صدا، موسیقی و پادکست در صفحه HTML مورد استفاده قرار می‌گیرد. مخصوصا در این برهه زمانی استفاده از ویس و صوت در وبسایت ها بسیار رواج پیدا کرده است.

این تگ پرکاربرد HTML از ۳ فرمت رایج فایل صوتی پشتیبانی می‌کند که آن‌ها عبارتند از : MP3 ، Wav و OGG

دو نکته:
یک) اگر فرمت ویس یا صوت شما غیر از موارد بالا هست نگران نباشید، شما می‌توانید به کمک نرم افزار آنلاین audio.online-convert.com به راحتی با اپلود ویس خود آن را به فرمت‌های رایج بالا تبدیل کنید.
دو) شما اگر از پیام رسان واتس آپ استفاده می‌کنید، این پیام رسان ویس‌های خود را با فرمت OGG ذخیره می‌کند، بنابراین دوستانی که قصد دارند به کمک این پیام رسان فایل‌های صوتی خود را در سایت آپلود کنن امکان استفاده از این تگ را بدون نیاز به تبدیل کردن فرمت آن دارند.

در ادامه برای درک بهتر تگ Audio در HTML مثالی می‌زنیم، حتما دنبال کنید.

مثال تگ audio

در مثال زیر می‌خواهیم فایل صوتی mizfa.ogg را در صفحه HTML ایجاد کنیم.

<audio controls>
  <source src="https://test.com/mizfa.ogg" type="audio/ogg">
  <source src="https://test.com/mizfa.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

تشریح مثال بالا:

خط ۱) در خط یک ما از تگ باز <audio> استفاده کردیم، داخل این تگ عبارتی نوشته شده به نام controls که جزء خاصیت‌های تگ <audio> است، وقتی این خاصیت در داخل نگ باز <audio> وجود داشته باشد باعث می‌شود صدا یا ویس ما قابلیت Play/Pause کردن را داشته باشد.
البته درباره خاصیت‌های تگ <audio> در ادامه این مقاله بیشتر صحبت خواهیم کرد.

خط ۲) بدون تگ <source> درواقع تگ <audio> معنایی ندارد، در تگ <source> شما آدرس فایل‌های صوتی خود را در قسمت src درج می‌کنید، یادتان باشد که همیشه آدرس باید بین ” ” دابل کوتیشن درج شود، همانند مثال بالا که در حال مشاهده هستید.
در قسمت type هم اصولا نوع فرمت صدا را معرفی می‌کنیم، همیشه برای هر فرمتی این بخش type ثابت است، مثلا برای فرمت ogg همیشه type="audio/ogg" را درج می‌کنیم.

خط ۳) این خط هم همان کار خط دو را انجام می‌دهد ولی با فرمت دیگر، گاهی ممکن است مثلا فرمت ogg در برخی دستگاه‌ها لود نشود و پشتیبانی لازم را صورت دهد در این صوت فرمت mp3 که مربوط به خط سوم است لود می‌شود، به عبارت دیگر شما می‌توانید یک فایل صوتی خود را به دو فرمت مختلف در تگ <audio> درج کنید ولی فقط یکی از آن‌ها لود می‌شود.
البته لزومی هم ندارد هر دو باشند و صرفا خط ۲ یا خط ۳ شاید کافی باشد (یعنی یک فرمت) ولی پیشنهاد می‌شود حداقل ۲ فرمت درج کنید تا مطمئن شوید فایل صوتی شما همیشه و در همه دستگاه‌ها قابلیت پخش را دارد.
برای فرمت mp3 هم همیشه type="audio/mpeg" را درج می‌کنیم.

خط ۴) خط یکی مانده به خاطر عبارت Your browser does not support the audio tag. درج شده است و همان طور که مشخص است اگر در یک دستگاهی نه فرمت mp3 و نه فرمت ogg را ساپورت نکند آن زمان این متن نمایش داده می‌شود در غیر این صورت آن را کاربران نمی‌بینند.
در نظر داشته باشید که درج این عبارت اجباری نیست، ولی پیشنهاد می‌شود درج کنید. همینطور می‌توانید به جای این عبارت انگلیسی آن را فارسی بنویسید و مشکلی نیست. اصولا در ۹۹ درصد از دستگاه‌ها و مرورگرها فرمت های رایج پشتیبانی می‌شوند و این پیغام نمایش داده نمی‌شود.

تشریح مثال بالا را سعی کردیم کامل بیان کنیم، ولی این پایان کار نیست و شما باید خاصیت‌های مختلفی که یک تگ <audio> در html دارد را بدانید. برخی از آن‌ها را در بخش بعدی آورده شده است.

توضیحات براتون کامل بود؟ اگر مشکلی داشتید حتما در نظرات مطرح کنید دوستان. ما در میزفا پاسخگوی شما خواهیم بود.

خاصیت های تگ audio

در زیر خاصیت هایی که تگ <audio> از آن‌ها پشتیبانی می‌کند را آورده ایم.

خاصیتمقدارتوضیحات
autoplayautoplayاین خاصیت باعث می‌شود تا فایل صوتی در اولین برقراری ارتباط به صورت خودکار پخش شود.
controlscontrolsبا این خاصیت می‌توانید کنترل کننده های صوتی را در صفحه نمایش دهید ( شامل کلید های Play/Pause)
looploopبا استفاده از این خاصیت فایل صوتی هر بار پس از اتمام دوباره تکرار می‌شوند.
mutedmutedبا این خاصیت صدای فایل صوتی قطع می‌شود. (خاصیت این خاصیت واقعا برای من پنهانه xD)
preloadauto
metadata
none
با این خاصیت مشخص می‌کنید که فایل صوتی به چه صورتی در صفحه لود شود.
srcURLآدرس فایل صوتی را مشخص می‌کند.

چطور می‌شود از این خاصیت‌ها استفاده کرد؟

بسیار ساده است همان مثال بالا را در نظر بگیرید؛ حال قصد داریم زمانی که فایل صوتی به انتها رسید به صورت اتوماتیک به ابتدا برود و دوباره از اول پخش شود، در این صورت مثال بالا تبدیل به مثال زیر می‌شود.

<audio controls loop>
  <source src="https://test.com/mizfa.ogg" type="audio/ogg">
  <source src="https://test.com/mizfa.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

برای بقیه خاصیت ها همانند muted یا autoplay هم میتوان همانند مثال بالا رفتار کرد.

انواع فرمت ها در تگ audio

فرمتMIME-type
MP3audio/mpeg
OGGaudio/ogg
WAVaudio/wav

اصولا به مقداری که باید در خاصیت type درج شود MIME Types گفته می‌شود.

پشتیبانی فرمت‌های مختلف صدا در انواع مرورگرها

نوع مرورگرMP3WAVOGG
Internet Explorerبلهنهنه
Chromeبلهبلهبله
Firefoxبلهبلهبله
Safariبلهبلهنه
Operaبلهبلهبله

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

تگ Video

تگ <video> برای قرارگیری فرمت های ویدئویی در صفحات HTML استفاده می‌شود و باعث می‌شود که یک ویدئو در صفحه ما استریم شود.

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

در ادامه با مثالی با این تگ بیشتر آشنا می‌شویم.

مثال تگ video

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

عنوان مثال قصد داریم ویدئویی با نام video را نمایش دهیم.

<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>

تشریح مثال بالا:

خط ۱) تگ video باز را درج کردیم و در مثال ما دارای سه attributes است. width و height و controls که درباره دو تای اولی در قسمت خاصیت‌ها صحبت خواهیم کرد هر چند بسیار ساده هستند و البته این دو attribute به صورت عمومی در اکثر تگ ها مورد استفاده قرار می‌گیرند. درباره contorols همان طور که قبلا گفتیم قابلیت Play/Pause را اضافه می‌کند.

خط ۲ و ۳ و ۴)  فرمت‌های مختلف فیلم بعلاوه متن عدم ساپورت است و توضیحات این بخش همانند توضیحات مثال audio می‌باشد.

مواردی که توضیح داده نشده همانند تگ audio یکسان است.

خاصیت های تگ Video

در زیر خاصیت هایی که تگ <video> از آن‌ها پشتیبانی می‌کند را آورده ایم.

خاصیتمقدارDescription
autoplayautoplayاین خاصیت باعث می‌شود تا فایل تصویری در اولین برقراری ارتباط به صورت خودکار پخش شود.
controlscontrolsبا این خاصیت می‌توانید کنترل کننده های ویدئویی را در صفحه نمایش دهید ( شامل کلید های Play/Pause)
heightpixelsبا این خاصیت می‌توانید، ارتفاع ویدئو را مشخص کنید.
looploopبا استفاده از این خاصیت فایل ویدئویی هر بار پس از اتمام دوباره تکرار می‌شوند.
mutedmutedبا این خاصیت صدا در فایل ویدئویی قطع می‌شود.
posterURLبا این خاصیت می‌توانید یک پوستر را برای پیش‌نمایش در ویدئو مشخص کنید.
preloadauto
metadata
none
با این خاصیت مشخص می‌کنید که ویدئو به چه صورتی در صفحه لود شود.
srcURLآدرس فایل ویدئویی را مشخص می‌کند.
widthpixelsبا این خاصیت می‌توانید، عرض ویدئو را مشخص کنید.

اصولا به مقداری که باید در خاصیت type درج شود MIME Types گفته می‌شود.

انواع فرمت ها در تگ Video

فرمتMIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

پشتیبانی فرمت‌های مختلف ویدیو در انواع مرورگرها

BrowserMP4WebMOgg
Internet Explorerبلهنهنه
Chromeبلهبلهبله
Firefoxبلهبلهبله
Safariبلهنهنه
Operaبله از ورژن ۲۵ به بعدبلهبله

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

نتیجه گیری + سوال

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

پیشنهاد می‌کنم مقالات دیگر مجموعه آموزش متن محور HTML را نیز مطالعه کنید.

این مقاله نیز به پایان رسید و امیدوارم از آن استفاده لازم را برده باشید. اگر سوال ، پیشنهاد یا انتقادی داشتید آن را با من به اشتراک بگذارید و من هم در اولین فرصت به آنها پاسخ خواهم داد. تا مقاله بعدی…

سوال:

سوال یک) میدونید چطوری میتونیم از تگ video استفاده کنیم درحالی که ریسپانسیو باشه؟

سوال دو) چطور میتونیم با استفاده از تگ Video برای تصویرمون پوستر قرار بدیم؟

اگر به هر دو سوال جواب بدی بهتره ولی میتونی یکی رو انتخاب کنی.

به ایمیل کسانی که پاسخ درست و کامل در در نظرات بگن ۲ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه.

 

آپدیت و سئوی مقاله توسط پوریا آریافر

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

‫2 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام.خسته نباشید.خلی ممنون بابت مقالتون.ولی از نظر من متنتون خیلی کم بود و من الان کامل متوجه این تگ ها نشدم.خیلی بهتر میتونستین توضیح بدین اینو حالا اگ امکانش هست یا اینجا یا ایمیل یکم بیشتر توضیح بدین.خیلی ممنون خسته نباشید.

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

پاسخی بگذارید

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


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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر