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

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

آشنایی با تگ های صدا و تصویر در HTML5
آشنایی با تگ های صدا و تصویر در HTML5

چگونه می‌توانیم در 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> از آن‌ها پشتیبانی می‌کند را آورده ایم.

خاصیت مقدار توضیحات
autoplay autoplay این خاصیت باعث می‌شود تا فایل صوتی در اولین برقراری ارتباط به صورت خودکار پخش شود.
controls controls با این خاصیت می‌توانید کنترل کننده های صوتی را در صفحه نمایش دهید ( شامل کلید های Play/Pause)
loop loop با استفاده از این خاصیت فایل صوتی هر بار پس از اتمام دوباره تکرار می‌شوند.
muted muted با این خاصیت صدای فایل صوتی قطع می‌شود. (خاصیت این خاصیت واقعا برای من پنهانه xD)
preload auto
metadata
none
با این خاصیت مشخص می‌کنید که فایل صوتی به چه صورتی در صفحه لود شود.
src URL آدرس فایل صوتی را مشخص می‌کند.

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

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

<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
MP3 audio/mpeg
OGG audio/ogg
WAV audio/wav

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

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

نوع مرورگر MP3 WAV OGG
Internet Explorer / Edge بله نه نه
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
autoplay autoplay این خاصیت باعث می‌شود تا فایل تصویری در اولین برقراری ارتباط به صورت خودکار پخش شود.
controls controls با این خاصیت می‌توانید کنترل کننده های ویدئویی را در صفحه نمایش دهید ( شامل کلید های Play/Pause)
height pixels با این خاصیت می‌توانید، ارتفاع ویدئو را مشخص کنید.
loop loop با استفاده از این خاصیت فایل ویدئویی هر بار پس از اتمام دوباره تکرار می‌شوند.
muted muted با این خاصیت صدا در فایل ویدئویی قطع می‌شود.
poster URL با این خاصیت می‌توانید یک پوستر را برای پیش‌نمایش در ویدئو مشخص کنید.
preload auto
metadata
none
با این خاصیت مشخص می‌کنید که ویدئو به چه صورتی در صفحه لود شود.
src URL آدرس فایل ویدئویی را مشخص می‌کند.
width pixels با این خاصیت می‌توانید، عرض ویدئو را مشخص کنید.

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

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

فرمت MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

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

Browser MP4 WebM Ogg
Internet Explorer بله نه نه
Chrome بله بله بله
Firefox بله بله بله
Safari بله نه نه
Opera بله از ورژن ۲۵ به بعد بله بله

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

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

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

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

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

[box type=”info” class=”question-from-users” width=””]

سوال:

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

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

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

 

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

فیلم آموزشی asp.net core 2

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

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

21 نظر

21 پاسخ

  1. و یک چیزی !!!

    آممم این آیکون کنار ترک میزفا خوب نیست رو اگه کدش اولش far بشه درست میشه ..

    fa fa-envelope الان اینه

    far fa-envelope این بشه درست میشه دیگه مستطیل نشون نمیده!!

    💓💓💓

  2. سلام استاد یک سوال داشتم میشه بگید چطوری وقتی مثلا دو تا آهنگ رو در یک صفحه وب میزاریم!!!

    با html کاری کنیم که پس از اتمام یک آهنگ خود به خود آهنگ بعدی شروع شه!!!

    اصلا میشه با html این کار رو کرد ؟؟

    اگر نمیشه پس چه زبانی باید به کار ببریم؟!

    1. سلام فرهان
      این موارد رو به کمک جاوااسکریپت میشه انجام داد.

  3. درود استاد، مرسی بابت مطالب، تگ video رو کامل اجرا کردم، ولی به دو مشکل بر خوردم:
    ۱- مرورگرا فقط و فقط از همون ۳ فرمت پشتیبانی میکنن و امکان گذاشتن ادرس در تگ با فرمتی دیگر وجود ندارد؟؟
    مثلا من تو کروم کلی فیلم دانلود کردم و فرمتاش mkv بود،
    پس اونا چجور تونستن فرمت mkv رو قرار بدن ولی ما نمیتونیم ؟؟
    من mkv رو رو تو لوکال هُست خودم امتحان کردم اما نشد، ولی وقتی فرمتشو به mp4
    تبدیل کردم جواب داد!!
    و سوال دوم اینکه من یه فیلم به زبان انگلیسی با زیرنویس چسبیده دانلود کردم تو km-player زیرنویسو نشون میداد ولی وقتی تویه مرورگرم باز کردم فقط زبان انگلیسی بود و زیرنویسشو نشون نمیداد، چرا ؟

    1. سلام علیرضا
      امیدوارم خوب و سلامت باشی.
      شما کلی فیلم با فرمت mkv دانلود کردی. این حرف خود توست. دانلود یعنی چی؟ یعنی دانلود کردم با سیستم خودم دیدم با کروم ندیدم. شما هر نوع فرمت دلخواهی رو میتونی در مرورگر بذاری برای دانلود.
      سوال دوم باید کسانی جواب بدن که تخصص در فیلم و ادیت فیلم دارن. با این حال میتونی از اپارات استفاده کنی و زیرنویس جداگونه رو قبول میکنه.

    1. سلام علی اکبر، درسته ممنونم ازت. 45 تا سوال رو تا الان جواب دادی. باریکلا.

  4. پاسخ سوال دوم
    با استفاده از خاصیت POSTER
    اگر درخصوص سوال اول راهنمایی کنید ممنون میشم

    1. سلام محمد، درست گفتی و جایزه‌ات را دریافت می‌کنی. درمورد سوال اول خیلی ساده باید width و height در css مشخص کنی که پیاده سازی اون چالش اصلی سوال ماست که چه ارتفاع و عرضی داخل css مشخص کنیم.

  5. خاصیت muted بیشتر در نسخه تحت وب اینستاگرم استفاده میشود

    1. بله در اینستاگرام نسخه وب هم استفاده میشه توحید عزیز.

  6. سلام وقت بخیر خسته نباشید
    اول اینکه آموزش های سایتتون واقعا عالی و جامع هستش
    دوم اینکه طراحی وب سایتتون حرف نداره👌
    و سوم اینکه وضعیت فرمت ها در مرورگر microsoft edge به چه صورت هستش؟

    1. سلام عرفان.
      خوشحالم از حضورت و ممنونم به خاطر دادن این حس خوب.
      مثل Internet Explorer میمونه.

  7. سلام خداقوت به شما. من این تگ audio رو دقیقا مطابق خصوصیاتی که باید بذارم گذاشتم اما با ادرس اینترنتی یعنی ادرس کامل کار نمیکنه و فقط وقتی که ادرس دهی محلی میکنم کار میکنه حتی چند اهنگ رو امتحان کردم که شاید مشکل از ادرس اهنگ باشه ولی بازم نشد ممنون میشم اگه بگین مشکل از کجاست.ضمنا با مرورگر فایرفاکس و کروم امتحان کردم.

  8. امکان صدا گذاری رو فایل پی دی اف (ورد به پی دی اف)هم مثل فایل پاور پوینت وجود داره؟
    نمیدونم سوالم درسته یا ن
    منتظر جوابتون هستم
    تشکر.

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

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

دیدگاهتان را بنویسید

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

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

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