القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

قد يبدو إنشاء مشغل فيديو في React مهمة صعبة. ولكن باستخدام الأدوات والتقنيات المناسبة ، يمكنك القيام بذلك بسهولة نسبية.

هناك طريقتان لإنشاء مشغل فيديو في React: استخدام الميزات المضمنة واستخدام مكتبات الطرف الثالث.

إنشاء مشغل فيديو في React

قبل إنشاء مشغل فيديو React ، تأكد من أن لديك فهمًا أساسيًا لـ HTML و CSS و JavaScript.

ابدأ ب إنشاء تطبيق React أساسي لإضافة وظائف مشغل الفيديو التالية إلى.

استخدام الميزات المضمنة (خطافات التفاعل)

الخيار الأول لإنشاء مشغل فيديو في React هو استخدام الميزات المدمجة.

ابدأ بإنشاء مكون المشغل الذي سيعرض الفيديو وجميع عناصر التحكم الخاصة به. للقيام بذلك ، قم بإنشاء ملف يسمى “Player.js” وأضف الكود التالي:

يستورد تتفاعل من 'تتفاعل'؛

مقدار ثابت اللاعب = () => {
يعود (
<شعبة>
<عرض الفيديو ="100%" الارتفاع ="100%" ضوابط>
<المصدر src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" اكتب ="فيديو / mp4" />
</video>
</div>
)
}

instagram viewer

يصدّرتقصير لاعب؛

يستورد هذا الرمز مكتبة React وينشئ مكون المشغل. كما أنه يضيف عنصر فيديو مع تعيين سمة الضوابط على "صواب". سيؤدي هذا إلى إضافة مشغل الفيديو الأساسي إلى الصفحة.

بعد ذلك ، أضف زر التشغيل / الإيقاف المؤقت. للقيام بذلك ، ستحتاج إلى إضافة بضعة أسطر من التعليمات البرمجية إلى مكون المشغل. أضف التعليمات البرمجية التالية إلى ملف Player.js:

يستورد رد فعل ، {useState ، useRef} من 'تتفاعل'؛

مقدار ثابت اللاعب = () => {
مقدار ثابت [isPlaying، setIsPlaying] = useState (خطأ شنيع);
مقدار ثابت videoRef = useRef (باطل);

مقدار ثابت togglePlay = () => {
إذا (قيد التشغيل) {
فيديو.حاضِر.يوقف();
} آخر {
فيديو.حاضِر.يلعب();
}
setIsPlaying (! isPlaying) ،
};

يعود (
<شعبة>
<فيديو
المرجع = {videoRef}
العرض ="100%"
الارتفاع ="100%"
ضوابط
>
<المصدر src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" اكتب ="فيديو / mp4" />
</video>
<زر onClick = {togglePlay}>
{هو يلعب؟ "يوقف": "يلعب"}
</button>
</div>
)
}

يصدّرتقصير لاعب؛

يستخدم هذا الرمز خطافات useState و useRef لتتبع حالة الفيديو (سواء كان قيد التشغيل أو متوقفًا مؤقتًا) والإشارة إلى عنصر الفيديو. كما أنه يضيف وظيفة togglePlay التي ستقوم بتشغيل الفيديو وإيقافه مؤقتًا. سيؤدي عنصر الزر إلى تشغيل وظيفة togglePlay.

الخطوة الأخيرة هي إضافة شريط التقدم. للقيام بذلك ، ستحتاج إلى إضافة بضعة أسطر من التعليمات البرمجية إلى ملف Player.js. يضاف ما يلي:

يستورد رد فعل ، {useState ، useRef} من 'تتفاعل'؛

مقدار ثابت اللاعب = () => {
مقدار ثابت [isPlaying، setIsPlaying] = useState (خطأ شنيع);
مقدار ثابت [التقدم ، setProgress] = useState (0);
مقدار ثابت videoRef = useRef (باطل);

مقدار ثابت togglePlay = () => {
إذا (قيد التشغيل) {
فيديو.حاضِر.يوقف();
} آخر {
فيديو.حاضِر.يلعب();
}
setIsPlaying (! isPlaying) ،
};

مقدار ثابت handleProgress = () => {
مقدار ثابت المدة = videoRef.current.duration ؛
مقدار ثابت CurrentTime = videoRef.current.currentTime ؛
مقدار ثابت التقدم = (الوقت الحالي / المدة) * 100;
setProgress (التقدم) ؛
};
يعود (
<شعبة>
<فيديو
onTimeUpdate = {handleProgress}
المرجع = {videoRef}
العرض ="100%"
الارتفاع ="100%"
ضوابط
>
<المصدر src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" اكتب ="فيديو / mp4" />
</video>
<شعبة>
<زر onClick = {togglePlay}>
{هو يلعب؟ "يوقف": "يلعب"}
</button>
<قيمة التقدم = {progress} max ="100" />
</div>
</div>
)
}

يصدّرتقصير لاعب؛

يضيف هذا الرمز الدالة handleProgress. ستعمل هذه الوظيفة على تحديث شريط التقدم. يضيف أيضًا مستمع حدث onTimeUpdate إلى عنصر الفيديو الذي سيؤدي إلى تشغيل وظيفة handleProgress. أخيرًا ، يضيف عنصر تقدم إلى الصفحة مع تعيين سمات القيمة والحد الأقصى للتقدم و 100 على التوالي.

استخدام مكتبات الطرف الثالث

الخيار الثاني لإنشاء مشغل فيديو في React هو استخدام مكتبات الطرف الثالث. هناك العديد من المكتبات المتاحة ، ولكن من أشهرها ReactPlayer و React-media-player.

ReactPlayer

ReactPlayer هي مكتبة بسيطة وخفيفة الوزن تسمح لك بإنشاء مشغل فيديو ببضعة سطور من التعليمات البرمجية. لتثبيته ، قم بتشغيل الأمر التالي في جهازك الطرفي:

npm ثَبَّتَ رد فعل لاعب

بمجرد التثبيت ، يمكنك استخدامه على النحو التالي:

يستورد تتفاعل من 'تتفاعل'؛
يستورد ReactPlayer من "رد فعل لاعب".

مقدار ثابت اللاعب = () => {
يعود (
<ReactPlayer
url ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
العرض ="100%"
الارتفاع ="100%"
ضوابط
/>
)
}

يصدّرتقصير لاعب؛

تستورد هذه الشفرة مكون ReactPlayer من مكتبة لاعب التفاعل ويضيفها إلى الصفحة. يقوم بتعيين سمات عنوان url والعرض والارتفاع وعناصر التحكم. ألق نظرة على كل من هذه المعلمات واحدة تلو الأخرى:

  • عنوان url: هذا هو عنوان URL للفيديو الذي تريد تشغيله.
  • عرض: هذا هو عرض مشغل الفيديو.
  • ارتفاع: هذا هو ارتفاع مشغل الفيديو.
  • ضوابط: هذه سمة منطقية تحدد ما إذا كان مشغل الفيديو سيتضمن عناصر تحكم أم لا.

رد فعل فيديو شبيبة لاعب

رد فعل- video-js-player هو مكتبة أخرى بسيطة وخفيفة الوزن تسمح لك بإنشاء مشغل فيديو ببضعة سطور من التعليمات البرمجية. لتثبيته ، قم بتشغيل الأمر التالي في جهازك الطرفي:

npm ثَبَّتَ رد فعل فيديو شبيبة لاعب

بمجرد التثبيت ، يمكنك استخدامه على النحو التالي:

يستورد تتفاعل من "تتفاعل"؛
يستورد مشغل فديوهات من "رد فعل الفيديو js لاعب" ؛

مقدار ثابت اللاعب = () => {
يعود (
<مشغل فديوهات
العرض ="100%"
الارتفاع ="100%"
src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
ضوابط
/>
)
}

يصدّرتقصير لاعب؛

يستورد هذا الرمز مكون VideoPlayer من مكتبة رد فعل الفيديو js-player ويضيفه إلى الصفحة.

ميزات مشغل الفيديو الإضافية

يمكنك إضافة ميزات إضافية إلى مشغل الفيديو الخاص بك ، مثل:

  1. إضافة ملصق: يمكنك إضافة صورة ملصق إلى مشغل الفيديو الخاص بك عن طريق تعيين سمة الملصق لعنصر الفيديو على عنوان URL للصورة.
  2. التكرار: يمكنك تكرار مقطع الفيديو الخاص بك عن طريق تعيين سمة الحلقة لعنصر الفيديو على "صحيح".
  3. كتم: يمكنك كتم صوت الفيديو الخاص بك عن طريق تعيين سمة كتم الصوت لعنصر الفيديو على "صحيح".
  4. تشغيل تلقائي: يمكنك تشغيل الفيديو تلقائيًا عن طريق تعيين سمة التشغيل التلقائي لعنصر الفيديو على "صحيح".

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

زيادة تفاعل المستخدم مع مشغل الفيديو

باستخدام الأدوات والتقنيات المناسبة ، يمكنك بسهولة إنشاء مشغل فيديو في React. يمكنك أيضًا إضافة ميزات إضافية لزيادة مشاركة المستخدم. تعد مشغلات الوسائط طريقة رائعة لزيادة مشاركة المستخدم على موقع الويب أو التطبيق الخاص بك.

بعد إضافة مشغل فيديو إلى موقعك ، تأكد من تتبع تفاعل المستخدم لمعرفة ما إذا كان له التأثير المطلوب. يمكنك أيضًا نشر اختبار A / B لمعرفة ما إذا كانت إضافة مشغل فيديو تزيد من معدلات التحويل.