❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <track>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • نصائح و ملاحظات

تعريفه

نستخدم الوسم <track> على النحو التالي لإضافة ترجمة كتابية للملف الصوتي أو للفيديو المعروض في الصفحة.

<track src="file-src" kind="for-what" srclang="lang" label="which-lang">
  • مكان الكلمة file-src نضع مسار الملف الذي يحتوي على الترجمة و الذي يفترض أن يكون نوعه vtt.
  • مكان الكلمة for-what نضع قيمة محددة لإعلام المتصفح كيف سيتم التعامل مع ملف الترجمة.
  • مكان الكلمة lang نضع أحرف مختصرة تشير لإسم اللغة التي سيتم عرض الترجمة بها.
  • مكان الكلمة which-lang نضع إسم لغة الترجمة التي سيراها المستخدم حتى يعرف بأي لغة الترجمة متوفرة.

و بالطبع يمكن إضافة عدة وسوم <track> لنفس الفيديو أو الملف الصوتي لوضع عدة ترجمات يستطيع المستخدم اختيار ما يريده منها.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <track>.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
23 12 31 12.1 6 مدعوم 25 31 ؟ 6 1.5

خصائصه

الخاصية default

يمكن إضافتها للوسم لتحديد أنه الترجمة الإفتراضية التي سيتم إعتمادها و بالطبع يظل المستخدم قادر على اختيار ترجمة أخرى.
ملاحظة: يمكن إضافتها للوسم فقط في حال كانت الترجمة موضوعة لفيديو أو ملف صوتي يظهر أمام المستخدم.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5

الخاصية kind

يمكن إضافتها للوسم لجعل المتصفح يعرض الترجمة بشكل ملائم للمستخدم.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية kind لتحديد كيف سيقوم المتصفح بعرض الترجمة للمستخدم.

القيمة معناها
subtitles هذه القيمة الإفتراضية و هي تعني أن الترجمة سيتم عرضها لكل ما يتم قوله في الفيديو أو لنص يظهر في الفيديو أو لإظهار نص بين مقاطع الفيديو إلخ..
captions الترجمة سيتم عرضها لملف صوتي سواء كان هذا الملف عبارة عن حوار ما أو أغنية و هذا مناسب للمستخدم في حال كان أصم.
chapters الترجمة سيتم عرضها لعنواين و هذا مناسب للعنواين الموضوعة التي تسمح بالتنقل إلى مقاطع محددةة في الفيديو.
descriptions الترجمة سيتم عرضها لوصف ما يحدث في الفيديو و هذا مناسب للمستخدم في حال كان أعمى.
metadata النص لن يتم عرضه أمام المستخدم حيث أنه عبارة عن سكربت الفيديو، أي ما تم قوله في الملف الصوتي أو الفيديو.

الخاصية label

يجب إضافتها للوسم لتحديد إسم لغة الترجمة الذي سيظهر أمام المستخدم و الذي يمكنه اختياره لعرض الترجمة به.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5

الخاصية src

يجب إضافتها للوسم لتحديد مسار الملف الذي يحتوي على الترجمة.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5

الخاصية srclang

يجب إضافتها للوسم لتحديد لغة الترجمة الموضوعة فيه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
23 12 31 12.1 6 4.4 25 31 ؟ ؟ 1.5

إستخدامه

في المثال التالي قمنا بعرض فيديو مع إضافة الترجمة له باللغتين العربية و الإنجليزية مع جعل الترجمة الإنجليزية هي الترجمة التي ستظهر بشكل إفتراضي عند تشغيل الفيديو.

مثال

<video width="320" height="240" src="who-am-i.mp4" controls>
    <track kind="subtitles" label="العربية" src="ar.vtt" srclang="ar" default/>
    <track kind="subtitles" label="English" src="en.vtt" srclang="en"/>
    Sorry, your browser doesn't support embedded videos.
</video>
جرب الكود

نصائح و ملاحظات

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

00:00:04:000 --> 00:00:06.000
Hello, my name is Mhamad Harmush

00:00:07.000 --> 00:00:10.000
In this lesson I'll teach you how
to add tracks to videos

في حال أردت تعديل طريقة ظهور نص الترجمة، فيمكنك إضافة كود CSS بشكل مباشر في ملف الترجمة نفسه أو في الصفحة إذا أردت.

مثال

::cue {
    background: none;
    color: papayawhip;
    font-size: 17px;
}
جرب الكود