تگ track در html

از تگ track اغلب برای نمایش زیرنویس یا ترجمه یا راهنمای یک ویدیو یا فایل صوتی استفاده می‌شود. تگ <track> در واقع زیرمجموعه تگ‌های <audio> و <video> است.

نحوه استفاده از تگ <track>

محتوای متنی که درون تگ track قرار می‌گیرد، معمولا شامل زیرنویس‌های ویدیویی یا صوتی و یا متن ترجمه شده ویدیو است.

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

attribute یا ویژگی‌های قابل استفاده در تگ‌های <track>

تگ track می‌تواند دارای چندین ویژگی یا attribute باشد که برخی از این ویژگی‌های ضروری و برخی دیگر اختیاری هستند.

src

ویژگی src از ویژگی‌های ضروری این تگ است آدرس فایل متنی ( فایل .vtt ) درون این ویژگی قرار می‌گیرد.

 <video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video> 

srclang

ویژگی srclang زبان فایل‌های متنی audio یا video را مشخص می کند. به همراه این ویژگی استفاده از ویژگی kind="subtitles" نیز ضروری است.

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>    

kind

ویژگی kind نوع متن را مشخص می کند و شامل چند مقدار مشخص است:

  • captions: برای تعریف ترجمه دیالوگ و جلوه های صوتی
  • chapters: برای تعریف عناوین فصل (مناسب برای پیمایش در رسانه)
  • descriptions: تعریف یک توضیح متنی از محتوای ویدیویی (مناسب برای کاربران ناشنوا)
  • metadata: تعریف محتوای مورد استفاده توسط اسکریپت (برای کاربر قابل مشاهده نیست)
  • subtitles: تعریف زیرنویس‌ در یک ویدیو
<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>    

label

ویژگی label عنوان ویدیو یا فایل صورتی را مشخص می‌کند و مرورگر هنگام فهرست کردن رسانه‌های موجود از آن استفاده می‌کند.

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video> 

default

ویژگی default مشخص می‌کند که اگر تنظیمات انتخابی کاربر قابل نمایش نیست از تگی که دارای ویژگی default است، استفاده می‌شود توجه داشته باشید که فقط باید یک تگ <track> با ویژگی default در هر رسانه وجود داشته باشد.

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video> 

Global Attributes

تگ <track> از Global Attributes در HTML پشتیبانی می کند.

Event Attributes

تگ <track> از Event Attributes in HTML در HTML پشتیبانی می کند.

ویژگی‌های ظاهری پیشفرض در تگ <track>

اکثر مرورگرها تگ <track> را با مقادیر پیش فرض زیر نمایش می دهند:

track{
  display: none;
}

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس