توليد عنصر track في HTML
أو ألصق نص الترجمة
الخيارات
Subtitles لمن يسمعون الصوت ويحتاجون الكلمات — ترجمة، أو اللغة نفسها مكتوبة. وCaptions لمن لا يسمعونه، فتحمل أيضا ما يقوله الصوت للجميع: الموسيقى والباب ورنين الهاتف. والملف نفسه يخدم الغرضين، ولهذا تسأل الصفحة بدل أن تخمن، ولا يمكن تغيير القيمة لاحقا من داخل العنصر. ولا تعرض الأوصاف والفصول والبيانات الوصفية: لا شيء منها يمكن ملؤه بمحتويات ملف ترجمة.
وسم لغة قصير مثل en أو en-GB أو pt-BR، يسمي لغة الكلمات في الترجمة لا لغة الفيديو. والمسار الذي يسمي نفسه subtitles يجب أن يسمي لغة، فإفراغ هذا الصندوق يرتد إلى en بدل إسقاط السمة — ولأن كل سمة تطبع في الناتج، ترى الارتداد قبل أن تلصق شيئا.
نص حر: English أو English (SDH) أو Français. وهو السطر الذي يختاره المشاهد حين تعرض الصفحة أكثر من مسار، فاكتبه كما يعرفه جمهورك. وإفراغ الصندوق يزيل السمة كلها بدل كتابة سمة فارغة، فيعاد التسمية إلى اللاعب؛ والتسمية الفارغة تضع صفا بلا اسم في تلك القائمة.
مشغلا تظهر الترجمة ما إن يبدأ الفيديو. ولا يجوز لعنصر وسائط أن يحمل أكثر من مسار افتراضي، فاتركه مغلقا حين تحمل الصفحة مسارا افتراضيا: مسار ثان يدعي أنه الافتراضي يجعل اللاعبين يختارون الخطأ، وكونه غير افتراضي يعني فقط أن المشاهد يشغله بنفسه.
معدل الإطارات الذي تحسب به التوقيتات. في صفحات الصيغ هو ما يحتاجه MicroDVD، لأنه يخزن التوقيت أرقام إطارات. وفي صفحات معدل الإطارات هو المعدل الذي وقت به الملف — النسخة التي صنعت لها الترجمة — ويأخذ الصندوق الثاني في الصفحة معدل الفيديو الذي ستستخدمها معه. والشائعة 23.976 و24 و25 و29.97 و30 و50 و59.94 و60. والخطأ فيه يزحزح الخط الزمني كله، وفي صفحات معدل الإطارات يزحزحه بنسبة لا بمقدار ثابت.
تضع هذه الصفحة ترجمتك داخل عنصر HTML واحد يمكنك لصقه في صفحة. والناتج سطر `<track>` واحد، وفيه WebVTT مضمنة داخل السمة `src`، فيسافر نص الترجمة مع الوسم نفسه: لا ملف ثان ترفعه، ولا مسار يجب أن يكون صحيحا، ولا طريقة يجد بها المشغل نفسه يبحث عن شيء غير موجود.
هذا التضمين هو مقصد الصفحة، وسببه طريقة تعامل المتصفحات مع الملفات المحلية. الملف المرتبط بوسم track يجلب لا يرسم، والمتصفح يرفض ذلك الجلب حين تكون الصفحة نفسها مفتوحة من القرص، فسطر `<track src="film.vtt">` في صفحة حفظتها على سطح مكتبك لا يعرض شيئا إطلاقا: لا خطأ على الشاشة، وقائمة ترجمة فارغة، وسطر واحد في وحدة التحكم لا يفتحها معظم الناس. أما `data:` URI فلا يجلب أبدا، لأن النص موجود في السمة نفسها، فيعمل هناك. والكلفة حجم، فكل مسافة وكل فاصل سطر في WebVTT يصيران ثلاثة أحرف، والكلفة تستحق الدفع هنا: العنصر موجود ليعمل من تلقاء نفسه.
تأتي السمات من مربعات اللوحة، لأنه لا يمكن قراءة أي منها من ملفك. النوع هو الأهم: الترجمة النصية موجهة إلى مشاهدين لا يستطيعون متابعة الصوت، والتسمية التوضيحية هي النسخة الأكمل التي تحمل أيضا الموسيقى والمؤثرات الصوتية لمن لا يسمع. وملف مليء بعبارة `[door slams]` والعلامات الموسيقية قد يكون أيا من النوعين، وأنت وحدك تعرف الجمهور الذي كتب له — فالصفحة تسأل بدل أن تخمن. والسمات الثلاث الأخرى هي لغة النص، والاسم الظاهر في قائمة الترجمة بالمشغل، وهل يفتح الملف من تلقاء نفسه.
اثنتان من تلك المربعات تتصرفان تصرفا مختلفا عند إفراغهما، والفرق يستحق المعرفة. إفراغ اسم القائمة يزيل السمة كلها، لأن الاسم اختياري وتركه يعطي الاختيار للمشغل. وإفراغ مربع اللغة لا يفعل ذلك: ملف يعلن نفسه ترجمة نصية يجب أن يسمي لغة، فالمربع الفارغ يرجع إلى `en` بدل إنتاج عنصر ينقصه شيء يجب أن يكون فيه. ولا واحد من التصرفين استبدال صامت — الناتج يطبع كل سمة، فترى ما أنتجته مربعاتك.
نص الترجمة داخل العنصر يكتبه كاتب WebVTT نفسه الذي تستخدمه صفحات التحويل، أي أن ملفا وصل بوصفه WebVTT يحتفظ بكل ما حمله خارج مقاطعه: النص على سطر `WEBVTT`، وكتل التعليق والأنماط، وإعدادات المقطع التي تحدد موضع السطر على الشاشة. لا يتغير شيء في ملفك، ولا يرفع شيء؛ الكلمات والأوقات والتنسيق تخرج في الحال التي وصلت به.
أمثلة
ملف SRT بالمربعات الافتراضية
الإدخال
1
00:00:01,000 --> 00:00:03,000
The room is dark.
2
00:00:04,000 --> 00:00:06,000
Nobody came.
الناتج
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en" label="English" default>
سطر واحد يخرج، والملف كله داخله: %0A فاصل سطر و%20 مسافة، فتركب WebVTT في سمة src بدل أن تجلس في ملف بجانب الصفحة. والسمات الأربع هي المربعات الأربعة — لغة النص، والسطر الذي يختاره المشاهد في قائمة الترجمة، و default، وهو ما يجعل هذا الملف يفتح من تلقاء نفسه. وأرقام المقاطع من SRT محفوظة كمعرفات مقاطع.
ملف WebVTT يدخل WebVTT نفسه
الإدخال
WEBVTT - exported from the editing room
NOTE The first pass was done by hand.
STYLE
::cue { color: #f2f2f2; }
intro
00:00:01.000 --> 00:00:03.000 align:start position:10%
The room is dark.
2
00:00:04.000 --> 00:00:06.000
Nobody came.
الناتج
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%20-%20exported%20from%20the%20editing%20room%0A%0ANOTE%20The%20first%20pass%20was%20done%20by%20hand.%0A%0ASTYLE%0A%3A%3Acue%20%7B%20color%3A%20%23f2f2f2%3B%20%7D%0A%0Aintro%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%20align%3Astart%20position%3A10%25%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0ANobody%20came.%0A" srclang="en-GB" label="English (UK)" default>
كل ما يحمله ملف WebVTT خارج مقاطعه يبقى: الملاحظة على سطر WEBVTT، وكتلة NOTE، وكتلة STYLE التي تحدد شكل الترجمة في المشغل، وسطر اسم المقطع، والإعداد align:start position:10% (و%25 فيه علامة نسبة مئوية مرمزة لأن علامة النسبة العارية غير مسموح بها داخل URI). ملف وصل WebVTT يخرج WebVTT نفسه. والمربعان يقولان en-GB و English (UK)، لأن هذه النسخة صنعت لجمهور بريطاني — ولا شيء في الملف قال ذلك.
ترجمة لمن لا يسمع
الإدخال
1
00:00:01,000 --> 00:00:03,000
[door slams]
The room is dark.
2
00:00:04,000 --> 00:00:06,000
♪ Nobody came ♪
الناتج
<track kind="captions" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0A%5Bdoor%20slams%5D%0AThe%20room%20is%20dark.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0A%E2%99%AA%20Nobody%20came%20%E2%99%AA%0A" srclang="en" label="Tom & "the boss"" default>
الملف مليء بمؤثرات صوتية وموسيقى، وهذا بالضبط ما يخدمه النوع captions — الترجمة لمن لا يسمع — والمربع هو المكان الوحيد الذي يمكن أن يقال فيه ذلك. وبشكل منفصل، كتب اسم القائمة Tom & "the boss" فيخرج Tom & "the boss": علامة اقتباس غير مرمزة كانت ستغلق السمة هناك وتحول بقية الاسم إلى سمات مشوشة على العنصر.
ثلاثة مربعات أفرغت أو أطفئت
الإدخال
1
00:00:01,000 --> 00:00:03,000
A cold night,
and no heating.
2
00:00:04,000 --> 00:00:06,000
Every night this week?
الناتج
<track kind="subtitles" src="data:text/vtt;charset=utf-8,WEBVTT%0A%0A1%0A00%3A00%3A01.000%20--%3E%2000%3A00%3A03.000%0AA%20cold%20night%2C%0Aand%20no%20heating.%0A%0A2%0A00%3A00%3A04.000%20--%3E%2000%3A00%3A06.000%0AEvery%20night%20this%20week%3F%0A" srclang="en">
ثلاثة مربعات تغيرت، وثلاث نتائج مختلفة، لأن HTML يطلب أشياء مختلفة. اسم القائمة اختفى من العنصر كله — هو اختياري وتركه يعطي القرار للمشغل. ومربع اللغة فارغ ومع ذلك ينتج srclang="en": ملف يعلن نفسه ترجمة نصية يجب أن يسمي لغة، فلا وجود للغة فارغة، والرجوع ظاهر في الناتج. ومفتاح default مطفأ وسمته مختفية أيضا، فهذا الملف لن يفتح من تلقاء نفسه، وهو الاتجاه الآمن حين تحمل الصفحة أكثر من ملف.
الأسئلة الشائعة
هل أحتاج ملف .vtt بجانب صفحتي بعد توليد عنصر track؟
لا، وهذا مقصد الصفحة. يكتب WebVTT داخل السمة src على هيئة data URI، فيحمل العنصر ترجمته معه. يمكنك لصقه في صفحة أو إرسال الملف بالبريد أو نقله إلى مجلد آخر وتبقى الترجمة ظاهرة. والشيء الوحيد الذي يجب الانتباه إليه أن الكل سمة واحدة: إن نسخت جزءا من ذلك السطر الطويل فقط فقد كسرت URI وسيكون الملف فارغا.
هل يعمل عنصر track إذا فتحت صفحة HTML من حاسوبي مباشرة؟
نعم، وهذه الحالة سبب تضمين الترجمة في الصفحة. حين تفتح صفحة من القرص يرفض المتصفح جلب ملف ترجمة منفصل، فسطر track يشير إلى film.vtt لا يعرض شيئا — لا خطأ ظاهرا، فقط قائمة ترجمة فارغة. أما data URI فلا يجلب أصلا، فالنص موجود في السمة مسبقا، ويعمل على سطح المكتب كما يعمل على خادم.
لماذا يكون ناتج عنصر track أطول بكثير من ملف ترجمتي؟
لأن كل حرف ليس حرفا أو رقما يصير ثلاثة أحرف في URI: المسافة %20 وفاصل السطر %0A. ملف بمئة كيلوبايت يصير بضع مئات. و Base64 كان سيكون أقصر، بزيادة نحو الثلث لا الضعف، لكن الناتج كان سيكون جدارا من أحرف غير مقروءة؛ أما كما هو فتستطيع النظر إلى سمة src وتمييز حوارك داخلها، وهذا يستحق الحجم الزائد لملف أنت على وشك لصقه في صفحة وصيانته بيدك.
لماذا اختفت سمة label بعد أن أفرغت اسم القائمة في عنصر track؟
لأن اسم القائمة اختياري في HTML، وتركه لا يعني «بلا اسم» بل يعني أن المشغل يقرر ما يعرضه في قائمة الترجمة، وهو عادة اللغة. فإفراغ المربع يزيل السمة بدل كتابة سمة فارغة، لأن label="" سيظهر سطرا خاليا في تلك القائمة. أعد الاسم متى شئت؛ هو نص عادي ولا يعتمد عليه شيء آخر في الصفحة.
ما الفرق بين النوعين subtitles و captions في عنصر track؟
الجمهور. الترجمة النصية تفترض أن المشاهد يسمع الصوت ويحتاج الكلمات مترجمة أو مكتوبة؛ والتسمية التوضيحية تفترض أنه لا يسمعه، فتحمل أيضا ما يصل إلى السامع عبر الصوت: الموسيقى والأبواب والهاتف الرنين. والملف نفسه قد يخدم الغرضين، والنص نفسه في كليهما، فلا تستطيع الصفحة أن تعرف أي نوع تقصد. ولا يمكن تغييره لاحقا داخل العنصر، فاختر ما يحتاجه جمهورك.
أي أنواع track الأخرى تركتها الصفحة خارجا؟
ثلاثة: descriptions التي تروي الصورة لمن لا يراها؛ و chapters وهي تنقل لا ترجمة ولها صفحة خاصة في هذا الموقع؛ و metadata التي لا تعرض لأحد. ولا واحد من الثلاثة يمكن ملؤه بمحتويات ملف ترجمة، فتقديمه كان سيتيح بناء عنصر لا يعرض شيئا. والنوعان المعروضان هما النوعان اللذان يخدمهما ملف الترجمة فعلا.
هل يتغير شيء في ترجمتي أثناء توليد عنصر track؟
النص والتوقيتات والتنسيق لا تتغير، وملف WebVTT يحتفظ بكتل التعليق والنمط والمنطقة وإعدادات المقاطع. الذي يتغير هو الشكل: الأسطر تعاد كتابتها بصيغة WebVTT التي يقرؤها المشغل، ففاصلة SRT في 00:00:01,000 تصير نقطة. وبايت واحد يسقط عمدا — علامة البداية التي تقول إن الملف UTF-8، لأن data URI تعلن الترميز بنفسها ولولا إسقاطها لظهرت ثلاثة أحرف شاردة في المقدمة.