Stvaranje video playera u Reactu može se činiti kao izazovan zadatak. Ali s pravim alatima i tehnikama to možete učiniti s relativnom lakoćom.
Postoje dva načina za stvaranje videoplayera u Reactu: korištenjem ugrađenih značajki i korištenjem biblioteka trećih strana.
Stvaranje video playera u Reactu
Prije izrade React video playera, provjerite imate li osnovno razumijevanje HTML-a, CSS-a i JavaScripta.
Počni od stvaranje osnovne React aplikacije za dodavanje sljedeće funkcije video playera.
Korištenje ugrađenih značajki (React Hooks)
Prva opcija za stvaranje videoplayera u Reactu je korištenje ugrađenih značajki.
Započnite stvaranjem komponente playera koja će prikazati video i sve njegove kontrole. Da biste to učinili, kreirajte datoteku pod nazivom “Player.js” i dodajte sljedeći kod:
uvoz Reagirati iz 'reagirati';konst Igrač = () => {
povratak (
<div>
<širina videa=
"100%" visina="100%" kontrole>
<izvor src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" vrsta="video/mp4" />
</video>
</div>
)
}izvozzadano Igrač;
Ovaj kod uvozi biblioteku React i stvara komponentu playera. Također dodaje video element s atributom kontrola postavljenim na "true". Ovo će dodati osnovni video player na stranicu.
Zatim dodajte gumb za reprodukciju/pauzu. Da biste to učinili, morat ćete dodati nekoliko redaka koda u komponentu playera. Dodajte sljedeći kod u datoteku Player.js:
uvoz Reagiraj, {useState, useRef} iz 'reagirati';konst Igrač = () => {
konst [isPlaying, setIsPlaying] = useState(lažno);
konst videoRef = useRef(ništavan);
konst togglePlay = () => {
if (isPlaying) {
video Ref.Trenutno.pauza();
} drugo {
video Ref.Trenutno.igra();
}
setIsPlaying(!isPlaying);
};
povratak (
<div>
<video
ref={videoRef}
širina="100%"
visina="100%"
kontrole
>
<izvor src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" vrsta="video/mp4" />
</video>
<gumb onClick={togglePlay}>
{igra se? "Pauza": "igra"}
</button>
</div>
)
}
izvozzadano Igrač;
Ovaj kod koristi kuke useState i useRef kako biste pratili stanje videozapisa (reproducira li se ili je pauziran) i referencu na videoelement. Također dodaje funkciju togglePlay koja će reproducirati i pauzirati video. Element gumba pokrenut će funkciju togglePlay.
Zadnji korak je dodavanje trake napretka. Da biste to učinili, morat ćete dodati još nekoliko redaka koda u datoteku Player.js. Dodajte sljedeće:
uvoz Reagiraj, {useState, useRef} iz 'reagirati';konst Igrač = () => {
konst [isPlaying, setIsPlaying] = useState(lažno);
konst [napredak, setProgress] = useState(0);
konst videoRef = useRef(ništavan);
konst togglePlay = () => {
if (isPlaying) {
video Ref.Trenutno.pauza();
} drugo {
video Ref.Trenutno.igra();
}
setIsPlaying(!isPlaying);
};
konst handleProgress = () => {
konst trajanje = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst napredak = (trenutno vrijeme / trajanje) * 100;
setProgress (napredak);
};
povratak (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
širina="100%"
visina="100%"
kontrole
>
<izvor src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" vrsta="video/mp4" />
</video>
<div>
<gumb onClick={togglePlay}>
{igra se? "Pauza": "igra"}
</button>
<vrijednost napretka={napredak} max="100" />
</div>
</div>
)
}
izvozzadano Igrač;
Ovaj kod dodaje funkciju handleProgress. Ova funkcija će ažurirati traku napretka. Također dodaje onTimeUpdate slušatelja događaja u video element koji će pokrenuti funkciju handleProgress. Naposljetku, dodaje element napretka na stranicu s atributima value i max postavljenim na napredak odnosno 100.
Korištenje biblioteka trećih strana
Druga opcija za stvaranje videoplayera u Reactu je korištenje biblioteka trećih strana. Postoji mnogo dostupnih biblioteka, ali neke od najpopularnijih su ReactPlayer i React-media-player.
ReactPlayer
ReactPlayer je jednostavna, lagana biblioteka koja vam omogućuje stvaranje video playera sa samo nekoliko redaka koda. Da biste ga instalirali, pokrenite sljedeću naredbu na vašem terminalu:
npm instalirati reagirati-igračNakon instaliranja, možete ga koristiti ovako:
uvoz Reagirati iz 'reagirati';
uvoz ReactPlayer iz 'reagirati-igrač';konst Igrač = () => {
povratak (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
širina="100%"
visina="100%"
kontrole
/>
)
}
izvozzadano Igrač;
Ovaj kod uvozi ReactPlayer komponentu iz react-player biblioteke i dodaje je na stranicu. Postavlja url, širinu, visinu i atribute kontrola. Pogledajte svaki od ovih parametara jedan po jedan:
- url: Ovo je URL videozapisa koji želite reproducirati.
- širina: Ovo je širina video playera.
- visina: Ovo je visina video playera.
- kontrole: Ovo je Booleov atribut koji određuje hoće li video player imati kontrole ili ne.
react-video-js-player
react-video-js-player je još jedna jednostavna, lagana biblioteka koja vam omogućuje stvaranje video playera sa samo nekoliko redaka koda. Da biste ga instalirali, pokrenite sljedeću naredbu na vašem terminalu:
npm instalirati react-video-js-playerNakon instaliranja, možete ga koristiti ovako:
uvoz Reagirati iz "reagirati";
uvoz VideoPlayer iz "react-video-js-player";konst Igrač = () => {
povratak (
<VideoPlayer
širina="100%"
visina="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
kontrole
/>
)
}
izvozzadano Igrač;
Ovaj kod uvozi komponentu VideoPlayer iz biblioteke react-video-js-player i dodaje je na stranicu.
Dodatne značajke video playera
Video playeru možete dodati dodatne značajke, kao što su:
- Dodavanje postera: Možete dodati sliku postera u svoj videoplayer postavljanjem atributa postera videoelementa na URL slike.
- Petlja: Svoj video možete ponavljati tako da atribut petlje videoelementa postavite na "true".
- Prigušen: Videozapis možete isključiti postavljanjem muted atributa video elementa na "true".
- Auto Play: Videozapis možete automatski reproducirati postavljanjem atributa automatske reprodukcije video elementa na "true".
Videoplayeru također možete dodati vlastite prilagođene kontrole. Da biste to učinili, morat ćete dodati slušatelje događaja video elementu i napisati funkcije za kontrolu videa.
Povećajte angažman korisnika pomoću video playera
S pravim alatima i tehnikama, možete jednostavno stvoriti video player u Reactu. Također možete dodati dodatne značajke kako biste povećali angažman korisnika. Media playeri izvrstan su način za povećanje angažmana korisnika na vašoj web stranici ili aplikaciji.
Nakon dodavanja videoplayera na svoju stranicu, svakako pratite angažman korisnika da vidite ima li željeni učinak. Također možete primijeniti A/B testiranje kako biste vidjeli povećava li dodavanje video playera stope konverzije.
