Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Създаването на видеоплейър в React може да изглежда като предизвикателна задача. Но с правилните инструменти и техники можете да го направите сравнително лесно.

Има два начина за създаване на видео плейър в React: използване на вградени функции и използване на библиотеки на трети страни.

Създаване на видео плейър в React

Преди да създадете React видео плейър, уверете се, че имате основни познания по HTML, CSS и JavaScript.

Започнете от създаване на основно приложение React за да добавите следната функционалност на видеоплейъра.

Използване на вградени функции (React Hooks)

Първата опция за създаване на видео плейър в React е да използвате вградени функции.

Започнете, като създадете компонента на плейъра, който ще показва видеото и всички негови контроли. За да направите това, създайте файл, наречен „Player.js“ и добавете следния код:

импортиране
instagram viewer
Реагирайте от 'реагира';

конст Играч = () => {
връщане (
<див>
<ширина на видеото="100%" височина="100%" контроли>
<източник src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" тип="видео/mp4" />
</video>
</div>
)
}

износпо подразбиране Играч;

Този код импортира React библиотеката и създава компонент за плейър. Той също така добавя видео елемент с атрибута controls, зададен на „true“. Това ще добави основния видеоплейър към страницата.

След това добавете бутона за възпроизвеждане/пауза. За да направите това, ще трябва да добавите няколко реда код към компонента на плейъра. Добавете следния код към файла Player.js:

импортиране Реагирайте, {useState, useRef} от 'реагира';

конст Играч = () => {
конст [isPlaying, setIsPlaying] = useState(невярно);
конст videoRef = useRef(нула);

конст togglePlay = () => {
if (isPlaying) {
видеоRef.текущ.пауза();
} друго {
видеоRef.текущ.играй();
}
setIsPlaying(!isPlaying);
};

връщане (
<див>
<видео
ref={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 = () => {
if (isPlaying) {
видеоRef.текущ.пауза();
} друго {
видеоRef.текущ.играй();
}
setIsPlaying(!isPlaying);
};

конст handleProgress = () => {
конст продължителност = videoRef.current.duration;
конст currentTime = videoRef.current.currentTime;
конст прогрес = (текущо време / продължителност) * 100;
setProgress (напредък);
};
връщане (
<див>
<видео
onTimeUpdate={handleProgress}
ref={videoRef}
ширина="100%"
височина="100%"
контроли
>
<източник src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" тип="видео/mp4" />
</video>
<див>
<бутон onClick={togglePlay}>
{играе? "Пауза": "Играйте"}
</button>
<стойност на прогреса={прогрес} макс="100" />
</div>
</div>
)
}

износпо подразбиране Играч;

Този код добавя функцията handleProgress. Тази функция ще актуализира лентата за напредъка. Той също така добавя слушател на събития onTimeUpdate към видео елемента, който ще задейства функцията handleProgress. И накрая, той добавя елемент за напредък към страницата с атрибутите value и max, зададени съответно на прогреса и 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 от библиотеката на react-player и го добавя към страницата. Той задава URL адреса, ширината, височината и атрибутите на контролите. Разгледайте всеки от тези параметри един по един:

  • URL адрес: Това е URL адресът на видеоклипа, който искате да възпроизведете.
  • ширина: Това е ширината на видеоплейъра.
  • височина: Това е височината на видеоплейъра.
  • контроли: Това е булев атрибут, който определя дали видеоплейърът ще има контроли или не.

реагира-видео-js-плейър

react-video-js-player е друга проста, лека библиотека, която ви позволява да създадете видео плейър само с няколко реда код. За да го инсталирате, изпълнете следната команда във вашия терминал:

npm Инсталирай реагира-видео-js-плейър

Веднъж инсталиран, можете да го използвате по следния начин:

импортиране Реагирайте от "реагира";
импортиране Видео Плейър от "react-video-js-player";

конст Играч = () => {
връщане (
<Видео Плейър
ширина="100%"
височина="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
контроли
/>
)
}

износпо подразбиране Играч;

Този код импортира компонента VideoPlayer от библиотеката react-video-js-player и го добавя към страницата.

Допълнителни функции на видео плейъра

Можете да добавите допълнителни функции към вашия видеоплейър, като например:

  1. Добавяне на плакат: Можете да добавите изображение на плакат към вашия видеоплейър, като зададете атрибута на плакат на видео елемента на URL адреса на изображението.
  2. Зацикляне: Можете да повторите видеоклипа си, като зададете атрибута цикъл на видео елемента на „true“.
  3. Заглушен: Можете да заглушите видеоклипа си, като зададете заглушения атрибут на видео елемента на „true“.
  4. Автоматично изпълнение: Можете да пуснете видеоклипа си автоматично, като зададете атрибута за автоматично пускане на видео елемента на „истина“.

Можете също да добавите свои собствени персонализирани контроли към видеоплейъра. За да направите това, ще трябва да добавите слушатели на събития към видео елемента и да напишете функции за контрол на видеото.

Увеличете ангажираността на потребителите с видео плейър

С правилните инструменти и техники можете лесно да създадете видео плейър в React. Можете също да добавите допълнителни функции, за да увеличите ангажираността на потребителите. Медийните плейъри са чудесен начин да увеличите ангажираността на потребителите на вашия уебсайт или приложение.

След като добавите видеоплейър към вашия сайт, не забравяйте да проследите ангажираността на потребителите, за да видите дали има желания ефект. Можете също така да приложите A/B тестване, за да видите дали добавянето на видеоплейър увеличава процента на реализация.