كيفية إنشاء مُشغِل فيديو في React

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

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

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

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

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

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

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

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

import React from ‘react’;

const Player = () => {
 return (
 <div>
 <video width=”100%” height=”100%” controls>
 <source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
 </video>
 </div>
 )
}

export default Player;

تستورد هذه التعليمات البرمجية مكتبة React وتُنشئ مُكوِّن المُشغِّل. كما أنها تُضيف عنصر فيديو مع تعيين سمة عناصر التحكم على “true”. سيؤدي هذا إلى إضافة مُشغِّل الفيديو الأساسي إلى الصفحة.

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

import React, { useState, useRef } from ‘react’;

const Player = () => {
 const [isPlaying, setIsPlaying] = useState(false);
 const videoRef = useRef(null);

const togglePlay = () => {
 if (isPlaying) {
 videoRef.current.pause();
 } else {
 videoRef.current.play();
 }
 setIsPlaying(!isPlaying);
 };

return (
 <div>
 <video
 ref={videoRef}
 width=”100%”
 height=”100%”
 controls
 >
 <source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
 </video>
 <button onClick={togglePlay}>
 {isPlaying ? “Pause” : “Play”}
 </button>
 </div>
 )
}

export default Player;

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

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

import React, { useState, useRef } from ‘react’;

const Player = () => {
 const [isPlaying, setIsPlaying] = useState(false);
 const [progress, setProgress] = useState(0);
 const videoRef = useRef(null);

const togglePlay = () => {
 if (isPlaying) {
 videoRef.current.pause();
 } else {
 videoRef.current.play();
 }
 setIsPlaying(!isPlaying);
 };

const handleProgress = () => {
 const duration = videoRef.current.duration;
 const currentTime = videoRef.current.currentTime;
 const progress = (currentTime / duration) * 100;
 setProgress(progress);
 };
 return (
 <div>
 <video
 onTimeUpdate={handleProgress}
 ref={videoRef}
 width=”100%”
 height=”100%”
 controls
 >
 <source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
 </video>
 <div>
 <button onClick={togglePlay}>
 {isPlaying ? “Pause” : “Play”}
 </button>
 <progress value={progress} max=”100" />
 </div>
 </div>
 )
}

export default Player;

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

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

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

ReactPlayer

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

npm install react-player

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

import React from ‘react’;
import ReactPlayer from ‘react-player’;

const Player = () => {
 return (
 <ReactPlayer
 url=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
 width=”100%”
 height=”100%”
 controls
 />
 )
}

export default Player;

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

1. url: هذا هو عنوان URL للفيديو الذي تُريد تشغيله.
2. width: هذا هو عرض مُشغِّل الفيديو.
3. height: هذا هو ارتفاع مُشغِّل الفيديو.
4. controls: هذه سمة منطقية تُحدد ما إذا كان مُشغِّل الفيديو سيتضمن عناصر تحكم أم لا.

react-video-js-player

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

npm install react-video-js-player

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

import React from “react”;
import VideoPlayer from “react-video-js-player”;

const Player = () => {
 return (
 <VideoPlayer
 width=”100%”
 height=”100%”
 src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
 controls
 />
 )
}

export default Player;

يستورد هذا الكود مُكوِّن VideoPlayer من مكتبة react-video-js-player ويُضيفه إلى الصفحة.

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

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

1. إضافة ملصق: يمكنك إضافة صورة ملصق إلى مُشغِّل الفيديو الخاص بك عن طريق تعيين سمة “poster” لعنصر الفيديو على عنوان URL للصورة.
2. التكرار الحلقي: يُمكنك تكرار مقطع الفيديو الخاص بك عن طريق تعيين سمة “loop” لعنصر الفيديو على “True”.
3. كتم الصوت: يمكنك كتم صوت الفيديو عن طريق تعيين سمة “muted” لعنصر الفيديو على “True”.
4. التشغيل التلقائي: يُمكنك تشغيل الفيديو تلقائيًا عن طريق تعيين سمة “autoplay” لعنصر الفيديو على “True”.

يُمكنك أيضًا إضافة عناصر التحكم المخصصة الخاصة بك إلى مُشغِّل الفيديو. للقيام بذلك ، ستحتاج إلى إضافة مُستمعين للأحداث إلى عنصر الفيديو وكتابة دوال للتحكم في الفيديو. تحقق من أفضل الطرق لإصلاح خطأ “لا يمكن تشغيل هذا الفيديو” على Google Drive.

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

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

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