في هذا الدرس 7تصفّح المواضيع
قبل اعتماد معيار HTML5 في الويب الحديث، كان تشغيل مقاطع الفيديو يتطلب تثبيت إضافات خارجية محتكرة في المتصفح، وكان أشهرها مشغل الفلاش. وقد تسببت تلك الملحقات الخارجية في ثغرات أمنية خطيرة واستهلاك شرس لبطاريات الهواتف وإعاقة برمجيات قراءة الشاشة. وجاء عنصر
video الأصيل في HTML5 ليحدث ثورة تقنية جذرية؛ حيث وفر وسيلة قياسية مدمجة لتضمين وتشغيل ملفات الفيديو مباشرة داخل المتصفحات دون الحاجة لأي برمجيات إضافية.يعتبر عنصر
video وسماً مزدوجاً يتألف من وسم بداية ووسم إغلاق، ويحتضن بداخله مسارات المصادر أو رسائل بديلة للمتصفحات القديمة. وبمجرد قراءة المتصفح لهذا الوسم، يشغل محرك الوسائط الرقمي المدمج، ويوفر أزرار العرض مع تنزيل تدفق الفيديو جزئياً عبر الشبكة لتفادي تأخير العرض.Native HTML5 Video Player Elementتضمين مشغل الفيديو القياسي في HTML5
إدراج مشغل فيديو مدمج مع شريط التحكم والأبعاد القياسية ونص بديل.
HTML
<video src="closetag-intro.mp4" width="420" height="170" controls>
Your browser does not support HTML5 video playback.
</video>HTML5 Video Player Live Renderمعاينة مشغل الفيديو القياسي في المتصفح
عرض متصفح لمشغل الفيديو المدمج مع أزرار التشغيل وشريط التقدم.
توفر لغة HTML مجموعة من الخصائص القياسية للتحكم في مشغل الفيديو وسلوكه التفاعلي. وتعتبر خاصية
controls أهم هذه الخصائص؛ إذ توجه المتصفح إلى إظهار شريط الأدوات الافتراضي الذي يشمل أزرار التشغيل والإيقاف المؤقت وشريط تقدم المقطع وخيار التحكم في مستوى الصوت وزر التكبير لكامل الشاشة.
يعد تحديد أبعاد العرض
width والارتفاع height ممارسة برمجية أساسية لمنع ظاهرة الانزياح الهيكلي المفاجئ لعناصر الصفحة عند بدء تحميل المقطع. فعند غياب الأبعاد الصريحة، يخصص المتصفح مساحة صفرية في البداية ثم يدفع النصوص والعناصر لأسفل فور وصول إطار الفيديو الأول.تفرض كافة المتصفحات الحديثة سياسات صارمة لتنظيم التشغيل التلقائي لمقاطع الفيديو حماية لخصوصية المستخدم وحفظاً لباقات الإنترنت المتنقلة ومنعاً للإزعاج الصوتي المفاجئ. وإذا أضيفت خاصية
autoplay إلى فيديو يحتوي على صوت دون كتمه، فإن المتصفح يحظر تشغيله فوراً ويرفض أمر العرض التلقائي.
لكي يسمح المتصفح بتشغيل الفيديو تلقائياً عند فتح الصفحة، يجب إقران
autoplay بخاصية muted لكتم الصوت كلياً. كما تتطلب متصفحات الهواتف المحمولة مثل سفاري إضافة خاصية playsinline لعرض الفيديو ضمن تدفق الصفحة ومنعه من الاستحواذ القسري على شاشة الهاتف بالكامل.لا توجد صيغة فيديو رقمية واحدة تتمتع بدعم عتادي كامل وتوافق مطلق عبر كافة المتصفحات وأنظمة التشغيل والأجهزة. ولضمان وصول المحتوى المرئي لجميع الزوار دون استثناء، يعتمد المطورون على إدراج عناصر
source متعددة داخل عنصر الفيديو، بحيث يقدم كل عنصر رابط ملف محدد مع تحديد نوع الوسائط الرقمي الخاص به.يوضح الجدول التالي مقارنة دقيقة بين صيغ حاويات الفيديو الأكثر انتشاراً في تطوير الويب الحديث وأنواع MIME الخاصة بها:
يفحص المتصفح وسوم
source تتابعياً من الأعلى إلى الأسفل؛ حيث يقرأ خاصية type أولاً، فإذا كان قادراً على فك ترميزها شرع في تنزيلها وتجاهل بقية الوسوم التالية تماماً، مما يوفر موارد النظام ويمنع الاتصالات الشبكية المكررة.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>Multi-Source Video Player Browser Previewمعاينة مشغل الفيديو متعدد الصيغ في المتصفح
عرض متصفح لمشغل الفيديو الذي يختار الصيغة الأنسب تلقائياً عبر عناصر source.
في الحالة الافتراضية، يظهر مشغل الفيديو قبل بدء تشغيله كمساحة فارغة أو يعرض الإطار الزمني الأول، والذي غالباً ما يكون شاشة سوداء غير معبرة. وتتيح خاصية
poster تحديد مسار صورة غلاف عالية الدقة تظهر للمستخدم أثناء انتظار تحميل المقطع أو ريثما يقرر النقر على زر التشغيل.ينصح باستخدام صيغ صور حديثة ومضغوطة مثل WebP لصور الغلاف من أجل تقليل الحجم المحمل عبر الشبكة. وبمجرد تفاعل المستخدم وبدء التشغيل، تختفي صورة الغلاف بسلاسة ليحل محلها تدفق الفيديو الرقمي دون أي ارتباك بصري في واجهة الموقع.
Custom Video Thumbnail Using posterتخصيص صورة الغلاف التمهيدية للفيديو بخاصية poster
عرض صورة غلاف مخصصة عالية الوضوح قبل أن يضغط المستخدم على زر التشغيل.
HTML
<video width="420" height="170" controls poster="course-cover.jpg" preload="metadata">
<source src="html-masterclass.mp4" type="video/mp4">
</video>Video Poster Thumbnail Browser Renderمعاينة صورة الغلاف التمهيدي poster في المتصفح
عرض متصفح لمشغل الفيديو مع ظهور صورة الغلاف التمهيدي قبل بدء العرض.
تمثل إتاحة الوصول ركناً أساسياً في هندسة صفحات الويب العالمية. ويوفر وسم
track إمكانية ربط ملفات نصوص زمنية متزامنة مع مقطع الفيديو؛ وتشمل هذه الملفات الترجمات بلغات متعددة والوصف النصي للأصوات الموجه لضعاف السمع، فضلاً عن الفهارس الزمنية لفصول المقطع.تعتمد ملفات الترجمة على معيار WebVTT القياسي، حيث يبدأ كل ملف بسطر التعريف الأول الإلزامي الذي يحمل كلمة WEBVTT، تليه كتل التوقيت الزمني الدقيقة بالثواني وأجزاء الألف من الثانية، مصحوبة بالنص المقابل المراد عرضه للمشاهدين.
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>Subtitled Video Player Browser Previewمعاينة مشغل الفيديو المزود بملفات ترجمة track
عرض متصفح لمشغل الفيديو مع تفعيل مسارات الترجمة النصية القياسية.
تعتبر ملفات الفيديو من أضخم الأصول الرقمية المنقولة عبر شبكة الإنترنت؛ إذ تتراوح أحجامها بين عدة ميغابايتات إلى مئات الميغابايتات. وتمنح خاصية
preload المطور تحكماً دقيقاً في حجم البيانات التي يجوز للمتصفح تنزيلها مسبقاً عند تحميل الصفحة، محققة التوازن المطلوب بين سرعة بدء العرض وتوفير استهلاك البيانات.
تقبل خاصية
preload ثلاث قيم رئيسية: القيمة none تمنع المتصفح من تنزيل أي بايت حتى يضغط الزائر زر التشغيل؛ بينما تجلب القيمة metadata أبعاد الفيديو ومدته الزمنية وفهرس الترجمة فقط؛ في حين تسمح القيمة auto بتنزيل وتخزين أجزاء متقدمة من الفيديو مسبقاً.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس المعمارية المتكاملة لعنصر الفيديو في HTML5: خصائص التحكم الأساسية، وسياسات التشغيل التلقائي وكتم الصوت، وشلال المصادر المتعددة لضمان التوافق، وتعيين صور الغلاف عبر poster، ودمج مسارات الترجمة عبر track، وتحسين استهلاك البيانات عبر preload. الخطوة التالية: سنتعلم في الدرس القادم كيفية تضمين وإدارة الملفات الصوتية والبث الصوتي عبر عنصر audio.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Video Element عنصر الفيديو
- عنصر HTML5 الأصيل المستخدم لتضمين وتشغيل مقاطع الفيديو الرقمية مباشرة داخل المتصفحات دون الحاجة لإضافات خارجية.
- للمراجعة
- 02 Source Element عنصر المصدر
- وسم مفرغ يوضع داخل عناصر الفيديو والصوت لتوفير صيغ ملفات متعددة وروابط بديلة يختار المتصفح الأنسب منها.
- للمراجعة
- 03 Track Element عنصر مسار الترجمة
- عنصر يحدد مسارات النصوص المتزامنة زمنياً مثل الترجمة النصية والوصف الصوتي وفهارس الفصول المقترنة بالوسائط.
- للمراجعة
- 04 Poster Attribute خاصية صورة الغلاف
- خاصية تحدد رابط صورة تمهيدية تظهر على مساحة المشغل قبل بدء تشغيل مقطع الفيديو أو أثناء تحميله.
- للمراجعة
- 05 Preload Attribute خاصية التحميل المسبق
- خاصية تنظم رغبة المطور في تنزيل بيانات المقطع مسبقاً وتحدد حجم الذاكرة المؤقتة المستهلكة قبل تفاعل الزائر.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 MIME MIME
- Multipurpose Internet Mail Extensions
- معيار قياسي لتحديد أنواع الملفات والوسائط الرقمية المنقولة عبر بروتوكولات الإنترنت لتوجيه المتصفح في معالجتها.
- للمراجعة
- 02 WebVTT WebVTT
- Web Video Text Tracks
- تنسيق قياسي معتمد من منظمة W3C مخصص لكتابة ملفات الترجمة والوصف النصي المتزامنة مع وسائط HTML5.
- للمراجعة
- 03 MP4 MP4
- MPEG-4 Part 14
- حاوية وسائط رقمية واسعة الانتشار تستخدم لتخزين تدفقات الفيديو والصوت بترميزات قياسية مدعومة في مختلف الأجهزة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ عنصر فيديو متكامل يحتوي على أبعاد محددة وأدوات التحكم الأصلية وصورة غلاف تمهيدية مخصصة.
-
أضف وسوم source متعددة بصيغتي WebM وMP4 متبوعة بفقرة نصية تنبيهية للمتصفحات القديمة.
-
اربط ملف ترجمة عربية بصيغة vtt باستخدام عنصر track مع تحديد الخصائص الدلالية المناسبة.
-
طبق شروط التشغيل التلقائي المعتمدة عبر الجمع بين خاصيتي autoplay وmuted وخاصية playsinline.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
1أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.