العنصر <track> في لغةHTML: شرح شامل
مقدمة
العنصر <track>; هو عنصر HTML يُستخدم لتوفير تتبع النصوص الزمنية (تسميات توضيحية أو ترجمات) لعناصر الوسائط مثل <video> و <audio>. هذا العنصر مفيد بشكل خاص لجعل المحتوى متاحًا للأشخاص الذين يعانون من إعاقات سمعية أو للذين يرغبون في مشاهدة المحتوى بلغات مختلفة.
الصيغة الأساسية
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>السمات الرئيسية
السمة kind (النوع)
الوظيفة: تحديد نوع مسار النص
القيم الممكنة:
subtitles(افتراضي): ترجمة للنص المنطوقcaptions: ترجمة مع معلومات صوتية إضافية (لضعاف السمع)descriptions: وصف نصي للمحتوى المرئي (لضعاف البصر)chapters: عناوين الفصول للتنقل في الفيديوmetadata: معلومات للاستخدام من قبل البرامج النصية
مثال:
<track kind="captions">
السمة src (المصدر)
- الوظيفة: تحديد مسار ملف التتبع
- القيم: عنوان URL (مطلق أو نسبي)
- صيغ الملفات المدعومة:
- WebVTT (
.vtt) - الصيغة القياسية - TTML (في بعض المتصفحات)
مثال:
<track src="subtitles/ar.vtt">
السمة srclang (لغة المصدر)
- الوظيفة: تحديد لغة محتوى التتبع
- الصيغة: كود لغة من حرفين (ISO 639-1)
أمثلة:
arللعربيةenللإنجليزيةfrللفرنسية
ملاحظة: هذه السمة مطلوبة إذا كانت kind="subtitles"
مثال:
<track srclang="ar">
السمة label (التسمية)
- الوظيفة: النص المعروض في قائمة اختيار المسارات
- الغرض: تمكين المستخدم من تمييز المسارات المختلفة
أمثلة:
<track label="العربية - الترجمة"><track label="English - Captions">
السمة default (افتراضي)
الوظيفة: تحديد أن هذا المسار يجب تفعيله تلقائيًا
النوع: سمة بوليانية (لا تحتاج لقيمة)
ملاحظات:
- يجب أن يكون عنصر
<track>واحد فقط بهذه السمة - إذا لم يتم تحديده، لن يتم تفعيل أي مسار افتراضيًا
مثال:
<track default>
تنسيق ملف التتبع (WebVTT)
ملفات التتبع عادةً تكون بصيغة WebVTT (Web Video Text Tracks) وتحتوي على محتوى مثل:
WEBVTT
00:00:01.000 --> 00:00:04.000
مرحبًا بك في هذا الفيديو التعليمي
00:00:05.000 --> 00:00:09.000
سنتعلم اليوم عن عنصر track في HTMLأمثلة عملية متكاملة
مثال أساسي
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="العربية" default>
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>مثال متقدم بجميع أنواع المسارات
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<!-- الترجمة العربية الافتراضية -->
<track kind="subtitles" src="subs/ar.vtt" srclang="ar" label="العربية" default>
<!-- الترجمة الإنجليزية -->
<track kind="subtitles" src="subs/en.vtt" srclang="en" label="English">
<!-- شرح صوتي للمكفوفين -->
<track kind="descriptions" src="desc/ar.vtt" srclang="ar" label="الوصف الصوتي">
<!-- فصول الفيديو -->
<track kind="chapters" src="chapters.vtt" srclang="en" label="فصول الفيديو">
<!-- بيانات وصفية -->
<track kind="metadata" src="metadata.vtt">
</video>التحكم بالمسارات عبر JavaScript
// الحصول على عنصر الفيديو
const video = document.getElementById('myVideo');
// تفعيل الترجمة العربية
function enableArabicSubtitles() {
// تعطيل جميع المسارات أولاً
for (let i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = 'disabled';
}
// تفعيل المسار العربي (المسار الأول في المثال)
video.textTracks[0].mode = 'showing';
}
// تغيير حجم الخط للترجمة
function changeCaptionSize(size) {
const track = video.textTracks[0];
if (track && track.cues) {
for (let i = 0; i < track.cues.length; i++) {
track.cues[i].style.fontSize = size + 'px';
}
}
}
// حدث عند تغيير المسار النشط
video.addEventListener('cuechange', function() {
const activeTrack = Array.from(video.textTracks).find(track => track.mode === 'showing');
if (activeTrack) {
console.log('المسار النشط:', activeTrack.label);
}
});
تنسيق ملف التتبع (WebVTT)
ملفات التتبع عادةً تكون بصيغة WebVTT (Web Video Text Tracks) وتحتوي على محتوى مثل:
WEBVTT
00:00:01.000 --> 00:00:04.000
مرحبًا بك في هذا الفيديو التعليمي
00:00:05.000 --> 00:00:09.000
سنتعلم اليوم عن عنصر track في HTMLالاستخدام المتقدم
تعدد المسارات
يمكن إضافة عدة عناصر <track> لمقاطع مختلفة:
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="العربية">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
</video>الوصول عبر JavaScript
يمكنك التفاعل مع عناصر التتبع عبر JavaScript:
const video = document.querySelector('video');
const tracks = video.textTracks; // قائمة بمسارات النصوص
// تعطيل جميع المسارات أولاً
for (let i = 0; i < tracks.length; i++) {
tracks[i].mode = 'disabled';
}
// تفعيل المسار المطلوب
tracks[1].mode = 'showing';دعم المتصفحات
يدعم جميع المتصفحات الحديثة العنصر <track> بما في ذلك:
Chrome
مدعوم +23
Firefox
مدعوم +31
Safari
مدعوم +6
Edge
مدعوم +12
Opera
+12.1
أفضل الممارسات
- استخدم دائمًا تنسيق WebVTT القياسي لضمان التوافق
- قدم خيارات متعددة للغات عندما يكون ذلك ممكنًا
- تأكد من تزامن التسميات التوضيحية مع المحتوى الصوتي بدقة
- اختبر التسميات التوضيحية على متصفحات وأجهزة مختلفة
- استخدم
kind="captions"للمحتوى الموجه لضعاف السمع - استخدم ترميز UTF-8 لملفات التتبع لدعم جميع الأحرف
- أضف سمة
defaultللمسار الذي تريد تفعيله افتراضيًا
مثال كامل
<!DOCTYPE html>
<html>
<head>
<title>مثال عنصر track</title>
</head>
<body>
<video width="640" height="360" controls>
<source src="tutorial.mp4" type="video/mp4">
<track src="subtitles_ar.vtt" kind="subtitles" srclang="ar" label="العربية" default>
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="captions_ar.vtt" kind="captions" srclang="ar" label="شرح عربي">
<p>متصفحك لا يدعم عنصر الفيديو مع التسميات التوضيحية.</p>
</video>
</body>
</html>الخلاصة
عنصر <track> هو أداة قوية لتحسين إمكانية الوصول وتجربة المستخدم في تطبيقات الوسائط المتعددة. من خلال الاستفادة من جميع سماته وإمكانياته، يمكنك جعل محتوى الفيديو والصوت الخاص بك متاحًا لجمهور أوسع، بما في ذلك الأشخاص ذوي الإعاقات السمعية أو البصرية، والمستخدمين الذين يفضلون لغات مختلفة.
