WebVTT چیست؟

WebVTT (قالب مسیرهای متنی ویدئوی وب) یک قالب زیرنویس مبتنی بر متن است که برای افزودن مسیرهای متن زمان‌بندی شده به ویدئوها استفاده می‌شود. این قالب رسمی است که توسط HTML5 از طریق عنصر <track> پشتیبانی می‌شود و به شما امکان می‌دهد تا موارد زیر را اضافه کنید:

• زیرنویس‌ها (گفتار ترجمه‌شده)
• کپشن‌ها (گفتار و افکت‌های صوتی)
• توضیحات (اطلاعات بصری برای خواننده‌های صفحه)
• فصل‌ها (نقاط قابل ناوبری در ویدئو)
• متادیتا

ساختار پایه WebVTT

• یک فایل WebVTT شامل:
  • یک سرآغاز اختیاری (WEBVTT).
  • متادیتای اختیاری (نظرات یا بلوک‌های style/script).
  • Cueها (بخش‌های متنی با زمان‌بندی و محتوا).

1. فرمت Cue

یک cue ساختار زیر را دارد:

[HH:]MM:SS.mmm --> [HH:]MM:SS.mmm [cue settings]
Text payload...

• زمان‌بندی: زمان شروع و پایان به فرمت HH:MM:SS.mmm.
• تنظیمات (اختیاری):
  • vertical (lr/rl برای متن عمودی)
  • line (موقعیت‌یابی)
  • position (تراز افقی)
  • size (عرض/درصد)
  • align (شروع/میانه/پایان)

2. محتوای Cue

می‌تواند متن ساده یا شامل نشانه‌گذاری باشد:

• برچسب‌ها: <b>، <i>، <u>، <ruby>، <lang> و غیره.
• مهرهای زمانی (<00:00:05.000>) برای متن به سبک کارائوکه.

3. استایل‌دهی و CSS

استایل می‌تواند از طریق موارد زیر اعمال شود:

• Cueهای درون‌خطی (با استفاده از برچسب‌ها).
• عناصر شبه‌CSS (::cue، ::cue-region) در HTML.

4. مسیرهای متادیتا

WebVTT می‌تواند متادیتا (JSON و غیره) برای برنامه‌های تعاملی حمل کند.

5. رمزگذاری فایل

باید به صورت UTF-8 رمزگذاری شود. خطوط با \r\n، \n یا \r پایان می‌یابند.

6. قوانین پردازش

پارسرها باید فایل‌های خراب را به‌صورت ملایم مدیریت کنند. BOM (علامت ترتیب بایت) اختیاری است.

7. ادغام با HTML5

با عنصر <track> استفاده می‌شود:

<video>
  <track src="subtitles.vtt" kind="subtitles" srclang="en" default>
</video>

• kind می‌تواند subtitles، captions، descriptions، chapters یا metadata باشد.

8. پشتیبانی مرورگرها

در مرورگرهای مدرن به‌طور گسترده‌ای پشتیبانی می‌شود (Chrome، Firefox، Safari، Edge).

9. موارد استفاده

• زیرنویس‌ها/کپشن‌ها برای دسترس‌پذیری.
• متن‌های کارائوکه با متن زمان‌بندی شده.
• ناوبری فصل‌ها در ویدئوها.
• متادیتا برای برنامه‌های ویدئویی تعاملی.

مثال یک فایل WebVTT:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to our tutorial on WebVTT.

00:00:04.000 --> 00:00:08.000
In this video, you'll learn how to add subtitles to your HTML5 videos.

موتورهای جستجو نمی‌توانند «ویدئوی شما را ببینند»—اما می‌توانند محتوای متنی را بخوانند. با استفاده از فایل‌های WebVTT، متن قابل ایندکس اضافه می‌کنید که:

• بهبود قابلیت کشف: گوگل می‌تواند کپشن‌ها و رونوشت‌ها را ایندکس کند و ویدئوهای شما را در نتایج جستجو بیشتری نشان دهد.
• افزایش تعامل: ویدئوهای زیرنویس‌دار کاربران را مدت زمان بیشتری درگیر می‌کند—مدت زمان جلسه را افزایش داده و نرخ پرش را کاهش می‌دهد.
• بهبود دسترس‌پذیری: کپشن‌گذاری برای کاربرانی که ناشنوا یا کم‌شنوا هستند ضروری است و در الگوریتم‌های رتبه‌بندی سئو نیز مورد توجه است.

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

چگونه WebVTT را به یک ویدئوی HTML5 اضافه کنیم

می‌توانید یک فایل WebVTT را در ویدئوی خود با استفاده از عنصر <track> گنجانید:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

• src: مسیر به فایل .vtt شما
• kind: نوع مسیر متنی (subtitles، captions، chapters و غیره)
• srclang: کد زبان (مثلاً en، es)
• label: برچسب مسیر که در پخش‌کننده نمایش داده می‌شود

مقایسه WebVTT و SRT: چه تفاوتی دارد؟

ابزارهای ایجاد و ویرایش فایل‌های WebVTT

می‌توانید فایل‌های .vtt را با استفاده از موارد زیر ایجاد یا ویرایش کنید:

• ویرایشگرهای متن: VS Code، Sublime Text
• ویرایشگرهای زیرنویس: Subtitle Edit، Amara، Aegisub
• مبدل‌ها: از ابزارها برای تبدیل SRT به VTT و بالعکس استفاده کنید

چگونه فایل WebVTT را باز کنیم؟

برای باز کردن یک فایل WebVTT (.vtt)، می‌توانید از هر ویرایشگر متن یا ویرایشگر زیرنویس استفاده کنید.

باز کردن در یک ویرایشگر متن

• ویندوز: Notepad، Notepad++، VS Code
• macOS: TextEdit، Sublime Text
• لینوکس: Gedit، nano، Vim

از آنجا که فایل‌های .vtt متن ساده هستند، می‌توانید آنها را مانند هر فایل متنی عادی مشاهده و ویرایش کنید.

باز کردن در یک ویرایشگر زیرنویس

• Subtitle Edit (ویندوز)
• Aegisub (چندپلتفرمی)
• Amara (وب‌محور)

باز کردن در مرورگر

1. یک فایل HTML ساده با تگ‌های <video> و <track> ایجاد کنید.
2. فایل HTML را در مرورگر باز کنید تا ویدئو با زیرنویس‌ها نمایش داده شود.

ویژگی‌های کلیدی فایل‌های ASS

سؤالات متداول

س1: تفاوت WebVTT و SRT چیست؟

WebVTT بر پایه SRT ساخته شده است اما ویژگی‌های مهمی مانند موقعیت‌یابی متن، برچسب‌های صوتی، استایل CSS، پشتیبانی از متادیتا و ادغام بومی با ویدئوی HTML5 را اضافه می‌کند.

س2: چگونه زیرنویس‌های WebVTT را به یوتیوب اضافه کنم؟

فایل .vtt خود را هنگام افزودن زیرنویس به ویدئوی خود در یوتیوب بارگذاری کنید، یا از کپشن‌گذاری خودکار یوتیوب استفاده کنید و فایل WebVTT تولید شده را برای ویرایش دانلود کنید.

س3: آیا فایل‌های WebVTT می‌توانند تصاویر را شامل شوند؟

مشخصات WebVTT به‌طور مستقیم از تصاویر جاسازی‌شده پشتیبانی نمی‌کند، اما می‌توانید از cueهای متادیتا با URLها استفاده کنید و رندر تصویر سفارشی را با جاوااسکریپت پیاده‌سازی کنید.

س4: چرا استایل‌های WebVTT من اعمال نمی‌شوند؟

اطمینان حاصل کنید که بلوک‌های STYLE قبل از اولین cue ظاهر می‌شوند، خطوط خالی ندارند و از عنصر شبه‌::cue به‌درستی استفاده می‌شود. همچنین سازگاری مرورگر را بررسی کنید.

س5: آیا فایل‌های WebVTT با پروتکل‌های استریمینگ مانند HLS کار می‌کنند؟

بله، HLS (پخش زنده HTTP) از WebVTT تقسیم‌شده برای استریم کارآمد کپشن‌ها همراه با محتوای ویدئویی پشتیبانی می‌کند.

مراجع

• WebVTT: قالب مسیرهای متنی ویدئوی وب