تبسيط التعلّم - تحسين عرض الفيديو في منصة LMS

دمجتُ HLS في نظام لإدارة التعلّم (LMS) بمجموعة تقنيات قوية تشمل Laravel و JavaScript و FFMPEG و Plyr و Redis و MySQL و Bootstrap و HLS.js و Ajax. يركّز المشروع على تغيير طريقة عرض الفيديو داخل المنصة جذريًا، ويضيف ميزات وإمكانات متقدمة.

نظرة عامة على المشروع

هدف المشروع تحسين عرض الفيديو داخل نظام إدارة التعلّم، بإضافة مجموعة ميزات تدير دورة حياة الفيديو بكفاءة. أهم هذه الميزات:

• دمج HLS: اعتماد HLS (HTTP Live Streaming) لبثّ أسرع وأكثر تكيّفًا مع ظروف الاتصال.
• العلامة المائية: إضافة علامة مائية إلى الفيديو لحماية الملكية الفكرية وإبراز الهوية.
• اقتطاع مقطع تجريبي: اقتطاع جزء قصير من الفيديو لصنع مقاطع تجريبية جذابة لأغراض الترويج.
• الترميز بمعدلات بت مختلفة: رفع جودة الفيديو بتقنيات ترميز فعّالة لمعدل البت (bitrate).
• التقسيم إلى مقاطع: تقطيع الفيديو إلى أجزاء صغيرة، مدة كل منها 10 ثوانٍ عادةً، لتشغيل وبثّ أفضل.
• التحويل إلى صيغة HLS: تحويل الفيديوهات إلى معيار HLS لضمان التوافق والتشغيل السلس على مختلف الأجهزة.
• التخزين في MySQL: حفظ بيانات الفيديو الأساسية في قاعدة بيانات MySQL لاسترجاعها وإدارتها بسهولة.
• المعاينة بجودات متعددة: يختار المستخدم جودة المعاينة التي تناسبه من عدة خيارات.

دورة حياة الفيديو:

التقنيات المستخدمة

يعتمد المشروع على تقنيات متنوعة لتحقيق أهدافه:

• Laravel: إطار PHP لبناء واجهة خلفية متينة.
• JavaScript: لتحسين التفاعل وتجربة المستخدم في الواجهة الأمامية.
• FFMPEG: لمعالجة الفيديو، بما في ذلك الترميز والاقتطاع.
• Plyr: مشغّل فيديو قابل للتخصيص، دمجتُه لتحسين ميزات التشغيل.
• Redis: للتخزين المؤقت (caching) الفعّال وتحسين الأداء.
• Bootstrap: لواجهة متجاوبة وجذابة بصريًا.
• HLS.js: لتشغيل HLS في المتصفحات الحديثة.
• Ajax: للتواصل غير المتزامن وتحميل المحتوى ديناميكيًا.

تفاصيل التنفيذ

المهام وطوابير المهام في Laravel

يستفيد المشروع من المهام (Jobs) وطوابير المهام (Queues) في Laravel لتنفيذ أعمال معالجة الفيديو وترميزه بكفاءة. نقلُ العمليات التي تستغرق وقتًا طويلًا إلى طابور يعمل في الخلفية يُبقي تجربة المستخدم سلسة وسريعة الاستجابة.

Redis لحفظ حالة ترميز الفيديو

لعرض تقدّم ترميز الفيديو لحظة بلحظة، استخدمتُ Redis للتخزين المؤقت وحفظ البيانات. تُحفظ حالة الترميز الحالية، ومنها نسبة الإنجاز، في Redis، فيُسترجع ذلك بسرعة وتتحدّث الواجهة ديناميكيًا.

دمج Ajax

لـ Ajax دور أساسي في ربط الواجهة الأمامية بالخلفية بسلاسة. عبر طلبات Ajax تجلب الواجهة الأمامية حالة الترميز المحفوظة في Redis وتعرض تحديثاتها لحظيًا. هذا الأسلوب غير المتزامن يُغني المستخدم عن تحديث الصفحة يدويًا.

ملاحظات وتحسينات

أضاف الجمع بين المهام وطوابير المهام في Laravel و Redis و Ajax عدة فوائد للمشروع:

• معالجة فعّالة: تنفيذ المهام في الخلفية يمنع الأعمال الثقيلة، مثل ترميز الفيديو، من إبطاء استجابة التطبيق.
• تحديثات لحظية: يتابع المستخدم تقدّم الترميز لحظة بلحظة، فتكون التجربة شفافة وأكثر تفاعلًا.
• قابلية التوسّع: الطوابير و Redis تسمح للنظام بمعالجة عدة مهام ترميز في الوقت نفسه، فيتوسّع الحل بسهولة.
• تجربة استخدام أفضل: دمج Ajax يُغني عن التدخل اليدوي، فتصبح متابعة تقدّم الترميز أسهل على المستخدم.

لقطات الشاشة

اطّلع على المشروع بصريًا من خلال لقطات الشاشة التالية:

قبل رفع الفيديو

جهّز الفيديو لتجربة تعلّم أفضل.

إدارة دورة حياة الفيديو

عرض مرئي لمراحل دورة حياة الفيديو داخل النظام.

اكتمل رفع الفيديو

أصبح المحتوى جاهزًا للعرض بسلاسة.

صفحة الدورة

تصفّح محتوى الدورة لتعميق فهمك.

صفحة الدرس

استكشف كل درس لتستوعب مفاهيمه جيدًا.

الجودات المتاحة

اختر جودة الفيديو التي تناسبك.

جودة 144p

شاهد الفيديو بدقة منخفضة لأداء أخف.

جودة 1080p

شاهد الفيديو بدقة عالية لتجربة تعلّم أوضح تفصيلًا.

نشاط الشبكة أثناء تقدّم تشغيل الفيديو

راقب نشاط الشبكة مع تقدّم تشغيل الفيديو.

للاستزادة

شاهد العرض التجريبي وتصفّح الشيفرة المصدرية لترى الحلول والإمكانات المتقدمة في هذا المشروع، وكيف يمكن أن يبدو مستقبل عرض الفيديو في أنظمة إدارة التعلّم.