كيفية استخدام وإنشاء ترجمات فيديو HTML5

يتيح لنا HTML5 تحديد ترجمات لمقاطع الفيديو باستخدام العناصر. تتيح لنا الخصائص المختلفة لهذا العنصر تحديد أشياء مثل نوع المحتوى الذي نضيفه واللغة المستخدمة وبالطبع الإشارة إلى الملف النصي الذي يحتوي على معلومات الترجمة الفعلية.

 <معرف الفيديو=عناصر التحكم في الفيديو> <مصدر src=./step.mp4 type=video/mp4> <تصنيف المسار=中文字幕kind=البيانات الوصفية لفصول الترجمة srclang=zh src=./caption.vtt الافتراضي> <تصنيف المسار=ABC kind=subtitles srclang=de src=./caption1.vtt> <track label=Number kind=subtitles srclang=es src=./caption2.vtt> </video>

• يتم تعيين قيمة ترجمات للنوع، تشير إلى نوع المحتوى الذي يحتوي عليه الملف.
• تُعطى التسمية قيمة تشير إلى اللغة التي كُتبت بها مجموعة الترجمة هذه - مثل الإنجليزية أو الألمانية - وستظهر هذه التصنيفات في واجهة المستخدم لتتيح للمستخدم تحديد اللغة التي يريد رؤية الترجمة بها بسهولة.
• يتم تعيين src في كل حالة لعنوان URL صالح يشير إلى ملف الترجمة WebVTT ذي الصلة.
• يشير srclang إلى اللغة التي يوجد بها محتوى كل ملف ترجمة.
• يتم تعيين السمة الافتراضية على العنصر الإنجليزي لتشير للمتصفح إلى أن هذا هو التعريف الافتراضي لملف الترجمة الذي سيتم استخدامه عند تشغيل الترجمة ولم يقم المستخدم بتحديد محدد.

الملف الذي يحتوي على بيانات الترجمة الفعلية هو ملف نصي بسيط يتبع تنسيقًا محددًا، في هذه الحالة تنسيق Web Video Text Track (WebVTT). لا تزال مواصفات المكون الإضافي WebVTT قيد التطوير، لكن الأجزاء الرئيسية منه مستقرة، لذا يمكننا استخدامه اليوم.

يوفر موفرو الفيديو مثل Blender Foundation ترجمات وترجمات بتنسيق نصي لمقاطع الفيديو الخاصة بهم، ولكن عادةً بتنسيق SubRip Text (SRT). يمكن تحويلها إلى WebVTT باستخدام محول عبر الإنترنت مثل srt2vtt.

امتداد الملف هو ==.vtt==

==.vtt==نوع MIME للملف هو text/vtt

ضمن متصفحات Chrome وFirefox، يمكن تحميل ترجمات .vtt وعرضها دون أي عوائق. ومع ذلك، بالنسبة لمتصفحات IE10+، على الرغم من دعم ترجمات .vtt أيضًا، إلا أنه يجب تحديد نوع MIME، وإلا فسيتم تجاهل تنسيق WebVTT. الطريقة الأسهل هي إضافة ملف .htaccess ضمن المجلد الذي توجد به الترجمة، وكتابة AddType text/vtt .vtt فيه.

// يجب أن تعلن ==WEBVTT== في بداية الملف

ويبفت

// وقت البدء-->وقت الانتهاء، الوحدة بالمللي ثانية

00:00:00.001 --> 00:00:03.000

// عرض الترجمات المتوافقة مع الوقت المذكور أعلاه يمكن تعيين النمط بشكل منفصل.

<v aa>تسعة ينلينغ السفلي 1111</v>

00:00:03.001 --> 00:00:06.000

<v bb>الآلهة والشياطين 2222</v>

00:00:06.001 --> 00:00:09.000

مع جسدي الدم 3333

00:00:09.001 --> 00:00:12.000

التضحية 4444

00:00:12.001 --> 00:00:15.000

ثلاثة أرواح وسبعة أرواح 5555

العنصر الزائف ::cue هو المفتاح لاستهداف إشارات مسار النص الفردية لأغراض التصميم، لأنه يطابق أي إشارة محددة. لا يوجد سوى عدد قليل من خصائص CSS التي يمكن تطبيقها على تلميحات النص:

• لون
• العتامة
• الرؤية
• زخرفة النص
• ظل النص
• أداء الاختزال الخلفية
• الخطوط العريضة لأداء الاختزال
• سمة اختصار الخط
• ارتفاع الخط
• مساحة بيضاء

==ملاحظة: تعمل أنماط ::cue's cue حاليًا على Chrome وOpera وSafari، ولكن ليس على Firefox حتى الآن. ==

يدعم WebVTT أيضًا بعض علامات HTML للتحكم في النمط، بما في ذلك علامة الصوت ==v== والعلامة الملونة ==c== والعلامة الغامقة ==b== والعلامة المائلة ==i== والتسطير ==u. علامة ==، بالإضافة إلى علامات ==Ruby== و==lang==، وما إلى ذلك.

 // تعيين نمط ترجمات الفيديو::cue{ الخلفية اللون: شفاف color:white Font-size:20px; v[voice= aa]){ color:green;}video::cue(v[voice=bb]){ color:rgb(0, 26, 128);}

أي

افتراضيًا، يتم تمكين الترجمات المصاحبة لـ Internet Explorer 10+، ويحتوي عنصر التحكم الافتراضي على زر وقائمة توفر نفس الوظيفة التي توفرها القائمة التي أنشأناها للتو. السمة الافتراضية مدعومة أيضًا.

==ملاحظة: سيتجاهل IE ملفات WebVTT تمامًا ما لم تحدد نوع MIME. يمكن القيام بذلك بسهولة عن طريق إضافة ملف .htaccess إلى الدليل المناسب الذي يحتوي على AddType text/vtt .vtt==

سفاري

يتمتع Safari 6.1+ بدعم مماثل لـ Internet Explorer 10+، حيث يعرض قائمة تحتوي على خيارات مختلفة متاحة ويضيف خيارًا تلقائيًا يسمح للمتصفح بإجراء تحديد.

كروم وأوبرا

تحتوي هذه المتصفحات على تطبيقات مماثلة: يتم تمكين الترجمة بشكل افتراضي، وتحتوي مجموعة التحكم الافتراضية على زر "cc" الذي يقوم بتشغيل وإيقاف الترجمة. يتجاهل Chrome وOpera السمة الموجودة على العنصر الافتراضي ويحاولان بدلاً من ذلك مطابقة لغة المتصفح مع لغة الترجمة

ما ورد أعلاه هو طريقة استخدام وإنشاء ترجمات فيديو HTML5 التي قدمها المحرر، وآمل أن تكون مفيدة لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!