چگونه می‌توانیم در 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]
آپدیت و سئوی مقاله توسط پوریا آریافر
26 پاسخ
جواب سوال:
سوال یک : برای این کار می تونیم با استفاده از css مقدار 100درصد به max-width بدیم و برای height هم مقدار auto تعیین کنیم
سوال دوم : برای قرار دادن پوستر می تونیم مقدار صفت poster رو داخل تگ باز video برابر با آدرس url فایل پوستر مدنظرمونو قرار بدیم
یعنی اگر تگ audio از فرمت opus استفاده کنم باید در قسمت تایپ این مقدار را بدم درسته audio/opus
سلام محمد فرمتی که گفتی توی html5 پشتیبانی نمیشه فقط اون ۳ تا فرمتی که داخل مقاله گفتم هستش.
سلام خسته نباشید. خواستم بگم ایا راهی هست که بشه نوار یا دکمه پخش ویدیو رو هم تغییر داد؟ نمیدونم چطور باید بگم. ببینید مثلا ما یادگرفتیم تگ ویدیو بنویسیم داخلش تگ سورس بعد روی سایت نشون داده میشه. حالا یه سری ویژگی مثل میوتد یا لوپ یا اتوپلی هم هست اما من میخوام دکمه هاشم عوض بشه. بنظرتون راهی هستش؟
سلام حسین
اینجا باید وارد جاوااسکریپت بشی.
بعضی ها در ادرس زیر نوشتن و کدهاش هست:
https://codepen.io/search/pens?q=video
و یک چیزی !!!
آممم این آیکون کنار ترک میزفا خوب نیست رو اگه کدش اولش far بشه درست میشه ..
fa fa-envelope الان اینه
far fa-envelope این بشه درست میشه دیگه مستطیل نشون نمیده!!
???
به عشق شما عوض کردیم.
ممنون که توجه میکنی.
سلام استاد یک سوال داشتم میشه بگید چطوری وقتی مثلا دو تا آهنگ رو در یک صفحه وب میزاریم!!!
با html کاری کنیم که پس از اتمام یک آهنگ خود به خود آهنگ بعدی شروع شه!!!
اصلا میشه با html این کار رو کرد ؟؟
اگر نمیشه پس چه زبانی باید به کار ببریم؟!
سلام فرهان
این موارد رو به کمک جاوااسکریپت میشه انجام داد.
درود استاد، مرسی بابت مطالب، تگ video رو کامل اجرا کردم، ولی به دو مشکل بر خوردم:
۱- مرورگرا فقط و فقط از همون ۳ فرمت پشتیبانی میکنن و امکان گذاشتن ادرس در تگ با فرمتی دیگر وجود ندارد؟؟
مثلا من تو کروم کلی فیلم دانلود کردم و فرمتاش mkv بود،
پس اونا چجور تونستن فرمت mkv رو قرار بدن ولی ما نمیتونیم ؟؟
من mkv رو رو تو لوکال هُست خودم امتحان کردم اما نشد، ولی وقتی فرمتشو به mp4
تبدیل کردم جواب داد!!
و سوال دوم اینکه من یه فیلم به زبان انگلیسی با زیرنویس چسبیده دانلود کردم تو km-player زیرنویسو نشون میداد ولی وقتی تویه مرورگرم باز کردم فقط زبان انگلیسی بود و زیرنویسشو نشون نمیداد، چرا ؟
سلام علیرضا
امیدوارم خوب و سلامت باشی.
شما کلی فیلم با فرمت mkv دانلود کردی. این حرف خود توست. دانلود یعنی چی؟ یعنی دانلود کردم با سیستم خودم دیدم با کروم ندیدم. شما هر نوع فرمت دلخواهی رو میتونی در مرورگر بذاری برای دانلود.
سوال دوم باید کسانی جواب بدن که تخصص در فیلم و ادیت فیلم دارن. با این حال میتونی از اپارات استفاده کنی و زیرنویس جداگونه رو قبول میکنه.
استفاده از خاصیت poster در تگ video
سلام علی اکبر، درسته ممنونم ازت. 45 تا سوال رو تا الان جواب دادی. باریکلا.
پاسخ سوال دوم
با استفاده از خاصیت POSTER
اگر درخصوص سوال اول راهنمایی کنید ممنون میشم
سلام محمد، درست گفتی و جایزه‌ات را دریافت میکنی. درمورد سوال اول خیلی ساده باید width و height در css مشخص کنی که پیاده سازی اون چالش اصلی سوال ماست که چه ارتفاع و عرضی داخل css مشخص کنیم.
خاصیت muted بیشتر در نسخه تحت وب اینستاگرم استفاده میشود
بله در اینستاگرام نسخه وب هم استفاده میشه توحید عزیز.
سلام وقت بخیر خسته نباشید
اول اینکه آموزش های سایتتون واقعا عالی و جامع هستش
دوم اینکه طراحی وب سایتتون حرف نداره?
و سوم اینکه وضعیت فرمت ها در مرورگر microsoft edge به چه صورت هستش؟
سلام عرفان.
خوشحالم از حضورت و ممنونم به خاطر دادن این حس خوب.
مثل Internet Explorer میمونه.
سلام خداقوت به شما. من این تگ audio رو دقیقا مطابق خصوصیاتی که باید بذارم گذاشتم اما با ادرس اینترنتی یعنی ادرس کامل کار نمیکنه و فقط وقتی که ادرس دهی محلی میکنم کار میکنه حتی چند اهنگ رو امتحان کردم که شاید مشکل از ادرس اهنگ باشه ولی بازم نشد ممنون میشم اگه بگین مشکل از کجاست.ضمنا با مرورگر فایرفاکس و کروم امتحان کردم.
سلام.
بدون دیدن کدها نمیشه نظر داد
امکان صدا گذاری رو فایل پی دی اف (ورد به پی دی اف)هم مثل فایل پاور پوینت وجود داره؟
نمیدونم سوالم درسته یا ن
منتظر جوابتون هستم
تشکر.
سلام زهرا. من که چیزی ندیدم و فکر نکنم باشه.
ممنون بابت جواب 🙂
سلام.خسته نباشید.خلی ممنون بابت مقالتون.ولی از نظر من متنتون خیلی کم بود و من الان کامل متوجه این تگ ها نشدم.خیلی بهتر میتونستین توضیح بدین اینو حالا اگ امکانش هست یا اینجا یا ایمیل یکم بیشتر توضیح بدین.خیلی ممنون خسته نباشید.
سلام صبا وقتت بخیر باشه.
مقاله رو کامل آپدیت کردیم، خوشحال میشیم مطالعه کنید اگر موردی بود بفرمایید.
موفق باشید.