ما هو WebVTT؟

WebVTT (تنسيق نصوص الفيديو على الويب) هو تنسيق ترجمات يعتمد على النص يُستخدم لإضافة مسارات نصية متزامنة إلى الفيديوهات. إنه التنسيق الرسمي المدعوم من HTML5 عبر عنصر <track>، مما يتيح لك إضافة:

• الترجمات (نص الكلام المترجم)
• التعليقات التوضيحية (الكلام والمؤثرات الصوتية)
• الوصف (معلومات بصرية لقارئات الشاشة)
• الفصول (نقاط يمكن التنقل إليها في الفيديو)
• البيانات الوصفية

البنية الأساسية لـ WebVTT

• يتكون ملف WebVTT من:
  • رأس اختياري header (WEBVTT).
  • بيانات وصفية metadata اختيارية (تعليقات أو كتل نمط/سكريبت).
  • الإشارات (Cues) (مقاطع نصية مع توقيت ومحتوى).

1. تنسيق الإشارة

A cue has the following structure:

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

• التوقيت: وقت البدء والنهاية بصيغة HH:MM:SS.mmm.
• الإعدادات (اختياري):
  • vertical (lr/rl للنص العمودي)
  • line (الموضع)
  • position (محاذاة أفقية)
  • size (العرض/النسبة المئوية)
  • align (بداية/وسط/نهاية)

2. محتوى الإشارة

• يمكن أن يكون نصًا عاديًا أو يحتوي على تنسيق:
  • الوسوم: <b>, <i>, <u>, <ruby>, <lang>, إلخ.
  • طوابع زمنية (<00:00:05.000>) لنص بأسلوب الكاريوكي.

3. التنسيق و CSS

• يمكن تطبيق التنسيق عبر:
  • الإشارات المضمنة (باستخدام الوسوم).
  • العناصر الزائفة في 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، تضيف نصًا يمكن فهرسته يـ:

• يحسن الاكتشاف: يمكن لجوجل فهرسة التعليقات النصية والنصوص، مما يجعل فيديوهاتك تظهر في المزيد من نتائج البحث.
• يزيد التفاعل: الفيديوهات المترجمة تبقي المستخدمين متفاعلين لفترة أطول—مما يزيد مدة الجلسة ويقلل معدل الارتداد.
• يعزز إمكانية الوصول: الترجمة النصية ضرورية للمستخدمين الصم أو ضعاف السمع، وتُفضَّل في خوارزميات ترتيب SEO.

عند ربط ملف 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)، يمكنك استخدام أي محرر نصوص أو محرر ترجمات.

الفتح في محرر نصوص

• Windows: Notepad، Notepad++، VS Code
• macOS: TextEdit، Sublime Text
• Linux: Gedit، nano، Vim

نظرًا لأن ملفات .vtt نصية عادية، يمكنك عرضها وتحريرها مثل أي ملف نصي عادي.

الفتح في محرر ترجمات

• Subtitle Edit (Windows)
• Aegisub (متعدد المنصات)
• Amara (مستند إلى الويب)

الفتح في المتصفح

1. أنشئ ملف HTML بسيط يحتوي على وسمي <video> و <track>.
2. افتح ملف HTML في المتصفح لعرض الفيديو مع الترجمات.

الخصائص الرئيسية لملفات ASS

الأسئلة الشائعة

س1: ما الفرق بين WebVTT و SRT؟
ج: WebVTT مبني على SRT لكنه يضيف ميزات حاسمة مثل تموضع النص، وسوم الصوت، تنسيق CSS، ودعم البيانات الوصفية، بالإضافة إلى التكامل الأصلي مع فيديو HTML5.

س2: كيف أضيف ترجمات WebVTT إلى يوتيوب؟
ج: حمّل ملف .vtt الخاص بك عند إضافة الترجمات إلى الفيديو، أو استخدم الترجمات التلقائية ليوتيوب وحمّل ملف WebVTT الناتج للتعديل.

س3: هل يمكن لملفات WebVTT تضمين صور؟
ج: مواصفة WebVTT لا تدعم تضمين الصور مباشرة، لكن يمكنك استخدام إشارات بيانات وصفية تحتوي على عناوين URL وتنفيذ عرض الصور عبر جافاسكريبت مخصص.

س4: لماذا لا تُطبق أنماط WebVTT الخاصة بي؟
ج: تأكد من أن كتل STYLE تظهر قبل أول إشارة، ولا تحتوي على أسطر فارغة، وأنك تستخدم العنصر الزائف ::cue بشكل صحيح. كما يجب التحقق من توافق المتصفح.

س5: هل تعمل ملفات WebVTT مع بروتوكولات البث مثل HLS؟
ج: نعم، يدعم HLS (HTTP Live Streaming) ملفات WebVTT المجزأة لتوفير ترجمات فعّالة جنبًا إلى جنب مع محتوى الفيديو.

المراجع

• WebVTT: تنسيق نصوص الفيديو على الويب