السلام عليكم، سنرى في هذا الدرس طرق إقحام الفيديوهات في ملف HTML، لكن قبل ذلك، سنسلط الضوء على تنسيقات الفيديو المدعومة من طرف متصفحات الإنترنت الأكثر تداولاً من طرف مستعملي الإنترنت.
تنسيقات الفيديو المدعومة من أكبر متصفحات الإنترنت
تنسيقات الفيديو المستعملة في HTML5 هم ثلاثة : OGG، MP4 و WebM.
يمكنكم الإعتماد على الجدول الذي في هذه الصفحة في معرفة تنسيقات الفيديو المدعومة من طرف أكبر متصفحات الإنترنت، و هي صفحة من ويكيبيديا، و معترف بها حيث يمكنكم تفقد الترخيص و المراجع المأخوذة منها المعلومات أسفل الصفحة، إضافة إلى أنها أُصدِرت في تاريخ 1 يونيو 2019، أي تحتوي على معلومات تخص أحدث ما يروج في عالم برمجة الفيديوهات في الإنترنت (شرح الجدول يوجد في الفيديو التوضيحي للدرس).
طرق إقحام الفيديوهات في ملف HTML
برمجة HTML تقبل نوعان من الفيديوهات :
* الفيديوهات التي تكون في الويب، و بالضبط في منصات الفيديوهات.
* الفيديوهات التي تكون في المخدم الخاص (Server).
طريقة تضمين الفيديوهات
تسمى عملية إقحام الفيديوهات التي تكون في منصات الفيديوهات بالتضمين، و لتضمين فيديو في ملف HTML يجب الذهاب إلى صفحة الفيديو في منصة الفيديوهات، ثم النقر على "Partager / نشر / Share" حسب لغة متصفح الإنترنت، و بالنقر على "Integrer / تضمين / Embed" سيتم إظهار كود التضمين بصيغة عنصر 'IFRAM' حيث يجب نسخه و لصقه داخل عنصر 'BODY' لملف HTML للصفحة المراد تضمين الفيديو داخلها. (الفيديو التوضيحي يوضح كيفية تضمين فيديو من منصة اليوتيوب YouTube)
الفيديو التوضيحي للدرس
طريقة إقحام الفيديوهات من المخدم الخاص
العنصر المسؤول عن إقحام الفيديوهات التي تكون في المخدم الخاص هو عنصر من نوع Block بإسم 'VIDEO' نسبة إلى كلمة Video الإنجليزية، أي فيديو، و هو عنصر ثنائي الأوسمة، و يقحم داخله عنصرين إسمهما 'SOURCE' و 'TRACK' و فقرة نصية.
Attributs العنصر 'VIDEO'
▪ 'CONTROLS' : هي Attribut بلا قيمة و ضرورية لعنصر 'VIDEO' حيث هي المسؤولة عن ظهور شريط أدوات التحكم بالفيديو.
▪ 'WIDTH' : هي Attribut مسؤولة عن تعديل عرض الفيديو عبر قيمتها التي تدعم البكسل و النسب المئوية.
▪ 'HEIGHT' : هي Attribut مسؤولة عن تعديل ارتفاع الفيديو عبر قيمتها التي تدعم البكسل و النسب المئوية.
▪ 'PRELOAD' : هي Attribut إذا أقحمت في عنصر 'VIDEO' ستعطي أمر لمتصفح الإنترنت بأن يُحمِّل الفيديو قبل أي عنصر آخر في الصفحة المحتوية للفيديو، و لديها 3 قيم :
- 'AUTO' : هي القيمة التلقائية بحيث تشغّل ميزة الـAttribut.
- 'METADATA' : تأمر متصفح الإنترنت بأن يحمل معلومات الفيديو قبل أي عنصر آخر في الصفحة المحتوية للفيديو.
- 'NONE' : تعطل تحميل الفيديو في الصفحة من قبل متصفح الإنترنت.
▪ 'AUTOPLAY' : هي Attribut بلا قيمة و مسؤولة عن الإشتغال التلقائي للفيديو بعد تحميل الصفحة المحتوية للفيديو من قبل متصفح الإنترنت.
▪ 'LOOP' : هي Attribut بلا قيمة و مسؤولة عن الإشتغال التلقائي للفيديو بعد انتهائه.
▪ 'MUTED' : هي Attribut بلا قيمة و مسؤولة عن اشتغال الفيديو بلا صوت.
▪ 'POSTER' : هي Attribut مسؤولة عن إقحام صورة مصغرة تظهر قبل تشغيل الفيديو، حيث في قيمتها يوضع مسار الصورة المراد جعلها صورة الفيديو المصغرة (لمن لا يعرف كيفية تحديد المسارات يمكنه الإطلاع على قاعدة المسارات بتفقد أو مراجعة درس الصور في HTML).
العنصر 'SOURCE'
يعتبر العنصر 'SOURCE' عنصراً مهماً في عنصر 'VIDEO' إذ هو المسؤول عن تحديد مسار و نوع الفيديو المراد إقحامه، و يتوفر على 2 Attributs إجباريتين وهما :
▪ 'SRC' : هي المسؤولة عن تحديد مسار الفيديو المراد إقحامه (تطرقنا لهذه الـAttribut في درس الصور حيث يكتب في قيمتها مسار الصورة المراد إقحامها نسبة إلى الملف المحتوي لعنصر إقحامها، كذلك و مثال الفيديوهات).
▪ 'TYPE' : هي المسؤولة عن تحديد نوع الفيديو، و يقحم في قيمتها كلمة Video ثم / ثم امتداد الفيديو.
يحبذ إنشاء الفيديو المراد إقحامه بالتنسيقات الثلاث (WebM / OGG / MP4) ثم إقحام كل تنسيق في عنصر 'SOURCE' خاص به داخل عنصر 'VIDEO' المخصص لإقحامه، و ذلك لدعمه من طرف جميع المتصفحات الكبرى، و بالتالي ضمان رؤية الفيديو من جميع الزوار.
العنصر 'TRACK'
يعتبر العنصر 'TRACK' العنصر المسؤول عن إقحام ملف الترجمة في عنصر 'VIDEO'، و يتوفر على 4 Attributs :
▪ 'SRC' : الغنية عن التعريف طبعاً، و هي Attribut إجبارية لعنصر 'TRACK' بحيث أنها المسؤولة عن إقحام مسار ملف الترجمة، و ذلك بتطبيق قاعدة المسارات للملفات في قيمتها.
▪ 'KIND' : هي أيضاً Attribut إجبارية لعنصر 'TRACK' بحيث أنها المسؤولة عن تحديد نوع الترجمة عبر قيمها الخمس، و هم :
- 'SUBTITLES' : قيمة تحدد الترجمة العادية التي تترجم الكلام في الفيديو إلى نصوص بلغة معينة.
- 'CAPTION' : قيمة تحدد ترجمة التأثيرات الموجودة في الفيديو كالكحة أو ما شابه، و هي مخصصة للصم و البكم.
- 'DESCRIPTION' : قيمة تحدد وصف الفيديو.
- 'CHAPTERS' : قيمة تحدد تقسيم الفيديو إلى فصول.
- 'METADATA' : قيمة تحدد معلومات عن الفيديو.
▪ 'SRCLANG' : هي Attribut اختيارية لعنصر 'TRACK' بحيث يوضع في قيمتها Iso 639-1 Code للغة ملف الترجمة.
▪ 'LABEL' : هي أيضاً Attribut اختيارية لعنصر 'TRACK' بحيث يوضع في قيمتها عنوان الترجمة، بحيث إذا كانت العديد من ملفات الترجمة في عنصر 'VIDEO' يمكن للزائر اختيار الترجمة حسب اللغة التي يفهمها عبر شريط أدوات التحكم بالفيديو.
الفقرة النصية
يكتب داخل عنصر 'VIDEO' أي بين وسم فتحه و وسم إغلاقه فقرة نصية تظهر مكان الفيديو للزوار الذين يتصفحون بمتصفح إنترنت لا يدعم تقنية الفيديو.
الأكواد المستعملة في هذا الدرس
أتمنى أن تستفيدوا من الدرس