تگ video
تگ video از تگهایی است که برای پخش فایلهای ویدیویی استفاده میشود. این تگ بدون نیاز به افزونههایی مانند فلش پلیر، مستقیماً ویدیو را در مرورگر نمایش می دهند. تگ <video> برخلاف عناصر چندرسانهای قدیمی، امکان کنترل کامل بر روی نحوه پخش، توقف، بیصدا کردن، و تنظیم زمان ویدیو را فراهم میکند. این تگ میتواند با استفاده از ویژگیهایی مانند controls, autoplay, loop, muted و poster تنظیمات و ویژگیهای مختلفی به ویدیو اضافه کند.
ساختار پایه تگ <video>
ساختار سادهی این تگ به صورت زیر است:
در این مثال، ویدیو از فایلی به نام video.mp4 بارگذاری میشود و ویژگی controls باعث میشود دکمههای پخش، توقف و کنترل صدا در اختیار کاربر قرار گیرد.
ویژگیهای مهم تگ <video>
src: آدرس فایل ویدیو را مشخص میکند. این ویژگی را میتوان در خود تگ
<video>قرار داد یا از تگهای<source>استفاده کرد.controls: اگر این ویژگی نوشته شود، مرورگر کنترلهای پیشفرض مانند پخش، توقف، صدا و نوار زمان را به کاربر نمایش میدهد.
autoplay: باعث میشود ویدیو به محض بارگذاری صفحه بهصورت خودکار شروع به پخش کند. توجه داشته باشید که بیشتر مرورگرها پخش خودکار را فقط در صورت بیصدا بودن ویدیو مجاز میدانند.
loop: ویدیو را پس از پایان بهصورت خودکار از ابتدا پخش میکند.
muted: ویدیو را در حالت بیصدا اجرا میکند. این ویژگی مخصوصاً زمانی مفید است که بخواهید ویدیو به صورت خودکار پخش شود.
poster: آدرس تصویری را مشخص میکند که قبل از شروع پخش ویدیو بهعنوان تصویر پیشنمایش نمایش داده میشود.
ارائه خدمات مشاوره کسب و کار رایگان در جهت توسعه فروش، رشد کسب و کار و تغییر موقعیت برند شما پنج شنبه های هر هفته
تگ ویدئو در html
تگ <video> در HTML5 برای نمایش فایلهای ویدیویی در صفحات وب استفاده میشود. این تگ امکان پخش مستقیم ویدیو از طریق مرورگر را فراهم میکند، بدون نیاز به نرمافزار یا افزونههای خارجی مانند فلش پلیر. با معرفی HTML5، استفاده از این تگ به یکی از استانداردهای طراحی وب تبدیل شده است.
ساختار پایه این تگ به شکل زیر است:
در این مثال، فایل movie.mp4 پخش میشود و ویژگی controls کنترلهایی مانند پخش، توقف و تنظیم صدا را در اختیار کاربر قرار میدهد.
تگ <video> از چند ویژگی مهم پشتیبانی میکند:
controls: نمایش دکمههای کنترل پخش.
autoplay: شروع خودکار ویدیو هنگام بارگذاری صفحه.
loop: پخش مکرر ویدیو بهصورت پیوسته.
muted: پخش ویدیو به صورت بیصدا.
poster: نمایش یک تصویر پیشنمایش قبل از شروع ویدیو.
برای پشتیبانی از فرمتهای مختلف ویدیو و افزایش سازگاری با مرورگرها، میتوان از تگهای <source> استفاده کرد:
مرورگر فایلهای موجود را به ترتیب بررسی میکند و نخستین فرمتی را که پشتیبانی کند پخش خواهد کرد. متن داخل تگ برای مرورگرهایی نمایش داده میشود که تگ <video> را پشتیبانی نمیکنند.
فرمتهای رایج برای استفاده در تگ ویدیو عبارتاند از:
MP4 (video/mp4): بیشترین سازگاری با مرورگرها.
WebM (video/webm): مناسب برای پخش سریع در وب.
Ogg (video/ogg): یک فرمت آزاد و سبک.
همچنین میتوان به کمک تگ <track> به ویدیو زیرنویس اضافه کرد که برای دسترسپذیری بسیار مهم است.
ارائه خدمات اندیشه دیجی
کد ویدئو
کد ویدئو در HTML به کدی گفته میشود که از تگ <video> برای نمایش فایلهای ویدیویی در مرورگر استفاده میکند. این کدها به طراحان وب این امکان را میدهند تا بدون نیاز به نرمافزار جانبی، ویدیوها را بهصورت مستقیم در صفحه وب قرار دهند. کد ویدئو میتواند بسیار ساده یا پیشرفته باشد و بر اساس نیاز طراح شامل ویژگیها و تنظیمات مختلفی باشد.
ساختار پایه کد ویدئو به شکل زیر است:
در این کد، یک فایل ویدیویی با نام video.mp4 نمایش داده میشود و ویژگی controls باعث میشود که مرورگر دکمههای کنترل مانند پخش، توقف، صدا و… را نشان دهد. این سادهترین شکل استفاده از کد ویدئو است.
کد ویدئو میتواند با استفاده از تگهای <source> چندین فایل ویدیویی را برای پشتیبانی از فرمتهای مختلف تعریف کند:
در این حالت، مرورگرها به ترتیب فرمتها را بررسی میکنند و نخستین فرمتی را که پشتیبانی میکنند، اجرا مینمایند.
کد ویدئو همچنین میتواند شامل ویژگیهایی برای سفارشیسازی رفتار و ظاهر پخش ویدیو باشد:
autoplay: شروع خودکار پخش ویدیو هنگام بارگذاری.
loop: پخش مداوم ویدیو بهصورت چرخهای.
muted: پخش ویدیو بدون صدا.
poster: مشخص کردن تصویری که قبل از پخش ویدیو نمایش داده شود.
preload: تعیین میزان بارگذاری فایل ویدیو قبل از پخش (مانند
auto,metadata, یاnone).
همچنین در کد ویدئو میتوان از تگ <track> برای اضافه کردن زیرنویس یا کپشن استفاده کرد:
در مجموع، کد ویدئو در HTML روشی ساده و استاندارد برای افزودن محتوای ویدیویی به صفحات وب است و قابلیتهای گستردهای برای تنظیم و نمایش محتوا به کاربران ارائه میدهد.
اطلاعاتت رو بده وقت مشاوره رزرو کن
