Custom Video Player with Dynamic Navigation & UI Enhancements

قمتُ بتطوير مشغل فيديو تفاعلي مخصص مع نظام تنقل بالأزرار باستخدام JavaScript و HTML و CSS. يتميز المشروع بتجربة سلسة وسهلة الاستخدام، حيث يمكن للمستخدمين اختيار مقاطع الفيديو من خلال النقر على الأزرار أو استخدام أسهم لوحة المفاتيح، مع تحديث ديناميكي لواجهة المستخدم لتحديد الفيديو النشط حاليًا.

الميزات الرئيسية:

التبديل الديناميكي بين مقاطع الفيديو:

يمكن للمستخدمين النقر على زر لتغيير مصدر الفيديو.

التنقل بلوحة المفاتيح (ArrowUp / ArrowDown) يسمح بالتبديل السريع بين الفيديوهات.

تحديث الواجهة وتحديد الزر النشط:

يتم تمييز الزر النشط تلقائيًا من خلال نمط "buttonPressed" المخصص.

يتم إلغاء تحديد الزر السابق للحفاظ على واجهة نظيفة وسهلة التفاعل.

تحكم تفاعلي بالفيديو:

النقر لتشغيل/إيقاف الفيديو مؤقتًا.

النقر المزدوج لتفعيل وضع الشاشة الكاملة للحصول على تجربة مشاهدة غامرة.

انتقالات سلسة ورسوم متحركة:

يتغير لون الأزرار تلقائيًا عند تحديد فيديو جديد.

تأثيرات عند التمرير وتحولات مرنة لتحسين تجربة المستخدم.

كود مُحسّن وقابل للتطوير:

استخدام مستمعي الأحداث (Event Listeners) بشكل فعال لواجهة سريعة الاستجابة.

كود JavaScript نظيف ومنظم يسهل تعديله وتخصيصه حسب الحاجة.

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

JavaScript (التعامل مع DOM، إدارة الأحداث)

HTML5 (هيكلة الصفحة بطريقة منظمة)

CSS3 (تصميم مخصص، تأثيرات انتقالية، تحسينات على التفاعل)

مثالي لـ:

معارض الفيديو المخصصة

منصات التعليم الإلكتروني

التطبيقات التفاعلية متعددة الوسائط