track: زیرنویسی که ویدیوت رو برای همه قابلفهم میکنه
تو درس ۹-۲ یه اشارهی کوتاه به تگ track داشتیم و گفتیم این یکی از ویژگیهای اختصاصی videoه که audio نداره. حالا وقتشه کامل بریم سراغش، چون این تگ یکی از مهمترین ابزارهای دسترسیپذیری تو کل HTML5 محسوب میشه.
track چیه؟
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles-fa.vtt" kind="subtitles" srclang="fa" label="فارسی">
</video>تگ track یه فایل متنی جداگانه (با فرمت مخصوص که کمی جلوتر میبینیم) رو به ویدیو وصل میکنه که شامل زیرنویس، ترجمه یا توضیحات زمانبندیشدهست. این تگ یه فرزند مستقیم video هست و باید بعد از تگهای source (اگه وجود داشته باشن) نوشته بشه.
ویژگی src: مسیر فایل زیرنویس
ویژگی src مسیر فایل متنی زیرنویس رو مشخص میکنه؛ این فایل معمولاً پسوند .vtt داره (مخفف WebVTT، که مخصوص همین کاره).
ویژگی kind: نوع محتوای track
<track src="subtitles-fa.vtt" kind="subtitles" srclang="fa" label="فارسی">ویژگی kind مشخص میکنه این track دقیقاً چه نوع محتوایی رو حمل میکنه. مهمترین مقادیرش:
subtitles: زیرنویس ترجمهشده؛ برای کاربرانی که زبان گفتاری ویدیو رو نمیفهمن اما صدا رو میشنون.captions: زیرنویس کامل، شامل توضیح صداهای غیرگفتاری هم (مثل «[صدای در زدن]» یا «[موسیقی هیجانانگیز]»)؛ مخصوص کاربران ناشنوا یا کمشنوا که اصلاً صدا رو نمیشنون.descriptions: توضیح صوتی یا متنی از اتفاقات بصری مهم ویدیو، برای کاربران نابینا.chapters: فصلبندی ویدیو برای ناوبری سریعتر.
تفاوت subtitles و captions
این دو خیلی شبیه به نظر میرسن، اما هدفشون فرق داره: subtitles فرض میکنه کاربر صدا رو میشنوه، فقط زبانش رو نمیفهمه (پس فقط دیالوگها ترجمه میشن). captions فرض میکنه کاربر اصلاً صدایی نمیشنوه، پس علاوه بر دیالوگها، صداهای مهم محیطی هم توصیف میشن.
ویژگی srclang: زبان محتوای track
<track src="subtitles-fa.vtt" kind="subtitles" srclang="fa" label="فارسی">ویژگی srclang کد زبان محتوای اون track رو مشخص میکنه؛ دقیقاً همون کدهایی که تو درس ۲-۱ برای ویژگی lang دیدیم (مثل fa برای فارسی، en برای انگلیسی).
ویژگی label: نام قابلنمایش برای کاربر
ویژگی label متنیه که تو منوی انتخاب زیرنویس پلیر ویدیو نمایش داده میشه؛ مثلاً وقتی کاربر روی دکمهی زیرنویس تو کنترلهای ویدیو کلیک میکنه، این متن («فارسی») بهش نشون داده میشه تا بفهمه این گزینه دقیقاً چه زبانیه.
چند زبان مختلف با چند track
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles-fa.vtt" kind="subtitles" srclang="fa" label="فارسی">
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>میشه چند track مختلف برای زبانهای متفاوت اضافه کرد؛ کاربر از طریق منوی کنترلهای پلیر میتونه بین این زبانها یکی رو انتخاب کنه یا کلاً زیرنویس رو خاموش کنه.
ویژگی default: انتخاب پیشفرض
<track src="subtitles-fa.vtt" kind="subtitles" srclang="fa" label="فارسی" default>ویژگی default مشخص میکنه کدوم track، بهصورت پیشفرض (بدون نیاز به انتخاب دستی کاربر) فعال باشه؛ معمولاً روی زبان اصلی مخاطبان سایت گذاشته میشه.
ساختار فایل WebVTT چطوریه؟
فایل زیرنویس (با پسوند .vtt) یه فایل متنی ساده با یه ساختار زمانبندی مشخصه:
WEBVTT
00:00:01.000 --> 00:00:04.000
سلام و خوش آمدید به این آموزش.
00:00:04.500 --> 00:00:08.000
امروز میخواهیم دربارهی HTML5 صحبت کنیم.خط اول همیشه باید دقیقاً WEBVTT باشه. بعدش هر بلوک شامل یه بازهی زمانی (از چه ثانیهای تا چه ثانیهای این متن نمایش داده بشه) و خود متن زیرنویسه. این فایل جدا از فایل ویدیو ذخیره میشه و فقط از طریق ویژگی src به track وصل میشه.
یه مثال کامل و واقعی
<h2>آموزش آشپزی: طرز تهیه قورمه سبزی</h2>
<video controls poster="cooking-thumb.jpg" width="800" height="450">
<source src="cooking-video.mp4" type="video/mp4">
<track src="captions-fa.vtt" kind="captions" srclang="fa" label="فارسی (کامل)" default>
<track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
</video>تو این مثال، دو نوع زیرنویس داریم: یکی caption کامل فارسی (که بهصورت پیشفرض فعاله و شامل توصیف صداهای محیطی هم هست)، و یکی subtitle انگلیسی برای مخاطبان انگلیسیزبان که فقط دیالوگها رو ترجمه میکنه.
چرا track اینقدر برای دسترسیپذیری مهمه؟
تو درس ۹-۱ دربارهی audio گفتیم که هیچ راه استانداردی برای زیرنویس نداره و کاربران ناشنوا عملاً از محتوای صوتی صرف محروم میمونن. اما video با track این مشکل رو حل میکنه؛ کاربر ناشنوا یا کمشنوا میتونه با فعالکردن caption، محتوای کامل ویدیو (شامل دیالوگها و توضیح صداهای مهم) رو بهصورت متنی دنبال کنه.
چند اشتباه رایج
- استفاده از subtitles بهجای captions برای مخاطبان ناشنوا، که باعث میشه توضیح صداهای محیطی مهم از دست بره.
- فراموشکردن ویژگی label، که باعث میشه کاربر تو منوی انتخاب زیرنویس، نتونه بفهمه هر گزینه مربوط به کدوم زبانه.
- ننوشتن هیچ track ای برای ویدیوهایی که گفتار مهمی دارن، که این محتوا رو برای کاربران ناشنوا کاملاً غیرقابلدسترس میکنه.
بهترین روشها
- برای هر ویدیویی که دیالوگ یا صدای مهم داره، حتماً یه track از نوع captions اضافه کن.
- اگه مخاطبان چندزبانه داری، چند track با srclang و label متفاوت ارائه بده.
- همیشه ویژگی default رو روی مهمترین یا پرکاربردترین زبان بذار.
نکتهی سئو
محتوای متنی داخل فایلهای زیرنویس (VTT) گاهی توسط گوگل قابلفهرستبندی است و میتواند به فهم بهتر محتوای گفتاری ویدیو کمک کند، بهخصوص برای ویدیوهایی که هیچ متن توصیفی دیگری کنارشان نیست.
نکتهی دسترسیپذیری
track مهمترین ابزار HTML5 برای دسترسیپذیری محتوای ویدیویی است؛ بدون caption مناسب، کاربران ناشنوا یا کمشنوا عملاً از بخش قابلتوجهی از محتوای گفتاری و صوتی ویدیو محروم میمانند.
جمعبندی
تگ track فایلهای زیرنویس (با فرمت WebVTT) را به ویدیو متصل میکند. ویژگی kind نوع محتوا (subtitles، captions، descriptions یا chapters) را مشخص میکند، srclang زبان را تعیین میکند، label نام قابلنمایش برای کاربر است، و default مشخص میکند کدام track بهصورت پیشفرض فعال باشد.