تاريخ النشر: 20 آب (أغسطس) 2020
إنّ الترجمة والشرح وأوصاف قارئ الشاشة هي الطريقة الوحيدة التي يمكن للعديد من المستخدمين من خلالها الاستمتاع بفيديوهاتك، وهي مطلوبة بموجب قانون أو لائحة تنظيمية في بعض المناطق القضائية. يُستخدَم تنسيق WebVTT (Web Video Text Tracks) لوصف data النص المرتبط بالوقت، مثل مقاطع الترجمة والشرح، وذلك لتسهيل استخدام فيديوهاتك.
إضافة علامات <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 على الرابط
Live WebVTT Validator، وهي تتحقّق من الأخطاء في تنسيق الوقت، وغيرها من الصعوبات، مثل الأوقات غير التسلسلية.
يمكنك إنشاء ملف 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
: غير مرئي ويمكن استخدامه بواسطة النصوص البرمجية.
بعد أن تعرّفت على أساسيات إتاحة الفيديو وسهوله الوصول إليه على صفحة الويب، قد تتساءل عن حالات الاستخدام الأكثر تعقيدًا. تعرَّف على إطارات عمل الوسائط وكيفية مساعدتها في إضافة الفيديوهات إلى صفحتك على الويب، مع توفير ميزات متقدّمة.