Cum se creează un player video în React

Crearea unui player video în React poate părea o sarcină dificilă. Dar cu instrumentele și tehnicile potrivite, puteți face acest lucru cu relativă ușurință.

Există două moduri de a crea un player video în React: folosind funcții încorporate și folosind biblioteci terțe.

Crearea unui player video în React

Înainte de a crea un player video React, asigurați-vă că aveți cunoștințe de bază despre HTML, CSS și JavaScript.

Începe prin crearea unei aplicații React de bază pentru a adăuga următoarea funcționalitate de player video la.

Utilizarea caracteristicilor încorporate (React Hooks)

Prima opțiune de a crea un player video în React este utilizarea funcțiilor încorporate.

Începeți prin a crea componenta player care va afișa videoclipul și toate comenzile sale. Pentru a face acest lucru, creați un fișier numit „Player.js” și adăugați următorul cod:

import Reacţiona din 'reacţiona';

const Jucător = () => {
întoarcere (
<div>
<lățimea video="100%" inaltime="100%" controale>
<sursa src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tip="video/mp4" />
</video>
</div>
)
}

exportMod implicit Jucător;

Acest cod importă biblioteca React și creează o componentă de player. De asemenea, adaugă un element video cu atributul de control setat la „adevărat”. Aceasta va adăuga playerul video de bază pe pagină.

Apoi, adăugați butonul de redare/pauză. Pentru a face acest lucru, va trebui să adăugați câteva linii de cod la componenta playerului. Adăugați următorul cod în fișierul Player.js:

import Reacționează, { useState, useRef } din 'reacţiona';

const Jucător = () => {
const [se joacă, set se joacă] = useState(fals);
const videoRef = useRef(nul);

const togglePlay = () => {
dacă (se joacă) {
videoRef.actual.pauză();
} altfel {
videoRef.actual.Joaca();
}
setIsPlaying(!isPlaying);
};

întoarcere (
<div>
<video
ref={videoRef}
latime="100%"
inaltime="100%"
controale
>
<sursa src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tip="video/mp4" />
</video>
<butonul onClick={togglePlay}>
{se joacă? "Pauză": "Joaca"}
</button>
</div>
)
}

exportMod implicit Jucător;

Acest cod folosește cârligele useState și useRef pentru a urmări starea videoclipului (indiferent dacă este redat sau întrerupt) și referința la elementul video. De asemenea, adaugă o funcție togglePlay care va reda și întrerupe videoclipul. Elementul buton va declanșa funcția togglePlay.

Ultimul pas este adăugarea barei de progres. Pentru a face acest lucru, va trebui să adăugați câteva linii de cod în fișierul Player.js. Adăugați următoarele:

import Reacționează, { useState, useRef } din 'reacţiona';

const Jucător = () => {
const [se joacă, set se joacă] = useState(fals);
const [progres, setProgress] = useState(0);
const videoRef = useRef(nul);

const togglePlay = () => {
dacă (se joacă) {
videoRef.actual.pauză();
} altfel {
videoRef.actual.Joaca();
}
setIsPlaying(!isPlaying);
};

const handleProgress = () => {
const durata = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const progres = (currentTime / durata) * 100;
setProgress (progres);
};
întoarcere (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
latime="100%"
inaltime="100%"
controale
>
<sursa src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tip="video/mp4" />
</video>
<div>
<butonul onClick={togglePlay}>
{se joacă? "Pauză": "Joaca"}
</button>
<valoare progres={progres} max="100" />
</div>
</div>
)
}

exportMod implicit Jucător;

Acest cod adaugă funcția handleProgress. Această funcție va actualiza bara de progres. De asemenea, adaugă un ascultător de evenimente onTimeUpdate la elementul video care va declanșa funcția handleProgress. În cele din urmă, adaugă un element de progres la pagină cu atributele value și max setate la progres și, respectiv, 100.

Utilizarea bibliotecilor terțe

A doua opțiune pentru a crea un player video în React este să utilizați biblioteci terțe. Există multe biblioteci disponibile, dar unele dintre cele mai populare sunt ReactPlayer și React-media-player.

ReactPlayer

ReactPlayer este o bibliotecă simplă, ușoară, care vă permite să creați un player video cu doar câteva linii de cod. Pentru a-l instala, executați următoarea comandă în terminalul dvs.:

npm instalare reacționează-jucător

Odată instalat, îl puteți folosi astfel:

import Reacţiona din 'reacţiona';
import ReactPlayer din „jucător de reacție”;

const Jucător = () => {
întoarcere (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
latime="100%"
inaltime="100%"
controale
/>
)
}

exportMod implicit Jucător;

Acest cod importă componenta ReactPlayer din biblioteca react-player și o adaugă la pagină. Setează adresa URL, lățimea, înălțimea și atributele de control. Aruncă o privire la fiecare dintre acești parametri unul câte unul:

• url: Aceasta este adresa URL a videoclipului pe care doriți să-l redați.
• lăţime: Aceasta este lățimea playerului video.
• înălţime: Aceasta este înălțimea playerului video.
• controale: Acesta este un atribut boolean care determină dacă playerul video va avea controale sau nu.

react-video-js-player

react-video-js-player este o altă bibliotecă simplă, ușoară, care vă permite să creați un player video cu doar câteva linii de cod. Pentru a-l instala, executați următoarea comandă în terminalul dvs.:

npm instalare react-video-js-player

Odată instalat, îl puteți folosi astfel:

import Reacţiona din "reacţiona";
import Video player din „react-video-js-player”;

const Jucător = () => {
întoarcere (
<Video player
latime="100%"
inaltime="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controale
/>
)
}

exportMod implicit Jucător;

Acest cod importă componenta VideoPlayer din biblioteca react-video-js-player și o adaugă la pagină.

Funcții suplimentare de player video

Puteți adăuga funcții suplimentare la playerul dvs. video, cum ar fi:

1. Adăugarea unui poster: Puteți adăuga o imagine de poster la playerul dvs. video setând atributul poster al elementului video la adresa URL a imaginii.
2. Buclă: Puteți rezuma videoclipul setând atributul buclă al elementului video la „adevărat”.
3. Dezactivat: Puteți dezactiva sunetul videoclipului setând atributul dezactivat al elementului video la „adevărat”.
4. Redare automata: Puteți reda automat videoclipul setând atributul de redare automată al elementului video la „adevărat”.

De asemenea, puteți adăuga propriile comenzi personalizate la playerul video. Pentru a face acest lucru, va trebui să adăugați ascultători de evenimente la elementul video și să scrieți funcții pentru a controla videoclipul.

Creșteți implicarea utilizatorilor cu un player video

Cu instrumentele și tehnicile potrivite, puteți crea cu ușurință un player video în React. De asemenea, puteți adăuga funcții suplimentare pentru a crește implicarea utilizatorilor. Playerele media sunt o modalitate excelentă de a crește implicarea utilizatorilor pe site-ul sau aplicația dvs.

După ce adăugați un player video pe site-ul dvs., asigurați-vă că urmăriți implicarea utilizatorilor pentru a vedea dacă are efectul dorit. De asemenea, puteți implementa testarea A/B pentru a vedea dacă adăugarea unui player video crește ratele de conversie.