9
تشکر

آشنایی با عنصر track در تگ video

اچ تی ام ال 5 - HTML5

اچ تی ام ال 5 – HTML5

ویژگی بسیار مناسبی که به HTML5 اضافه شده است، پشتیبانی از نمایش و پخش ویدئو و صوت به صورت پیشفرض و بدون هیچ پلاگینی است که توسط تگ های video و audio امکان‌ پذیر است. در مورد نحوه استفاده از این عناصر در مطلبی با عنوان شروعی بر ویدئو در HTML5 قبلاً مورد بحث قرار دادیم.

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

توسط این تگ میتوانیم استایل مناسب را نیز به زیرنویس ها بدهیم.

در ادامه مطلب همراه ما باشید…

فایل زیرنویس

در ابتدا بهتر است آشنایی مختصری با فایلی که میخواهیم به عنوان زیرنویس بسازیم یا ویرایش کنیم، آشنا شویم. فرمت این فایل‌ها مانند فایلهای srt است اما پسوند آن باید vtt و در اولین خط آن عبارت WEBVTT FILE باشد. در زیر یک نمونه ساده را مشاهده میکنید.

WEBVTT FILE

1
00:00:05.142 --> 00:00:08.501
This is a first subtitle

Second Subtitle
00:00:08.900 --> 00:00:14.305 
زیرنویس دوم از ثانیه 8 تا 14 نمایش داده میشود

3
00:10:38.000 --> 00:10:50.305 
مکان خیلی زیبایست

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

در خط آخر میتوانیم برای متن ها کلاس‌های متفاوتی را تعیین کنیم و برای آن‌ها استایل مناسب را بنویسیم که در ادامه به آن اشاره میکنیم.

استفاده از تگ track

برای فراخوانی زیرنویس درون ویدئو، باید تگ track را داخل تگ video مورد نظر بنویسیم. در کد زیر ما یک ویدئو با دو فرمت mp4 و webm و دو زیرنویس یکی با زبان انگلیسی و دیگری با زبان فارسی فراخوانی کردیم.

<video controls>
  <source src="Fifa world cup 2014.mp4" type="video/mp4">
  <source src="Fifa world cup 2014 .webm" type="video/webm">
  <track srclang='en' kind='subtitles' label='English' src='subtitle-en.vtt'>
  <track srclang='fa' kind='subtitles' label='Persian' src='subtitle-fa.vtt' default>
</video>

همانطور که میبینید تگ track دارای پنج خصوصیت است.

توسط خاصیت label میتوانیم یک توضیح برای زیرنویس تعیین کنیم. خاصیت src آدرس فایل زیرنویس را میگیرد و توسط خاصیت default میتوانم زیرنویس پیشفرض را انتخاب کنیم.

خاصیت kindنوع زیرنویس را مشخص میکند که 5 مقدار متفاوت میتواند بگیرد.

  • مقدار subtitles که عموما ترجمه دیالوگ های گفته شده در ویدئو است.
  • مقدار captions که میتواند برای نمایش نام های مورد نظر در ویدئو مورد استفاده قرار گیرد.
  • مقدار descriptions که میتواند حاوی توضیحاتی باشد.
  • مقدار metadata که میتواند حاوی اطلاعاتی فنی در مورد ویدئو باشد که به صورت معمول نمایش داده نمیشود.
  • و مقدار chapters که زمانی نمایش داده می‌شود که کاربر در حال جلو یا عقب بردن ویدئو است.

خاصیت آخر این تگ srclang است که زبان زیرنویس را مشخص میکند، لیست تمام زبان‌ها را میتوانید در اینجا مشاهده کنید. در صورتی که مقدار خاصیت kind برابر subtitles باشد، استفاده از این خاصیت ضروری است.

خب در عکس زیر مشاهده میکنید که ما یک زیرنویس به ویدئو اضافه کردیم. همچنین مشاهده میکنید که یک دکمه جدید (CC) به کنترل ها اضافه شده است که میتوانید با استفاده از آن زیرنویس را مشاهده یا مخفی کنید.

Subtitle for HTML5 Video

Subtitle for HTML5 Video

توجه کنید اگر چندین زیرنویس برای یک ویدئو در نظر بگیرید فعلاً مرورگر کروم تا نسخه 35 امکان انتخاب زیرنویس را به کاربر نمیدهد و خودش یک زیرنویس را لود میکند ولی این امکان در مروگر IE نسخه 10 به بالا امکان‌پذیر است. همچنین فایرفاکس از نسخه 31 به بعد از تگ track پشتیبانی میکند. اطلاعات بیشتر

نحوه استایل دادن به زیرنویس

به صورت پیشفرض تگهای b, i, u قابل استفاده درون متن های زیر نویس هستند.

همانطور که قبلاً اشاره کردیم، شما میتوانید با استفاده از ID هر زیرنویس، به آن استایل بدهید. استایل دادن به زیرنویس ها توسط شبه عنصر cue:: انجام میشود.

WEBVTT

1
00:00.000 --> 00:02.000
That's an, an, that's an L!

transcript credit
00:04.000 --> 00:05.000
Transcribed by Celestials™
::cue(#\1) { color: green; }
::cue(#transcript\ credit) { color: red; }

توسط تگ c میتوانید کلاس درون متن ها تعریف کنید و با استفاده از کلاسها به متن هایتان استایل مناسب بدهید.

همچنین با استفاده از تگ v که مخفف voice است میتوانید مشخص کنید که چه کسی در حال حاضر صحبت میکند و میتوانید به این صورت نیز استایل مناسب را بدهید.

WEBVTT

00:00.000 --> 00:02.000
<v.first.loud Esme>It's a blue apple tree!

00:02.000 --> 00:04.000
<v Mary>No way!

00:04.000 --> 00:06.000
<v Esme>Hee!</v> <i>laughter</i>

00:06.000 --> 00:08.000
<v.loud Mary>That's <c.loud>awesome!</c>
::cue(v[voice="Esme"]) { color: blue }
::cue(v[voice="Mary"]) { color: green }
::cue(i) { font-style: italic }
::cue(.loud) { font-size: 2em }

لینک های مفید

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

WebVTT: The Web Video Text Tracks Format (لینک مرجع)

Video Subtitling and WebVTT

An Introduction to WebVTT and track

A Comprehensive Look at HTML5′s track Element

  • مانی می‌گه:

    چقدر خفن!

  • علی می‌گه:

    عالیه عالی!

  • فرشاد می‌گه:

    دمت گرم داداش عالی بود

  • علی می‌گه:

    خیلی هم عالی
    مطلب خوبی بود


  • نظرات این مطلب بسته است.