العنصر `<track>`

يُستخدَم العنصر <track> داخل العنصر <audio> أو <video> ويسمح لك باستخدام مسارات نصية مؤقتة مثل الترجمات المصاحبة لمقاطع الفيديو. تكون هذه المقاطع بصيغة WebVTT (وملفاتها بامتداد ‎.vtt أي Web Video Text Tracks).

مثال عن استخدام العنصر <video> لإضافة مقطع فيديو بصيغة OGG و MP4 (عبر العنصر <source>) وله صورة غلاف تُعرَض إلى أن يبدأ تشغيله (الخاصية poster)، وفيه عناصر <track> تمثل captions، وعناوين الفصول، وترجمات للألمانية والإنكليزية واليابانية والعربية، مع بعض البيانات الوصفية:

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions"
     src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_ar.vtt" srclang="ar">
   <track kind="metadata" src="keyStage1.vtt" srclang="en"
     label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en"
     label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en"
     label="Key Stage 3">
   <!-- Fallback -->
   ...
</video>

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	لا يوجد، فهذا العنصر فارغ.
الوسم المختصر	لمّا كان هذا العنصر فارغًا، فيجب توفير وسم البداية وحذف وسم النهاية.
العناصر الأب	العنصر `<audio>` أو `<video>` ويجب أن يرد قبل أي محتوى آخر.
واجهة DOM	`HTMLTrackElement`

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

Chrome	Firefox	Edge	Safari	Opera
23	24	مدعوم	6	12.10

بعض الخاصيات المُضافة حديثًا في HTML5 قد لا تعمل في جميع المتصفحات.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`default`

تُشير هذه الخاصية إلى أنَّ هذا المسار النصي سيُفعَّل ما لم يُفضِّل المستخدم إظهار مسار آخر مناسب أكثر، ولا يمكن استخدام هذه الخاصية على أكثر من عنصر <track> تابع لعنصر <audio> أو <video>.

`kind`

تُشير هذه الخاصية إلى الغرض من المسار النصي.

إذا لم تُضبَط قيمة لها فالقيمة الافتراضية لها هي subtitles، وإذا كانت قيمتها غير صالحة (أي ليست من الأنواع تالية الذكر) فستستخدم القيمة metadata (على الرغم من أنَّ إصدارات المتصفح Chrome قبل 52 كانت تعامل القيم غير الصالحة على أنها subtitles). القيم المسموحة لهذه الخاصية هي:

subtitles
- توفِّر ترجمة للمحتوى الذي قد لا يكون مفهومًا من المشاهد، مثل محادثة باللغة الإسبانية في فلمٍ إنكليزي.
- قد تحتوي الترجمة على محتوى إضافي، مثل المعلومات عامة أو محتوى توضيحي، فمثلًا النص الموجود في بداية الأفلام، أو تاريخ ووقت وقوع مشهد ما، أو مكان وقوعه.
captions
- تستخدم closed captions لتوفير تفريغ نصي أو ترجمة للمحتوى الصوتي.
- قد تتضمن معلومات غير صوتية مثل المؤثرات الصوتية؛ وقد تتضمن على إشارة لمصدر الصوت (موسيقى أو نص أو شخص).
- هذا النوع ملائم للمستخدمين الذين يعانون من مشاكل سماعية أو عندما يكون الصوت مكتومًا.
descriptions
- وصف نصي لمحتوى الفيديو.
- هذا النوع ملائم للمستخدمين الذين يعانون من مشاكل بصرية أو عندما لا يمكن رؤية مقطع الفيديو.
chapters
- يمكن استخدام العناوين لمساعدة المستخدم بالتنقل بين محتوى الوسائط المتعددة.
metadata
- المسارات التي تُستخدَم برمجيًا، ولا تظهر للمستخدم.

`label`

عنوان قابل للقراءة من المستخدم للمسار النصي الذي سيستعمله المتصفح عند عرض قائمة المسارات النصية المتوافرة.

`src`

رابط URL لملف المسار (ملف بصيغة ‎.vtt)، وهذه الخاصية إلزامية ويجب تعريفها دومًا.

`srclang`

لغة المسار النصي، ويجب أن تكون مُعرَّفة في مواصفة BCP47.

يجب تعريف هذه الخاصية إذا ضُبِطَت القيمة subtitles إلى الخاصية kind.

ملاحظات الاستخدام

نوع البيانات المُضافة إلى ملف الوسائط يُحدَّد عبر الخاصية kind، والتي تأخذ القيم subtitles أو captions أو descriptions أو chapters أو metadata.

يجب أن يشير هذا العنصر إلى ملف مصدري يحتوي على نص مؤقت (أي يرتبط بتوقيتٍ معيّن) الذي يمكن للمتصفح عرضه عندما يطلب المستخدم معلومات إضافية.

لا يمكن لملف وسائط أن يكون له أكثر من عنصر <track> له نفس قيم الخاصيات kind و srclang و label.

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.