آموزش استفاده از صدا و ویدیو در html (تگ‌های audio و video در html)

سلام دوستان متاسفانه مدتی نبودم و نتونستم آموزش html رو ادامه بدم اما امروز با آموزش استفاده از صدا و ویدیو در html در خدمتتون هستم. راستش این مدت که نبودم بدجوری درگیر کارهای پایان نامه و آماده کردن سفارش های طراحی سایت بودم و نشد آموزش ها رو ادامه بدم. میدونم این دلیل ها اصلا موجه نیست اما امیدوارم من رو ببخشید و مثل گذشته با دنبال کردن آموزش ها در کنارم باشید?.

خب دیگه بیشتر از این مقدمه چینی نمیکنم. اگه آماده اید پر قدرت و پر انرژی بریم سراغ آموزش استفاده از صدا و ویدیو در html.

 

استفاده از صدا و ویدیو در html:

برای استفاده از صدا و ویدیو در html کافیه نحوه کار با تگ‌های audio و video رو بلد باشید. خبر خوب اینه که نحوه استفاده از این دو تگ دقیقا شبیه به هم هست. بنابراین اگر یکی از این تگ‌ها رو یاد بگیرید هر دوتاش رو یاد گرفتید?. اول بریم سراغ استفاده از صدا در html.

 

تگ audio در html:

نحوه استفاده از تگ audio به شکل زیر هست:

 

<audio>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3″ type=”audio/mpeg”>
با عرض پوزش فایل انتخاب شده جهت پخش در دسترس نیست.
</audio>

همونطور که می‌بینید تنها با نوشتن چند خط دستور ساده می‌تونید یه صوت رو توی صفحه وبتون پخش کنید به این منظور لازمه تگ audio رو باز کنید و داخل این تگ مشخص کنید چه صدایی قراره پخش بشه. معرفی صدای مورد نظر به html به کمک تگ source انجام میشه.

همونطور که می‌بینید تگ source دارای دو خصیصه(پراپرتی یا property) هست. خصیصه اول یعنی src محل قرار گیری صدا رو مشخص میکنه پس شما باید آذرس صوتی که قصد پخش اون رو دارید در خصیصه src قرار بدید. پراپرتی دوم یعنی type به نوع صدایی که قصد پخش اون رو دارید اشاره داره. این پراپرتی مرورگر رو متوجه میکنه که صوت انتخابی کاربر چه فرمتی داره.

خوبه بدونید همه مرورگرها نمی‌تونن همه صوت‌ها رو پخش کنن و از تعداد محدودی از فرمت‌های صوت پشتیبانی میکنن که در ادامه به این موارد هم اشاره میکنیم.

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

 

تگ video در html:

<video width=”320″ height=”240″ >
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
با عرض پوزش فایل انتخاب شده جهت پخش در دسترس نیست.
</video>

 

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

 

سه خصیصه مهم در استفاده از صدا و ویدیو در html که باید بلد باشید:

تا اینجای کار با نحوه استفاده از صدا و ویدیو در html آشنا شدیم. حالا قصد داریم یه قدم جلوتر بریم و سه تا خصیصه مهم رو یاد بگیریم که بهتون کمک میکنه تجربه بهتری از کار با صدا و ویدیو داشته باشید.

 

خصیصه شماره 1: Controls

استفاده از خصیصه controls به ما این امکان رو میده که دکمه‌های کنترلی مثل دکمه play, stop و… رو کنار صدا و ویدیو انتخابیمون نمایش بدیم. کد زیر نحوه استفاده از این خصیصه رو به ما نشون میده. دوستان در تکه کد زیر دو خصیصه height و width ابعاد نمایش ویدیو در صفحه وب رو نشون میدن.

 

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

 

خصیصه شماره 2: Autoplay

خصیصه autoplay این امکان رو فراهم میکنه که ویدیو شما بدون نیاز به کلیک روی دکمه play و به محض لود صفحه پخش بشه. نحوه استفاده از این خصیصه در کد زیر نشون داده شده. همچنین اگه دلتون بخواد که ویدیو به صورت اتوماتیک و با لود صفحه لود بشه و تا زمانی که صفحع باز هست پخش بشه باید از خصیصه loop در کنار autoplay استفاده کنید. درصورت استفاده از خصیصه loop حتی اگه ویدیو تموم بشه دوباره از اول شروع به پخش میکنه و این روند تکرار تا زمان بسته شدن صفحه وب ادامه پیدا میکنه.

 

<video controls autoplay loop>

و بقیه‌اش هم که مثل مثال قبلیه واسه همین دوباره تکرارش نکردم?.

 

خصیصه شماره 3: Meuted

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

<video controls autoplay loop muted>

 

فرمت‌های قابل قبول برای استفاده از صدا و ویدیو در html:

خب دوستای من تا اینجای کار یاد گرفتید صدا یا ویدیو رو به صفحه html که ساختید اضافه و از اون استفاده کنید و تقریبا کار تمومه. فقط یه سوال مهم باقی میمونه که میخوام توی این بخش به اون جواب بدم. اگه یادتون باشه توی بخش‌های اول این آموزش بهتون گفتم اگه مرورگر به هر دلیلی نتونه فایل صوت یا ویدیو شما رو پخش کنه پیغام قرمز رنگی که در ادامه تگ‌های source نوشتیم رو به کاربر نمایش میده.

 

سوال: به نظرتون چه دلیلی باعث میشه مرورگر نتونه فایل صدا یا ویدیو رو پخش کنه؟

در جواب باید بگم که 2 دلیل وجود داره. اولین دلیل اینه که مرورگر کلا قابلیت پخش صدا و ویدیو رو نداشته باشه. این موضوع بیشتر درباره مرورگرهای خیلی قدیمی صدق میکنه. دلیل دوم اینه که فرمت فایل صدا و ویدیویی که انتخاب کردید جز فرمت‌های قابل پشتیبانی توسط html نباشه.

حالا که بحث فرمت شد باید بگم که فرمت‌های صوتی قابل پخش در html فرمت‌های mp3, wav و ogg هستن. فرمت‌های ویدیویی قابل پخش در html فرمت‌های mp4, webm و ogg هستن.

 

ختم کلام:

دوستای گلم از همراهیتون ممنونم و امیدوارم این مطلب حسابی به دردتون بخوره و براتون مفید باشه. اگه دوست دارید بیشتر راجع به استفاده از صدا و ویدیو در html بدونید، می‌تونید به آموزش تگ audio و آموزش تگ video یه سر بزنید?.