سنتعرف في هذه المقالة على تنسيق WebVTT (المسارات النصية لفيديوهات الويب)، تستخدم لوصف بيانات النص المؤقت مثل الترجمة النصية أو الترجمات لتسهيل وصول الجمهور إلى الفيديوهات
سهولة الوصول لا تشبه تناول الكعك على الكعك. إنه لا شيء تضعه على الإطلاق قائمة المهام على أمل تقديمها لاحقًا. الشرح وقارئ الشاشة الأوصاف هي الوسيلة الوحيدة التي يمكن للعديد من المستخدمين من خلالها تجربة مقاطع الفيديو، وفي بعض نطاقات السلطة، حيث تكون مطلوبة بموجب القانون أو اللوائح.
إضافة علامات <track>
لإضافة شرح أو أوصاف من قارئ الشاشة إلى فيديو على الويب، أضِف <track>
داخل علامة <video>. بالإضافة إلى الشرح وقارئ الشاشة
والأوصاف، وقد يتم استخدام علامات <track> أيضًا لعناوين الترجمة والشرح.
ويمكن أن تساعد العلامة <track> أيضًا محرّكات البحث في فهم محتوى الفيديو.
ومع ذلك، فإن هذه الإمكانات لا تندرج ضمن نطاق هذه المقالة.
تشبه العلامة <track> العنصر <source> حيث يحتوي كلاهما على src
التي تشير إلى المحتوى المشار إليه. بالنسبة إلى علامة <track>، توجّه إلى
ملف WebVTT. تحدد السمة label كيفية تطبيق مسار معين
المحددة في الواجهة.
لتوفير مقاطع صوتية للغات متعددة، أضِف علامة <track> منفصلة لكل منها
ملف WebVTT الذي تقدّمه ويشير إلى اللغة باستخدام srclang
.
في ما يلي مثال على علامة <video> تتضمّن علامتَين <track>. ويضمّ الفندق أيضًا
يمكنك الاطّلاع على عيّنة من خلال أداة Glitch (المصدر).
إضافة عنصر <track> كعنصر ثانوي للعنصر <video>:
<video controls>
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
<source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
<track src="chrome-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
<track src="chrome-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
<p>This browser does not support the video element.</p>
</video>
بنية ملف WebVTT
في ما يلي ملف WebVTT افتراضي للعرض التوضيحي المرتبط أعلاه. الملف عبارة عن ملف نصي يحتوي على سلسلة من الإشارات. كل إشارة هي قطعة من النص لعرضها على الشاشة ونطاق الوقت الذي سيتم عرضه خلاله.
WEBVTT
00:00.000 --> 00:04.999
Man sitting on a tree branch, using a laptop.
00:05.000 --> 00:08.000
The branch breaks, and he starts to fall.
...
يُطلق على كل عنصر داخل ملف المسار تلميح. كل إشارة لها وقت بدء
وقت الانتهاء مفصولاً بسهم، مع نص إشارة في السطر أدناه. الإشارات يمكن أن
لديك اختياريًا أيضًا أرقام تعريف مثل railroad وmanuscript في المثال أدناه.
يتم فصل الإشارات بسطر فارغ.
WEBVTT
railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth
manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.
تكون أوقات عرض الإعلانات بتنسيق hours:minutes:seconds.milliseconds. عملية التحليل صارمة.
بمعنى أنه يجب ترك مساحة فارغة على الأرقام إذا لزم الأمر: الساعات والدقائق والثواني
أن يحتوي على رقمين (00 لقيمة صفرية) وأن يحتوي المللي ثانية على ثلاثة
الأرقام (000 لقيمة صفرية). يوجد مدقق WebVTT ممتاز في
مدقق WebVTT المباشر الذي يتحقّق من الأخطاء في تنسيق الوقت
المشكلات مثل الأوقات غير المتسلسلة.
يمكنك إنشاء ملف VTT يدويًا، مع الأخذ في الاعتبار أنّ هناك العديد من الخدمات التي تقوم بإنشائها لك.
كما ترى في الأمثلة السابقة، فإن تنسيق WebVTT بسيط للغاية. ما عليك سوى إضافة بياناتك النصية مع التوقيتات.
مع ذلك، ماذا لو أردت عرض الترجمة في موضع مختلف مع
محاذاة إلى اليسار أم اليمين؟ يمكن أن تتم محاذاة الترجمة مع المتحدّث الحالي
موضعه، أو أن يبتعد عن النص أمام الكاميرا. تحدد WebVTT الإعدادات للقيام بذلك،
وأكثر من ذلك، مباشرة داخل
ملف .vtt. لاحظ كيفية تحديد موضع التسمية التوضيحية بإضافة
الإعدادات بعد تعريفات الفاصل الزمني.
WEBVTT
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
The first line of the subtitles.
ميزة أخرى مفيدة هي القدرة على تصميم الإشارات باستخدام CSS. ربما تريد
استخدام تدرج خطي رمادي كخلفية، مع لون المقدمة
papayawhip لكل نصوص الشرح وجميع النصوص ذات اللون الغامق peachpuff
video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
video::cue(b) {
color: peachpuff;
}
للاطّلاع على مزيد من المعلومات حول كيفية وضع علامات على منتجات فردية فإن مواصفات WebVTT تعد مصدرًا جيدًا للأمثلة المتقدمة.
أنواع المقاطع الصوتية النصية
هل لاحظت السمة kind للعنصر <track>؟ يتم استخدامها
للإشارة إلى علاقة مسار النص المحدد بالفيديو. تشير رسالة الأشكال البيانية
القيم المحتملة للسمة kind هي:
captions: للترجمة والشرح من النصوص وربما الترجمات من أي محتوى صوتي مناسب لضعاف السمع وفي الحالات التي يكون فيها الفيديو يتم تشغيلها مع كتم الصوت.subtitles: بالنسبة إلى الترجمات، وهي ترجمات للكلام والنص في لغة مختلفة عن اللغة الرئيسية للفيديو.descriptions: للحصول على أوصاف للأجزاء المرئية من محتوى الفيديو. مناسب لضعاف البصر.chapters: للعرض عندما يتنقل المستخدم في الفيديو القادم.metadata: غير مرئي ويمكن استخدامه بواسطة النصوص البرمجية.
الآن بعد أن فهمت أساسيات إتاحة فيديو والوصول إليه. في صفحتك على الويب، قد تتساءل عن حالات الاستخدام الأكثر تعقيدًا. بعد ذلك، ننصحك بالاستعانة بأُطر عمل الوسائط وكيف يمكنها مساعدتك في فيديوهات إلى صفحة الويب الخاصة بك مع توفير ميزات متقدمة.