تاريخ النشر: 20 آب (أغسطس) 2020
إنّ الترجمة والشرح وأوصاف قارئ الشاشة هي الطريقة الوحيدة التي يمكن للعديد من المستخدمين من خلالها الاستمتاع بفيديوهاتك، وهي مطلوبة بموجب قانون أو لائحة تنظيمية في بعض المناطق القضائية. يتم استخدام تنسيق WebVTT (المسارات النصية للفيديوهات على الويب) لوصف بيانات نصية مؤقتة، مثل مقاطع الترجمة والشرح، لتعزيز أداء الفيديوهات إليه على الفور.
إضافة علامات <track>
لإضافة ترجمة أو أوصاف لقارئ الشاشة إلى فيديو على الويب، أضِف علامة <track>
داخل علامة <video>. بالإضافة إلى الشرح وقارئ الشاشة
والأوصاف، ويمكن استخدام علامات <track> أيضًا لعناوين الترجمة والشرح.
تتشابه العلامة <track> مع العنصر <source> في أنّ كلاهما يتضمّن سمة src
تشير إلى المحتوى المُشار إليه. بالنسبة إلى علامة <track>، تشير إلى
ملف WebVTT.
تحدد السمة label طريقة التعامل مع مسار معين
المحددة في الواجهة.
لتوفير مقاطع صوتية بلغات متعدّدة، أضِف علامة <track> منفصلة لكل ملف
WebVTT تقدّمه، وأشِر إلى اللغة باستخدام السمة srclang
.
ألقِ نظرة على مثال علامة <video> مع علامتَي <track>.
أضِف عنصر <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>
هناك أيضًا عينة يمكنك عرض على Glitch.
بنية ملف 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 بسيط للغاية. ما عليك سوى إضافة بيانات النص مع التوقيت.
ماذا لو أردت عرض الترجمة والشرح في موضع مختلف مع ALIGNED LEFT أو ALIGNED RIGHT؟ ربما لضبط الترجمة والشرح مع اتجاه المتحدّث الحالي
أو لإبعادها عن النص المعروض على الشاشة. تحدد 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: غير مرئي ويمكن استخدامه بواسطة النصوص البرمجية.
بعد أن تعرّفت على أساسيات إتاحة الفيديو وسهوله الوصول إليه على صفحة الويب، قد تتساءل عن حالات الاستخدام الأكثر تعقيدًا. معلومات عن أُطر عمل الوسائط وكيف يمكنها مساعدتك في إضافة فيديوهات إلى صفحتك على الويب مع توفير ميزات متقدّمة.