جلسه دوازدهم: آموزش کامل تگ video در HTML
به دوره حرفه‌ای آموزش HTML در آوای وب خوش اومدی! اینجا قراره تگ <video> رو به‌صورت کامل یاد بگیری و پخش ویدیوها رو تو وب حرفه‌ای کنی! می‌خوای کلیپ، آموزش تصویری، یا انیمیشن به سایتت اضافه کنی و کاربرا رو شگفت‌زده کنی؟ با این آموزش جامع از آوای وب، همه‌چیز درباره تگ <video> رو یاد می‌گیری و وب رو به بهترین شکل ارتقا می‌دی! آماده‌ای که حرفه‌ای بشی و نکات سئو راجب به این تگ رو یاد بگیری؟ بزن بریم!
آنچه در این مقاله می‌خوانید :
🎬 تگ video چیه و چرا باید یادش بگیری؟
تگ <video> یه ابزار قدرتمند تو HTML5ـه که بهت اجازه می‌ده ویدیوها رو مستقیم تو سایتت پخش کنی — مثل یه کلیپ آموزشی، تیزر تبلیغاتی، یا انیمیشن جذاب!
با این تگ می‌تونی به مرورگر بگی: «این ویدیو رو پخش کن و تجربه‌ی کاربرا رو شگفت‌انگیز کن!»
یادگیریش مهمه چون سایتت رو از یه صفحه‌ی معمولی، به یه پلتفرم چندرسانه‌ای حرفه‌ای تبدیل می‌کنه. تعامل بالا می‌ره، کاربرا بیشتر می‌مونن و گوگل بهت رتبه‌ی بهتری می‌ده!
🔧 ساختار تگ video : ساده اما حرفه‌ای
تگ <video> ساختاری ساده داره: یه تگ باز و بسته که یا مستقیم یه فایل ویدیویی رو پخش می‌کنه.
✔️ مثال ساده:
<video src="video.mp4" controls></video> یا با <source> چند فرمت مختلف ارائه می‌ده تا تو هر مرورگری درست کار کنه.
مثلاً یه کلیپ MP4 با دکمه‌های پخش و توقف. یا می‌تونی چند <source> بذاری و بگی: «اگه MP4 رو نشناختی، WebM رو امتحان کن!»
اگر مرورگر خیلی قدیمی باشه، یه متن جایگزین نشون می‌ده، مثلاً: «مرورگرت ویدیو رو پشتیبانی نمی‌کنه. لطفاً بروزرسانی کن!»
✔️ مثال با فرمت‌های مختلف:
<video controls>
<source src="video.mp4" type="video/mp4">
مرورگر شما از این ویدیو پشتیبانی نمی‌کند.
</video>🔍 توضیحات:
video: تگ اصلی برای نمایش ویدیوsource: مشخص‌کننده‌ی منبع ویدیو و فرمت اون- متن داخل
<video>برای مرورگرهایی هست که ویدیو رو پشتیبانی نمی‌کنن.
🎯 کاربردهای جذاب: چرا از ویدیو تو وب استفاده کنیم؟
تگ <video> فقط برای پخش کلیپ نیست می‌تونی تجربه وب رو باهاش متحول کنی!
کاربردهای حرفه‌ای:
- آموزش تصویری: یه درس ویدیویی بذار؛ کاربرا عاشق یادگیری بصری‌ان!
- پس‌زمینه ویدیویی: یه کلیپ ملایم اضافه کن و سایتت رو چشم‌نوازتر کن
- تبلیغات: یه تیزر حرفه‌ای بذار و تعامل و فروش رو افزایش بده
ویدیوها باعث می‌شن کاربرا بیشتر بمونن و سایتت از بقیه متمایز بشه. این یعنی رشد و موفقیت بیشتر!
🛠 اتریبیوت‌های تگ video : ابزارای حرفه‌ای‌ات رو بشناس
تگ <video> با چند اتریبیوت کاربردی میاد که باید یادشون بگیری:
controls: دکمه‌های پخش، توقف، صدا و غیرهautoplay: ویدیو به‌محض بارگذاری پخش می‌شه (ممکنه مرورگر محدودش کنه)loop: ویدیو به‌صورت بی‌نهایت تکرار می‌شهmuted: صدا به‌صورت پیش‌فرض قطع باشهpreload: مشخص کن چی لود بشه «none» چیزی لود نمیشه، «metadata» برای لود اطلاعات، «auto» برای همه‌چیز!poster: تصویر پیش‌نمایش قبل از پخش (مثل پوستر فیلم)
💡 تگ source در video
تگ <source> یه ابزار حرفه‌ایه که چند فرمت ویدیویی رو پشتیبانی می‌کنه مثلاً MP4 و WebM تا ویدیوت تو هر مرورگری کار کنه! با src مسیر فایل رو مشخص می‌کنی و با type فرمتش رو می‌گی مثلاً "video/mp4" یا "video/webm". اینجوری مرورگر بهترین فرمت رو انتخاب می‌کنه و کاربرا تو هر دستگاهی ویدیوت رو می‌بینن! چرا باید ازش استفاده کنی؟ چون سازگاری رو تضمین می‌کنه و تجربه کاربری رو شگفت‌انگیز نگه می‌داره.
⚙️ پشتیبانی از فرمت‌ها و کدک‌ها
مرورگرهای مختلف از فرمت‌ها و کدک‌های متفاوتی پشتیبانی می‌کنند. رایج‌ترین فرمت‌ها:
| توضیحات | نوع رسانه | فرمت فایل |
|---|---|---|
| پشتیبانی گسترده، استفاده از کدک H.264 | video/mp4 | MP4 |
| بهینه برای وب، کدک VP8 و VP9 | video/webm | WebM |
| کدک Theora، کمتر استفاده می‌شود | video/ogg | Ogg |
برای سازگاری بیشتر می‌تونی از چندین فرمت استفاده کنی:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
مرورگر شما از این ویدیو پشتیبانی نمی‌کند.
</video>پیشنهاد ما استفاده از فرمت MP4 هست، چون تقریباً در تمام مرورگرها پشتیبانی می‌شه.
💡تگ track : افزودن زیرنویس و متادیتا
برای اضافه کردن زیرنویس یا اطلاعات کمکی به ویدیو، از تگ <track> استفاده کن:
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>src: مسیر فایل زیرنویس.kind: نوع داده (مانندsubtitlesیاmetadata).srclang: زبان زیرنویس.label: عنوان قابل‌نمایش زیرنویس.
🚀 سئو با video : گوگل رو فتح کن!
<video> فقط جذابیت نیست سئو رو هم به اوج می‌رسونه!
چند نکته‌ی طلایی:
- متن جایگزین: بین تگ‌ها بنویس “مرورگرت ویدیو رو پشتیبانی نمی‌کنه” گوگل می‌فهمه و ایندکس می‌کنه!
- اسم فایل: «my-tutorial.mp4» نه «video1.mp4» کلمات کلیدی رو بهینه کن!
- حجم کم: ویدیوها رو فشرده کن (مثلاً با HandBrake) سرعت سایتت بالا بره!
- فرمت‌های مختلف: MP4، WebM، حتی OGG بذار هر مرورگری کار کنه!
- CDN: از شبکه توزیع محتوا (مثل Cloudflare) استفاده کن لود سریع‌تر، رتبه بهتر!
- poster بهینه: یه عکس کم‌حجم و مرتبط بذار سئو تصویری رو تقویت کن!
- توضیحات: زیر ویدیو یه پاراگراف با کلمات کلیدی بنویس مثلاً “آموزش HTML با ویدیو” گوگل عاشقشه!
- autoplay با دقت: تجربه کاربری رو خراب نکن حرفه‌ای بمون!
🔥 پروژه عملی: پخش‌کننده ویدیویی بساز
بیایید با هم یه پخش‌کننده‌ی ویدیویی بسازیم:
- یه ویدیو با فرمت MP4 و WebM
- دکمه‌های کنترل فعال
- تصویر پیش‌نمایش (
poster) - متن زیر ویدیو: “اولین ویدیوم تو وب!”
- تست تو دسکتاپ و موبایل
اگر همه‌جا درست پخش شد، یعنی حرفه‌ای شدی! در ضمن، یادت نره اگه مبتدی هستی، کدات رو تو W3C Validator چک کنی و مطمئن شی درست نوشتی.
📌 جمع‌بندی: پلیر تصویری
حالا تگ <video> رو کامل و حرفه‌ای یاد گرفتی! برو پخش‌کننده ویدیویی بساز و سایتت رو به بهترین شکل ارتقا بده ما تا آخر خط باهاتیم! این مقاله جامع‌ترین و حرفه‌ای‌ترین راهنما برای تسلط به <video>ـه هر چی بخوای اینجاست!
💬 ایده‌هات رو فریاد بزن!
نظرت راجع به تگ <video> چیه؟ دلت می‌خواد چه چیزی به این آموزش اضافه کنیم؟ سؤالی داری؟ تو بخش نظرات برامون بنویس، تیم حرفه‌ای آوای وب با جون و دل جوابت رو می‌ده!
شهرام نجفی
همیشه آرزو داشتم که هنگام جستجوی اطلاعات، به سراغ یک منبع جامع و به روز برم، اما اینکه چنین منابعی را بیابم همیشه چالش بوده است. برای همین ایده راه اندازی سایت آوای وب به ذهنم رسید و الان در خدمت شما هستم.
برای نوشتن دیدگاه باید وارد بشوید.