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

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

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

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

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

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

×

جلسه 20 آموزش HTML: آموزش رمزگذاری یا انکود کاراکترها

مطالعه

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

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

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

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

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

×

جلسه 12 آموزش HTML: کار با آی فریم و تگ iframe

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

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

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

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

×

جلسه 18 آموزش HTML: موجودیت یا Entities در html

مطالعه

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

مثال:

×

جلسه 16 آموزش HTML: عناصر Block و Inline در html

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

×

جلسه 8 آموزش HTML: کار با تصاویر در html

مطالعه

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

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

×

جلسه 20 آموزش HTML: آموزش رمزگذاری یا انکود کاراکترها

مطالعه

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

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

×

جلسه ۵ آموزش HTML: تگ پاراگراف و فرمت‌ دهی متن در html

مطالعه

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

فرمت ویدیو	پسوند	مرورگرهایی که پشتیبانی می‌کنند
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: ارتفاع ویدیو رو تنظیم می‌کنه (مثل عرض، واحدش پیکسل هست).

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

مثال:

×

جلسه 2 آموزش HTML :HTML چیست؟ آنچه باید بدانید

مطالعه

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

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

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

نکات مهم ⚡

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

🎯 جمع‌ بندی

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

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

×

جلسه 19 آموزش HTML: طراحی واکنش‌ گرا (Responsive) و سازگار با موبایل

مطالعه

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

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

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

مثال:

  _____                __          __
 |  __ \               \ \        / /
 | |__) |__ _ _   _  __ \ \  /\  / / __
 |  _  // _\` | | | |/ _\` \ \/  \/ / '_ \
 | | \\ \ (_| | |_| | (_| | \  /\  /| |_) |
 |_|  \\_\__,_|\\__, |\\__,_|  \/  \/ | .__/
               __/ |              | |
              |___/               |_|    

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

×

جلسه 17 آموزش HTML: کار با id و کلاس (class و id)

مطالعه

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

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

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

سخن پایانی

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

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

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

×

جلسه 6 آموزش HTML: آشنایی با تگ های ایجاد کننده لیست

مطالعه