عن المشروع
ReactPlayer هو مكون React لتضمين تشغيل الوسائط من مجموعة واسعة من المصادر باستخدام واجهة موحدة. يقبل عنوان URL للوسائط ويحمّل تلقائيًا العلامة أو SDK الخارجي المناسب للتشغيل. المصادر المدعومة تشمل ملفات الفيديو والصوت القياسية عبر HTML5، وتدفقات HLS عبر hls.js، وتدفقات DASH عبر dash.js، ومقاطع Mux عبر عنصر mux-player، ويوتيوب عبر YouTube iFrame Player API، وفيميو عبر Vimeo Player API، وWistia عبر Wistia Player API.
يعرض المكون مجموعة غنية من Props للتحكم في التشغيل مثل src وplaying وloop وcontrols وvolume وmuted وplaybackRate وwidth وheight وpreload وplaysInline وcrossOrigin وdisableRemotePlayback ودعم picture-in-picture حيثما كان متاحًا. يوفر أيضًا Props للمستمعين لأحداث المشغل الشائعة بما في ذلك onReady وonStart وonPlay وonPlaying وonProgress وonTimeUpdate وonDurationChange وonPause وonWaiting وonSeeking وonSeeked وonRateChange وonEnded وonError وأحداث الدخول والخروج من وضع picture-in-picture. يتيح prop اسمه config إعدادات خاصة بالمصدر لـ YouTube وVimeo وHLS.
يتضمن ReactPlayer أدوات مساعدة ثابتة مثل canPlay لاختبار ما إذا كان عنوان URL قابلاً للتشغيل على الأرجح، بالإضافة إلى addCustomPlayer وremoveCustomPlayers لتسجيل تطبيقات مشغّلة مخصصة. طُرق المثيل التي يتم الوصول إليها عبر ref تهدف إلى التوافق مع واجهة HTMLMediaElement. ولأداء أفضل، يدعم المكون التحميل الكسول لحزم المشغّلات عندما يدعم نظام البناء الاستيرادات الديناميكية، ما يقلص حجم الحزمة الرئيسية عن طريق تحميل المشغّل المطلوب فقط للمصدر المعطى.
من الميزات الإضافية وضع الضوء (light mode) الذي يعرض صورة مصغّرة أولًا ويحمّل المشغّل الكامل بعد تفاعل المستخدم، ودعم صور مصغّرة مخصصة، وتخطيط متجاوب عبر أنماط width وheight وaspect-ratio، والتوافق مع واجهات تحكم مخصصة مثل Media Chrome. منذ الإصدار 3، يدعم ReactPlayer أيضًا عناصر أطفال متعددة للصور والمسابك بطريقة تشبه عناصر الفيديو والصوت الأصلية في HTML، ما يمكّن من تنسيقات بديلة ومسارات الترجمة. يوضح ملف README أن الإصدار 3 يمثل تحديثًا معماريًا كبيرًا ولا يتوافق مع الإصدار 2، وأن الصيانة تُدار حاليًا بواسطة Mux مع استمرار كونه مفتوح المصدر.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.