جلسه ۹ آموزش HTML: اضافه کردن ویدیو و صوت به صفحات وب

سلام دوست عزیز و مشتاق یادگیری! 👋 خوش اومدی به جلسه نهم آموزش HTML رایا وردپرس.

تو این جلسه می‌خواهیم یکی از مفیدترین قابلیت‌ها رو توی وب با هم بررسی کنیم: اضافه کردن ویدیو و صدا به صفحات وب. شاید الان برات سوال بشه که “آخه HTML چه ارتباطی با صوت و ویدیو داره؟” خب، باید بگم که HTML فقط برای نمایش متن و تصاویر نیست! 😎 با استفاده از تگ‌های ساده HTML می‌تونی به راحتی ویدیوها و فایل‌های صوتی رو به صفحات وب اضافه کنی و اینطوری سایتت رو جذاب‌تر و جالب‌تر کنی! 🎥🎧

🤔 چرا صوت و ویدیو (محتوای چندرسانه‌ای) اینقدر مهمن؟

امروزه محتوای چندرسانه‌ای، یعنی صوت و ویدیو، نقش حیاتی در جذب کاربران دارن. تصور کن یه آموزش آشپزی بدون ویدیو چقدر می‌تونه کسل‌کننده باشه؛ درست مثل یه دستور پخت خشک و بدون طعم! 🥘 یا یه وبلاگ موسیقی بدون نمونه‌های صوتی؛ انگار بدون روح و ناقصه! 🎵

با استفاده از تگ‌های ساده HTML، می‌تونی به راحتی این محتواهای جذاب رو به صفحاتت اضافه کنی و تجربه کاربری سایتت رو بهتر کنی. حالا بیا با هم یاد بگیریم چطور این امکانات فوق‌العاده رو به کار ببریم و وبسایتمون رو از حالت معمولی خارج کنیم! 🚀

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

تگ <video>: نمایش ویدیو در وب 📹

زمانی که HTML5 معرفی شد، یکی از مهم‌ترین ویژگی‌هاش پشتیبانی از پخش مستقیم ویدیو و صدا بود. قبل از اون، برای پخش ویدیو توی وب مجبور بودیم از پلاگین‌های جانبی مثل فلش پلیر استفاده کنیم. اما حالا همه چیز خیلی ساده‌تر شده! 🎉

تگ <video> یک ابزار قدرتمند توی HTML هست که بهت این امکان رو می‌ده تا ویدیوهای جذابت رو به راحتی در صفحات وب نمایش بدی. با استفاده از این تگ، می‌تونی محتواهای ویدیویی سایتت رو به شکلی ساده و کاربرپسند اضافه کنی. بیا با هم ببینیم چطور کار می‌کنه! 📹🚀

کد پایین رو نگاه کن:

<video>
  <source src="your-video.mp4" type="video/mp4">
</video>

🔍 توضیح کد بالا

1️⃣ <video>: از این تگ برای نمایش ویدیو در صفحه استفاده میشه.
2️⃣ <source>: داخل این تگ، باید مسیر ویدیو (src) و نوع فایل (type) مشخص بشه.

🎬 ویژگی‌ های مهم تگ <video> در HTML

ویژگی‌ها (Attributes) در HTML اطلاعات اضافی به تگ‌ها میدن و نحوه‌ی رفتار اون‌ها رو مشخص می‌کنن. این ویژگی‌ها معمولاً داخل تگ بازشونده قرار می‌گیرن. در ادامه، مهم‌ترین ویژگی‌های تگ <video> رو برات لیست کردم:

1. controls – نمایش دکمه‌ های کنترل ویدیو 🎛️

با این ویژگی، پلیر ویدیویی به دکمه‌های پخش، توقف، کنترل صدا، تغییر سرعت و فول‌ اسکرین مجهز می‌شه. اگه این ویژگی رو اضافه نکنی، کاربر هیچ کنترلی روی ویدیو نداره!

مثال:

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

2. autoplay – پخش خودکار ویدیو 🚀

این ویژگی باعث می‌شه ویدیو به‌محض بارگیری صفحه، به‌صورت خودکار پخش بشه. ولی توجه کن که بعضی مرورگرها اجازه پخش خودکار ویدیوهای دارای صدا رو نمی‌دن، مگر اینکه از ویژگی muted هم استفاده کنی!

• مثال (پخش خودکار با صدا – ممکنه توی بعضی مرورگرها کار نکنه! ❌)

<video autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

• مثال (پخش خودکار بدون صدا – کاملاً سازگار ✅)

<video autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

3. loop – پخش مداوم ویدیو ♾

با این ویژگی، ویدیو بعد از تموم شدن دوباره از اول پخش می‌شه. این ویژگی برای ویدیوهای پس‌زمینه یا موارد تبلیغاتی خیلی کاربردیه.

مثال:

<video loop autoplay muted>
  <source src="background.mp4" type="video/mp4">
</video>

📌 نتیجه: این ویدیو بی‌صدا و مداوم در پس‌زمینه پخش می‌شه.

4. muted – پخش ویدیو بدون صدا 🔇

اگه می‌خوای ویدیوت بی‌صدا پخش بشه، از این ویژگی استفاده کن. معمولاً همراه autoplay به کار می‌ره، چون بعضی مرورگرها پخش خودکار ویدیوهای دارای صدا رو مسدود می‌کنن.

مثال:

<video muted>
  <source src="video.mp4" type="video/mp4">
</video>

5. poster – نمایش تصویر کاور ویدیو قبل از پخش ویدیو

با این ویژگی، قبل از اینکه ویدیو پخش بشه، یه تصویر کاور (thumbnail) نمایش داده می‌شه. این ویژگی برای جذاب‌تر کردن صفحه خیلی مفیده!

مثال:

<video controls poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

📌 نتیجه: تا وقتی کاربر دکمه “پخش” رو نزنه، تصویری به‌عنوان کاور دیده می‌شه.

6. preload – نحوه بارگیری ویدیو قبل از پخش 🚀

این ویژگی مشخص می‌کنه که مرورگر چقدر از ویدیو رو قبل از پخش بارگذاری کنه.

۳ مقدار اصلی داره:

✅ auto → کل ویدیو از قبل لود می‌شه (مصرف پهنای باند زیاد 😑)
✅ metadata → فقط اطلاعات ویدیو (مثلاً مدت‌ زمان) بارگیری می‌شه
✅ none → هیچ چیزی تا قبل از پخش لود نمی‌شه (بهینه ترین حالت برای افزایش سرعت لود صفحه سایت ⚡)

مثال:

<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4">
</video>

📌 نتیجه: فقط اطلاعات ویدیو (مثل مدت‌ زمان) قبل از پخش بارگذاری می‌شه.

🎥 مثال نهایی (ترکیب همه ویژگی‌ها)

<video controls autoplay muted loop poster="thumbnail.jpg" preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  مرورگر شما از پخش این ویدیو پشتیبانی نمی‌کند.
</video>

📌 ویژگی‌های این ویدیو:
✅ دکمه‌های کنترل داره 🎛
✅ به‌محض باز شدن صفحه پخش می‌شه 🚀
✅ بی‌صداست 🔕
✅ به‌صورت مداوم پخش می‌شه ♾
✅ قبل از پخش، تصویر کاور نمایش داده می‌شه 🖼
✅ فقط اطلاعات متادیتا قبل از پخش بارگذاری می‌شه ⚡
✅ از دو فرمت ویدیویی mp4 و webm پشتیبانی می‌کنه 📹

فرمت‌های مختلف ویدیو ممکنه در مرورگرهای مختلف پشتیبانی نشه، پس همیشه بهتره چند فرمت مختلف رو قرار بدی. در اینجا جدولی از رایج‌ترین فرمت‌های ویدیویی و پشتیبانی مرورگرها رو برات آوردم:

فرمت ویدیو	پسوند	مرورگرهایی که پشتیبانی می‌کنند
MP4	mp4	Chrome, Firefox, Safari, Edge, Opera
WebM	webm	Chrome, Firefox, Opera
OGG	ogg	Firefox, Chrome, Opera

نکات مهم:

• MP4 (H.264): این فرمت یکی از محبوب‌ترین فرمت‌هاست و معمولاً در بیشتر مرورگرها پشتیبانی می‌شه. برای سازگاری بیشتر، این فرمت گزینه خوبی به حساب میاد.
• WebM: مخصوصاً برای مرورگرهای Chrome و Firefox طراحی شده و در برخی مرورگرهای دیگر مثل Opera هم پشتیبانی می‌شه.
• OGG: این فرمت بیشتر برای مرورگر Firefox استفاده می‌شه، اما در مرورگرهای دیگر هم کار می‌کنه.

🎥 تنظیم اندازه عرض و ارتفاع ویدیو در HTML

برای تنظیم اندازه ویدیو در صفحه، می‌تونی از ویژگی‌های width (عرض) و height (ارتفاع) استفاده کنی. این ویژگی‌ها بهت کمک می‌کنن تا ویدیوت رو دقیقا همونطور که می‌خوای، نمایش بدی.

📏 ویژگی‌های width و height:

• width: عرض ویدیو رو مشخص می‌کنه (واحدش معمولاً پیکسل هست).
• height: ارتفاع ویدیو رو تنظیم می‌کنه (مثل عرض، واحدش پیکسل هست).

<video controls width="600" height="400">
  <source src="video.mp4" type="video/mp4">
  مرورگر شما از پخش این ویدیو پشتیبانی نمی‌کند.
</video>

نحوه اضافه کردن زیرنویس به ویدیو با استفاده از تگ <track> در HTML

برای اضافه کردن زیرنویس به ویدیو در HTML، از تگ <track> استفاده می‌کنیم. این تگ می‌تونه زیرنویس‌ها یا توضیحات دیگه‌ای رو به ویدیو اضافه کنه. برای این کار، باید فایل زیرنویس رو در فرمت مناسب (مثلاً .vtt که فرمت استاندارد زیرنویس‌های HTML5 هست) آماده کنیم و اون رو با ویژگی‌های مناسب به تگ <video> اضافه کنیم تا ویدیو برای مخاطبان بیشتری قابل دسترس باشه

مثال:

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
</video>

ویژگی‌های مهم تگ <track> 🔍

• src: آدرس فایل زیرنویس (مثلاً subtitles_en.vtt)
• kind: نوع زیرنویس یا توضیحات (مثلاً subtitles برای زیرنویس یا captions برای توضیحات برای افراد ناشنوا)
• srclang: زبان زیرنویس (fa برای فارسی یا en برای انگلیسی)
• label: برچسبی که به کاربر در منو نشان داده می‌شود (مثلاً “فارسی” یا “English”)
• default: مشخص می‌کنه که کدوم زیرنویس به‌طور پیش‌فرض نمایش داده بشه

یه مثال کامل‌ تر 🌟

<video width="640" height="360" controls>
    <source src="my_video.mp4" type="video/mp4">
    <source src="my_video.webm" type="video/webm">
    
    <!-- زیرنویس فارسی -->
    <track 
        src="subtitles_fa.vtt" 
        kind="subtitles" 
        srclang="fa" 
        label="فارسی" 
        default>
    
    <!-- زیرنویس انگلیسی -->
    <track 
        src="subtitles_en.vtt" 
        kind="subtitles" 
        srclang="en" 
        label="English">
    مرورگر شما از ویدیو پشتیبانی نمی‌کنه 😔
</video>

ساختار فایل زیرنویس (WebVTT) 📄

فایل زیرنویس ویدیو باید با فرمت WebVTT (.vtt) ساخته بشه. این فرمت استاندارد برای زیرنویس در HTML5 هست. در اینجا یک نمونه از فایل زیرنویس به فرمت WebVTT داریم:

WEBVTT

00:00:01.000 --> 00:00:04.000
سلام! به ویدیوی آموزشی ما خوش اومدید.

00:00:04.500 --> 00:00:07.000
امروز می‌خوایم درباره HTML صحبت کنیم.

00:00:07.500 --> 00:00:10.000
HTML یه زبان نشانه‌گذاری برای ساخت صفحات وبه.

نکات مهم ⚡

• فایل .vtt باید با کدگذاری UTF-8 ذخیره بشه.
• خط اول فایل زیرنویس حتماً باید "WEBVTT" باشه.
• بین “WEBVTT” و اولین زیرنویس باید یه خط خالی باشه.
• زمان‌ها باید دقیقاً با فرمت صحیح نوشته بشن (مثلاً 00:00:01.000 --> 00:00:04.000).
• بین هر دو زیرنویس باید یه خط خالی باشه.

🎯 جمع‌ بندی

💡 تگ <video> یکی از مهم‌ترین ابزارهای HTML برای نمایش ویدیو در وبه. با استفاده از ویژگی‌های مختلفش، می‌تونی تجربه کاربری رو بهتر کنی. بسته به نیازت، می‌تونی تنظیمات مختلفی مثل پخش خودکار، لوپ، بی‌صدا بودن، تصویر پیش‌نمایش و… رو روی ویدیو اعمال کنی.

حالا نوبت توئه! 🚀 از این ویژگی‌ها استفاده کن و ویدیوهای جذابت رو توی سایت قرار بده! 😍🎬

تگ <audio>: پخش صوت در وب 🎵

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

تگ <audio> خودش به تنهایی هیچ چیز نشون نمی‌ده، اما با ویژگی‌هایی مثل controls می‌تونی دکمه‌های پخش، توقف و تنظیم صدا رو اضافه کنی تا کاربر بتونه فایل صوتی رو کنترل کنه.

مثال:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  مرورگر شما از پخش این فایل صوتی پشتیبانی نمی‌کند.
</audio>

تگ <audio>، ویژگی‌ها و صفاتش مشابه تگ <video> هستن که قبلاً توضیح دادم. بنابراین ویژگی‌های گفته‌شده برای تگ <audio> هم صادق هستن و مثال‌هاش هم به همون شکل کار می‌کنن. تنها تفاوت اینه که ویژگی poster مخصوص تگ ویدیو هست و در تگ <audio> کاربرد نداره. در ادامه، لیست کامل ویژگی‌های تگ <audio> رو برات آوردم:

💡 نکته: هر متنی که در بین تگ <audio> (یا <video>) قرار بگیره، اگر مرورگر از تگ مورد نظر پشتیبانی نکنه، اون متن برای کاربر به نمایش در میاد. این امکان به کاربر کمک می‌کنه تا متوجه بشه چرا فایل صوتی یا ویدیویی پخش نمی‌شه. به عنوان مثال، ممکنه بنویسی “مرورگر شما از پخش فایل صوتی پشتیبانی نمی‌کند” (مثل مثال بالا) یا هر پیامی که برای کاربر توضیح بده چرا نمی‌تونه محتوا رو مشاهده یا بشنوه.

🎵 فرمت‌های رایج صوتی و پشتیبانی مرورگرها

⭐ بهترین فرمت صوتی برای وب: به دلیل پشتیبانی گسترده در تمامی مرورگرها و فشرده‌سازی مناسب، بهترین انتخاب برای استفاده در وب MP3 هست. این فرمت کیفیت خوبی داره و حجم فایل‌ها نسبتاً کمه.

سخن پایانی

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

• همیشه از ویژگی controls برای راحتی کاربران استفاده کن.
• برای پشتیبانی از همه مرورگرها، چند فرمت مختلف از فایل‌های صوتی و ویدیویی آماده کن.
• به فکر کاربرهای موبایل و افرادی که اینترنت ضعیف دارن هم باش.
• حواست به بهینه‌سازی حجم فایل‌ها و سرعت بارگذاری صفحه باشه.

امیدوارم این جلسه برات مفید بوده باشه! در جلسه بعد با مباحث جدید و هیجان‌انگیزتر در خدمتت هستم. اگر سؤالی داشتی، حتماً توی بخش نظرات مطرح کن. موفق و پیروز باشی! 🌟