انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #6 من درس: مقاطع الفيديو في لغة HTML

Adding Subtitles and Captions Track إضافة ملفات الترجمة بعنصر track

احترف تشغيل الفيديو في HTML5: أدوات التحكم الأصيلة، وسياسات التشغيل التلقائي، ودعم الصيغ المتعددة، وصور الغلاف التمهيدية، ومسارات ترجمة WebVTT، وتحسين الأداء والتحميل المسبق.
5 صفوف تعليمية
لغة HTML
15,968 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
تمثل إتاحة الوصول ركناً أساسياً في هندسة صفحات الويب العالمية. ويوفر وسم track إمكانية ربط ملفات نصوص زمنية متزامنة مع مقطع الفيديو؛ وتشمل هذه الملفات الترجمات بلغات متعددة والوصف النصي للأصوات الموجه لضعاف السمع، فضلاً عن الفهارس الزمنية لفصول المقطع.
الصف 2 شرح توضيحي
تعتمد ملفات الترجمة على معيار WebVTT القياسي، حيث يبدأ كل ملف بسطر التعريف الأول الإلزامي الذي يحمل كلمة WEBVTT، تليه كتل التوقيت الزمني الدقيقة بالثواني وأجزاء الألف من الثانية، مصحوبة بالنص المقابل المراد عرضه للمشاهدين.
الصف 3 كود برمجي

Accessible WebVTT Subtitles Track Elementإضافة ملفات الترجمة النصية المتزامنة بعنصر track

ربط ملفات ترجمة WebVTT باللغتين العربية والإنجليزية داخل عنصر الفيديو.
HTML 
<video width="420" height="170" controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="subs-ar.vtt" kind="subtitles" srclang="ar" label="Arabic" default>
  <track src="subs-en.vtt" kind="subtitles" srclang="en" label="English">
</video>
جرّب بنفسك
الصف 4 معاينة حية

Subtitled Video Player Browser Previewمعاينة مشغل الفيديو المزود بملفات ترجمة track

عرض متصفح لمشغل الفيديو مع تفعيل مسارات الترجمة النصية القياسية.
الصف 5 ملاحظة هامة

جميع فقرات هذا الدرس (مقاطع الفيديو في لغة HTML)