تگ video در HTML

به نام خداوند علم و دانش. سلام به دوستان گرامی و مخاطبین وب سایت آموزشی کدیونی، وقت همگی بخیر، در این صفحه با مطلب تگ video در HTML از سری آموزش های HTML در خدمت شما عزیزان هستیم.

محتوای ویدیویی مانند سایر رسانه های صوتی و تصویری، بخش اعظمی از فضای مجازی را تشکیل می دهد. سایت های پخش ویدیو از پربازدیدترین سایت های اینترنت محسوب می شوند و اگر می خواهید بدانید چطور می توان در سایت خود یک کلیپ را پخش کنید این مطلب را دنبال کنید.

تگ video چیست؟

تگ video برای پخش فایل ویدئویی در صفحه HTML به کار می رود.

تگ video تگی است که در HTML5 معرفی شده و قبل از آن، راه های دیگری برای پخش ویدئو وجود داشت که الان دیگر مثل سابق کاربرد ندارد.

این تگ با <video> شروع شده و با </video> پایان می یابد.

<video></video>

فرمت های قابل پخش

در حال حاضر با تگ ویدیو می توان فایل هایی با فرمت های mp4 و webm و ogg را پخش کرد.

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

کد:

<video width="300" height="300" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogg" type="video/ogg" />
</video>

صفات تگ video

برای کنترل و تنظیمات بیشتر باید از صفات این تگ استفاده کرد.

در جدول زیر با صفات تگ video آشنا خواهید شد.

صفت	مقدار	توضیحات
src	URL (لینک ویدیو)	لینک آدرس ویدیو مورد نظر برای پخش
width	عددی (پیکسل)	تنظیم عرض ویدیو
height	عددی (پیکسل)	تنظیم ارتفاع ویدیو
controls	controls	کنترل پخش ویدیو
autoplay	autoplay	پخش خودکار
loop	loop	تکرار ویدیو
muted	muted	بی صدا کردن ویدیو
poster	URL (لینک عکس)	لینک آدرس پوستر ویدیو
preload	auto | metadata | none	پیش بارگذاری ویدیو توسط مرورگر

صفت src

لینک فایل ویدیویی باید در این صفت قرار گیرد.

<video src="file.mp4"></video>

صفت controls

امکان کنترل پخش ویدیو را فراهم می کند.

<video controls></video>

صفت autoplay

با استفاده از این صفت، پخش ویدیو به صورت خودکار شروع می شود.

<video autoplay></video>

صفت loop

با استفاده از این صفت، ویدیو بعد هر بار اجرا تکرار می شود.

<video loop></video>

صفت muted

با استفاده از این صفت، ویدیو بی صدا می شود.

<video muted></video>

صفت poster

با استفاده از این صفت می توان برای ویدیو، عکس انتخاب کرد.

<video poster="image.jpg"></video>

صفت preload

برای پیش بارگذاری فایل ویدیو به کار می رود.

<video preload="auto|metadata|none"></video>

مقدار auto

بعد از لود صفحه، پیشاپیش ویدیو توسط مرورگر بارگذاری می شود.

مقدار metadata

بعد از لود صفحه، اطلاعات متا ویدیو بارگذاری می شود.

مقدار none

پیش بارگذاری توسط مرورگر را کلا غیر فعال می کند.

مثال های تگ video

مثال 1:

<video src="video.mp4" width="300" height="300" controls autoplay loop muted poster="image.jpg" preload="auto"></video>

مثال 2:

<video width="300" height="300" controls autoplay loop muted poster="image.jpg" preload="auto">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogg" type="video/ogg" />
</video>

در مثال های بالا تمامی صفات ذکر شده در جدول بالا به کار رفته است.

مثال 3:

<video src="video.mp4" width="300" height="300" controls></video>

برای پخش فیلم از تگ video و برای افزودن فایل فیلم از صفت src استفاده می کنیم.

صفت width و صفت height برای تنظیم عرض و ارتفاع فیلم به کار می روند.

صفت controls کنترل پخش و توقف فیلم را در اختیار کاربران قرار می دهد.

سازگاری با مرورگرها

تگ video با مرورگرهای زیر سازگار است:

• گوگل کروم
• فایرفاکس
• اج
• اپرا
• سافاری
• گوگل کروم اندروید
• فایرفاکس اندروید
• اپرا اندروید
• سافاری iOS