تسهيل استخدام الوسائط

Derek Herman
Derek Herman
Joe Medley
Joe Medley

تاريخ النشر: 20 آب (أغسطس) 2020

إنّ الترجمة والشرح وأوصاف قارئ الشاشة هي الطريقة الوحيدة التي يمكن للعديد من المستخدمين من خلالها الاستمتاع بفيديوهاتك، وهي مطلوبة بموجب قانون أو لائحة تنظيمية في بعض المناطق القضائية. يُستخدَم تنسيق WebVTT (Web Video Text Tracks) لوصف data النص المرتبط بالوقت، مثل مقاطع الترجمة والشرح، وذلك لتسهيل استخدام فيديوهاتك.

لإضافة ترجمة أو أوصاف لقارئ الشاشة إلى فيديو على الويب، أضِف علامة <track> داخل علامة <video>. بالإضافة إلى مقاطع الترجمة والشرح وأوصاف قارئ الشاشة، يمكن استخدام علامات <track> أيضًا للترجمة والشرح وعناوين الفصول.

لقطة شاشة تعرض مقاطع الترجمة والشرح المعروضة باستخدام عنصر المسار في Chrome على Android

تشبه العلامة <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: غير مرئي ويمكن استخدامه بواسطة النصوص البرمجية.

بعد أن تعرّفت على أساسيات إتاحة الفيديو وسهوله الوصول إليه على صفحة الويب، قد تتساءل عن حالات الاستخدام الأكثر تعقيدًا. تعرَّف على إطارات عمل الوسائط وكيفية مساعدتها في إضافة الفيديوهات إلى صفحتك على الويب، مع توفير ميزات متقدّمة.