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

Supporting Multiple Video Formats دعم صيغ الفيديو المتعددة بالمتصفحات

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

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

الصف 1 شرح توضيحي
لا توجد صيغة فيديو رقمية واحدة تتمتع بدعم عتادي كامل وتوافق مطلق عبر كافة المتصفحات وأنظمة التشغيل والأجهزة. ولضمان وصول المحتوى المرئي لجميع الزوار دون استثناء، يعتمد المطورون على إدراج عناصر source متعددة داخل عنصر الفيديو، بحيث يقدم كل عنصر رابط ملف محدد مع تحديد نوع الوسائط الرقمي الخاص به.
الصف 2 شرح توضيحي

يوضح الجدول التالي مقارنة دقيقة بين صيغ حاويات الفيديو الأكثر انتشاراً في تطوير الويب الحديث وأنواع MIME الخاصة بها:

الصف 3 شرح توضيحي
يفحص المتصفح وسوم source تتابعياً من الأعلى إلى الأسفل؛ حيث يقرأ خاصية type أولاً، فإذا كان قادراً على فك ترميزها شرع في تنزيلها وتجاهل بقية الوسوم التالية تماماً، مما يوفر موارد النظام ويمنع الاتصالات الشبكية المكررة.
الصف 4 كود برمجي

Multiple Video Sources With MIME Typesتوفير صيغ فيديو متعددة عبر عناصر source

إدراج صيغتي WebM وMP4 مع تحديد نوع MIME لضمان عمل الفيديو في كل المتصفحات.
HTML 
<video width="420" height="170" controls muted>
  <source src="lesson-demo.webm" type="video/webm">
  <source src="lesson-demo.mp4" type="video/mp4">
  <p>Download the <a href="lesson-demo.mp4">MP4 video</a>.</p>
</video>
جرّب بنفسك
الصف 5 معاينة حية

Multi-Source Video Player Browser Previewمعاينة مشغل الفيديو متعدد الصيغ في المتصفح

عرض متصفح لمشغل الفيديو الذي يختار الصيغة الأنسب تلقائياً عبر عناصر source.
الصف 6 ملاحظة هامة

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