عنصر video و ویژگی‌های آن

video: تگ audio با چند قابلیت اضافه

خبر خوب اینه که چون تو درس قبل با audio کامل آشنا شدیم، یادگیری video خیلی سریع‌تر پیش می‌ره؛ چون اکثر ویژگی‌هاشون کاملاً مشترکه (controls، autoplay، loop، muted، preload، source). تو این درس، هم این اشتراکات رو مرور می‌کنیم، هم چند ویژگی مخصوص video که audio نداشت رو می‌بینیم.

video چیه؟

<video src="movie.mp4" controls></video>

تگ video دقیقاً مثل audio، یه فایل رسانه‌ای (این بار ویدیو) رو مستقیم داخل صفحه جاسازی می‌کنه، بدون نیاز به هیچ افزونه‌ای.

ویژگی‌های مشترک با audio

<video src="movie.mp4" controls autoplay muted loop preload="metadata"></video>

همون‌طور که گفتیم، ویژگی‌های زیر دقیقاً همون معنایی رو دارن که تو درس قبل برای audio دیدیم:

• controls: نمایش کنترل‌های پخش (دکمه‌ی پخش، نوار پیشرفت، صدا).
• autoplay: پخش خودکار (که باز هم اکثر مرورگرها اون رو بدون muted مسدود می‌کنن).
• loop: پخش مکرر بعد از اتمام ویدیو.
• muted: شروع بدون صدا.
• preload: نحوه‌ی پیش‌بارگذاری (none، metadata یا auto).

ویژگی مخصوص video: width و height

<video src="movie.mp4" controls width="640" height="360"></video>

برخلاف صدا که چیزی برای «دیدن» نداره، ویدیو یه ابعاد بصری داره؛ پس ویژگی‌های width و height دقیقاً مثل چیزی که تو درس ۵-۱ برای img دیدیم، ابعاد نمایش رو مشخص می‌کنن و از پرش محتوای صفحه در زمان بارگذاری جلوگیری می‌کنن.

ویژگی مخصوص video: poster

<video src="movie.mp4" controls poster="movie-thumbnail.jpg"></video>

ویژگی poster یه تصویر رو مشخص می‌کنه که قبل از شروع پخش (و تا زمانی که کاربر دکمه‌ی پخش رو نزده)، به‌جای یه فریم خالی یا سیاه، نمایش داده بشه. این تصویر معمولاً یه فریم جذاب از خود ویدیو یا یه تصویر معرفی‌کننده‌ست؛ دقیقاً شبیه چیزی که تو یوتیوب و پلتفرم‌های ویدیویی دیگه به‌عنوان thumbnail می‌بینی.

چرا poster مهمه؟

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

استفاده از چند فرمت با source

<video controls poster="movie-thumbnail.jpg" width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  مرورگر شما از پخش این ویدیو پشتیبانی نمی‌کند.
</video>

درست مثل audio، وقتی از چند فرمت مختلف پشتیبانی می‌کنی (اینجا MP4 و WebM، دو فرمت رایج ویدیویی وب)، بهتره از src مستقیم روی video صرف‌نظر کنی و به‌جاش چند تگ source بذاری؛ مرورگر اولین فرمتی که پشتیبانی می‌کنه رو انتخاب می‌کنه.

عنصر track: زیرنویس و ترجمه

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles-fa.vtt" kind="subtitles" srclang="fa" label="فارسی">
</video>

یکی از مهم‌ترین ویژگی‌های اختصاصی video (که audio اصلاً نداره)، امکان اضافه‌کردن زیرنویس با تگ track هست. این یه قابلیت خیلی مهم برای دسترسی‌پذیری‌ه که تو درس بعدی همین فصل کامل و مفصل بررسیش می‌کنیم؛ همین‌جا فقط بدون که وجودش داره و مخصوص video است، نه audio.

یه مثال کامل و واقعی

<h2>آموزش نصب برنامه</h2>

<video controls poster="tutorial-thumb.jpg" width="800" height="450" preload="metadata">
  <source src="tutorial.mp4" type="video/mp4">
  <source src="tutorial.webm" type="video/webm">
  مرورگر شما از پخش ویدیو پشتیبانی نمی‌کند. می‌توانید آن را
  <a href="tutorial.mp4">از این لینک دانلود کنید</a>.
</video>

تو این مثال، یه تصویر پیش‌نمایش (poster) داریم، ابعاد مشخص (width/height)، دو فرمت پشتیبان (mp4 و webm)، و یه لینک دانلود به‌عنوان محتوای جایگزین برای مرورگرهای خیلی قدیمی.

مقایسه‌ی کامل audio و video

ویژگی	audio	video
controls, autoplay, loop, muted, preload	دارد	دارد
width, height	ندارد (نیازی نیست)	دارد
poster	ندارد	دارد
track (زیرنویس)	ندارد	دارد
source (چند فرمت)	دارد	دارد

چند اشتباه رایج

• فراموش‌کردن width و height، که باعث پرش محتوای صفحه در زمان بارگذاری ویدیو می‌شه.
• عدم استفاده از poster، که باعث نمایش یه صفحه‌ی خالی یا سیاه قبل از شروع پخش می‌شه.
• تکیه فقط به یه فرمت ویدیویی واحد، بدون فرمت پشتیبان.
• استفاده از autoplay بدون muted، که معمولاً توسط مرورگرها مسدود می‌شه.

بهترین روش‌ها

• همیشه width و height رو مشخص کن تا از پرش محتوای صفحه جلوگیری بشه.
• همیشه یه poster مناسب و جذاب برای ویدیوهات انتخاب کن.
• حداقل دو فرمت مختلف (مثل mp4 و webm) رو با source ارائه بده.

نکته‌ی سئو

گوگل می‌تواند ویدیوهای جاسازی‌شده با تگ video را در نتایج جستجوی ویدیویی نمایش دهد؛ استفاده از poster مناسب و ارائه‌ی زیرنویس (که در درس بعد می‌بینیم) می‌تواند به فهم بهتر گوگل از محتوای ویدیو و بهبود سئوی آن کمک کند.

نکته‌ی دسترسی‌پذیری

برخلاف audio که هیچ راه استانداردی برای زیرنویس نداشت، video با تگ track امکان ارائه‌ی زیرنویس را برای کاربران ناشنوا یا کم‌شنوا فراهم می‌کند؛ این تفاوت مهم بین این دو تگ را در درس بعدی کامل بررسی می‌کنیم.

جمع‌بندی

تگ video اکثر ویژگی‌های audio (controls، autoplay، loop، muted، preload، source) را به ارث می‌برد و علاوه بر آن‌ها، ویژگی‌های اختصاصی width، height، poster و امکان زیرنویس با track را هم دارد که مخصوص محتوای بصری طراحی شده‌اند.