<track>
وسم مسار الترجمة والتعليق <track>
وسم track يضيف ترجمة نصية أو تعليقًا صوتيًّا أو فصولًا لعنصري video وaudio عبر ملف WebVTT — أساس الوصولية في الفيديو.
وسم ذاتي الإغلاق يعيش داخل video أو audio ويشير بـ src إلى ملف WebVTT (امتداد vtt.) يحمل نصوصًا موقوتة بأزمنة بداية ونهاية. تحدد kind نوعه: subtitles للترجمة الحوارية، captions للنسخة الكاملة (تشمل المؤثرات الصوتية — للصم وضعاف السمع تحديدًا)، descriptions لوصف المشاهد صوتيًّا، chapters لعلامات فصول قابلة للتنقل، وmetadata لبيانات يقرؤها السكربت فقط دون ظهور.
يمكن تكرار الوسم لعدة لغات معًا، وdefault يحدد أيهما يظهر تلقائيًّا دون تدخل المستخدم.
الصياغة
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="captions" src="captions-ar.vtt" srclang="ar" label="العربية" default> </video>
⚡ جرّب بنفسك
عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.
<video controls width="100%" poster="https://placehold.co/640x360/1a1725/7c5cff?text=Poster">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
<track kind="captions" srclang="en" label="Demo captions" default
src="data:text/vtt,WEBVTT%0A%0A00:00:00.000 --> 00:00:08.000%0AThis line comes from a track file">
</video>
<p style="font-size:13px; color:#666">فعّل زر الترجمة CC في شريط التحكم لترى السطر.</p>أهم الخصائص
| الخاصية | الوظيفة |
|---|---|
| kind | subtitles / captions / descriptions / chapters / metadata |
| src | مسار ملف WebVTT الحامل للنصوص الموقوتة |
| srclang | رمز لغة المسار (ar, en...) — إلزامي عمليًّا لـ subtitles |
| label | الاسم الظاهر للمستخدم عند اختيار المسار من عدة لغات |
| default | يجعل هذا المسار الظاهر تلقائيًّا عند التشغيل |
💡 نصائح عملية
- captions لا subtitles إن أردت خدمة الصم — الفرق أن captions تنقل المؤثرات الصوتية أيضًا لا الحوار فقط
- أضف عدة track بلغات مختلفة معًا؛ المشاهد يختار من قائمة CC
⚠️ أخطاء شائعة
- الاعتماد على ترجمة يوتيوب الآلية فقط لفيديو مضمّن بلا track ذاتي — لا تحقق الوصولية الحقيقية لفيديو مستضاف عندك
- نسيان srclang فيعجز المتصفح عن تمييز المسار عند تعدد اللغات
وسوم ذات صلة
🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.
📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs