آموزش تگ ویدئو در HTML به زبان ساده (با مثال)

۵ HTML از تگ

در حال حاضر، سه قالب ویدیویی برای تگ ویدئو در HTML پشتیبانی می شود:

1. mp4
2. webM
3. ogg

جدول زیر مشخص کند کدام مرورگر وب از قالب فایل ویدیویی پشتیبانی می کند.

Mp4	webM	ogg	نام مرورگر
بله	نه	نه	Internet Explorer
بله	بله	بله	Google Chrome
بله	بله	بله	Mozilla Firefox
نه	بله	بله	Opera
بله	نه	نه	Apple Safari

• اندروید نیز از قالب mp4 پشتیبانی می کند.

مثال برای تگ Video در HTML

در کد زیر برای پخش فایل mp4 از تگ video استفاده شده است.

<video controls>

  <source src=”movie.mp4″ type=”video/mp4″>

  Your browser does not support the html video tag.

در مثال زیر برای پخش فایل ogg از تگ ویدیو استفاده شده است.

<video controls>

   <source src=”movie.ogg” type=”video/ogg”>

  Your browser does not support the html video tag.

تگ ویدئو در HTML ابزاری است که به شما اجازه می‌دهد مستقیماً و بدون نیاز به برنامه‌های جانبی، یک فیلم را داخل صفحه وب‌سایت خود قرار دهید.

از آنجایی که درخواست کردید کدی نوشته نشود، طرز کار و ویژگی‌های این تگ را به صورت مفهومی و بسیار ساده برایتان توضیح می‌دهم:

طرز کار تگ ویدئو (مفهومی)

تصور کنید می‌خواهید یک تلویزیون کوچک داخل مقاله یا صفحه سایت خود بگذارید. این تگ دقیقاً نقش همان قاب تلویزیون را بازی می‌کند. شما ابتدا این قاب را در صفحه قرار می‌دهید و سپس آدرس فایلِ فیلم مورد نظرتان را به آن می‌دهید تا مرورگر بداند چه چیزی را باید در این قاب نمایش دهد.

ویژگی‌های مهمی که می‌توانید به ویدئو اضافه کنید:

وقتی این قاب را در صفحه می‌گذارید، می‌توانید تنظیمات جالبی روی آن اعمال کنید تا دقیقاً مطابق میل شما رفتار کند:

• دکمه‌های کنترل (Controls): می‌توانید به مرورگر دستور دهید که دکمه‌های پخش، توقف، نوار زمان، بزرگنمایی و تغییر صدا را زیر فیلم نمایش دهد تا کاربر بتواند ویدئو را خودش مدیریت کند.

• پخش خودکار (Autoplay): می‌توانید تنظیم کنید به محض اینکه کاربر وارد صفحه سایت شد، ویدئو خودبه‌خود شروع به پخش کند.

• حالت بی‌صدا (Muted): در مرورگرهای امروزی، اگر بخواهید یک ویدئو به صورت خودکار پخش شود، حتماً باید این ویژگی را روشن کنید تا فیلم در ابتدا بدون صدا پخش شود و مزاحمتی برای کاربر ایجاد نکند.

• تکرار مداوم (Loop): با این ویژگی، به محض اینکه فیلم به ثانیه آخر می‌رسد، دوباره از ابتدا پخش می‌شود (این حالت برای ویدئوهای کوتاه یا ویدئوهایی که به عنوان تصویر پس‌زمینه سایت استفاده می‌شوند بسیار کاربردی است).

• تصویر کاور (Poster): می‌توانید یک عکس ثابت انتخاب کنید تا قبل از اینکه کاربر دکمه پخش (Play) را بزند، آن عکس به عنوان کاور روی ویدئو نمایش داده شود.

یک نکته طلایی: مرورگرهای مختلف (مثل گوگل کروم، فایرفاکس یا سافاری) از انواع مختلف فیلم‌ها پشتیبانی می‌کنند، اما در دنیای طراحی وب، استفاده از فرمت MP4 امن‌ترین و بهترین انتخاب است، زیرا تقریباً تمام مرورگرها در موبایل و کامپیوتر آن را بدون هیچ مشکلی پخش می‌کنند.

انواع MIME برای قالب ویدئویی در HTML

نوع MIME موجود برای تگ video در جدول زیر آورده شده است.