در این درس یاد گرفتیم که چطور میتوانیم یک فایل ویدیویی را بهصورت بومی (Native) با HTML در صفحهی وب نمایش دهیم.
🧩 قدم اول: افزودن تگ <video>
برای نمایش ویدیو از تگ <video> استفاده میکنیم. داخل آن، تگ <source> قرار میدهیم تا مسیر فایل ویدیویی مشخص شود:
<video controls>
<source src="video/example.mp4" type="video/mp4">
</video>
- ویژگی controls دکمههای پخش، توقف و تنظیم صدا را نمایش میدهد.
🌍 قدم دوم: پشتیبانی از فرمتهای مختلف
برای سازگاری با مرورگرهای مختلف، بهتر است چند فرمت ویدیویی اضافه کنیم:
<video controls>
<source src="video/example.webm" type="video/webm">
<source src="video/example.mp4" type="video/mp4">
<source src="video/example.ogv" type="video/ogg">
</video>
- مرورگر اولین فرمتی را که پشتیبانی کند بارگذاری میکند.
🔙 قدم سوم: محتوای جایگزین (Fallback)
برای مرورگرهای قدیمی که از <video> پشتیبانی نمیکنند، میتوانیم متن یا لینک جایگزین قرار دهیم:
<video controls>
<source src="video/example.webm" type="video/webm">
<source src="video/example.mp4" type="video/mp4">
<source src="video/example.ogv" type="video/ogg">
مرورگر شما از ویدیو در HTML پشتیبانی نمیکند.
لطفاً <a href="https://browsehappy.com" target="_blank">مرورگر خود را بهروزرسانی کنید</a>.
</video>
🧠 نکات مهم در دنیای واقعی
- برخی مرورگرهای قدیمی اصلاً از
<video>پشتیبانی نمیکنند. - کیفیت و رزولوشن باید متناسب با سرعت اینترنت کاربر مدیریت شود.
- برای کنترل ظاهر پلیر (رنگ، آیکونها، جای دکمهها) نیاز به جاوااسکریپت یا کتابخانههای جانبی داریم.
🎯 راهحل حرفهای
در پروژههای واقعی، معمولاً از سرویسهای شخص ثالث مثل YouTube یا Vimeo استفاده میشود. این سرویسها:
- مدیریت فرمتها و سازگاری مرورگرها را انجام میدهند.
- امکان انتخاب کیفیت ویدیو را فراهم میکنند.
- کد تعبیه (Embed Code) آماده در اختیار شما قرار میدهند.
📚 جمعبندی
- برای افزودن ویدیو در HTML از
<video>و<source>استفاده کنید. - چند فرمت مختلف (MP4، WebM، OGV) اضافه کنید تا سازگاری بیشتر شود.
- ویژگی controls برای نمایش کنترلهای پخش ضروری است.
- محتوای fallback برای مرورگرهای قدیمی قرار دهید.
- در پروژههای واقعی، استفاده از سرویسهای شخص ثالث بهترین گزینه است.