Ustvarjanje video predvajalnika v Reactu se morda zdi zahtevna naloga. Toda s pravimi orodji in tehnikami lahko to storite razmeroma enostavno.
Video predvajalnik v Reactu lahko ustvarite na dva načina: z uporabo vgrajenih funkcij in z uporabo knjižnic tretjih oseb.
Ustvarjanje video predvajalnika v Reactu
Preden ustvarite video predvajalnik React, se prepričajte, da imate osnovno razumevanje HTML, CSS in JavaScript.
Začni z ustvarjanje osnovne aplikacije React da dodate naslednjo funkcijo video predvajalnika.
Uporaba vgrajenih funkcij (React Hooks)
Prva možnost za ustvarjanje video predvajalnika v Reactu je uporaba vgrajenih funkcij.
Začnite z ustvarjanjem komponente predvajalnika, ki bo prikazala video in vse njegove kontrole. Če želite to narediti, ustvarite datoteko z imenom “Player.js” in dodajte to kodo:
uvoz Reagiraj od 'reagirati';konst Igralec = () => {
vrnitev (
<div>
<širina videa="100%" višina="100%" kontrole>
<vir src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" vrsta="video/mp4" />
</video>
</div>
)
}izvozprivzeto igralec;
Ta koda uvozi knjižnico React in ustvari komponento predvajalnika. Doda tudi video element z atributom controls, nastavljenim na »true«. To bo na stran dodalo osnovni video predvajalnik.
Nato dodajte gumb za predvajanje/pavzo. Če želite to narediti, boste morali komponenti predvajalnika dodati nekaj vrstic kode. Dodajte to kodo v datoteko Player.js:
uvoz Reagiraj, {useState, useRef} od 'reagirati';konst Igralec = () => {
konst [isPlaying, setIsPlaying] = useState(lažno);
konst videoRef = useRef(nič);
konst togglePlay = () => {
if (isPlaying) {
video Ref.trenutno.pavza();
} drugače {
video Ref.trenutno.play();
}
setIsPlaying(!isPlaying);
};
vrnitev (
<div>
<video
ref={videoRef}
širina="100%"
višina="100%"
kontrole
>
<vir src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" vrsta="video/mp4" />
</video>
<gumb onClick={togglePlay}>
{igra? "Pavza": "Igraj"}
</button>
</div>
)
}
izvozprivzeto igralec;
Ta koda uporablja kljuki useState in useRef za spremljanje stanja videa (ali se predvaja ali je zaustavljen) in sklicevanja na video element. Doda tudi funkcijo togglePlay, ki predvaja in začasno ustavi video. Element gumba bo sprožil funkcijo togglePlay.
Zadnji korak je dodajanje vrstice napredka. Če želite to narediti, boste morali v datoteko Player.js dodati še nekaj vrstic kode. Dodajte naslednje:
uvoz Reagiraj, {useState, useRef} od 'reagirati';konst Igralec = () => {
konst [isPlaying, setIsPlaying] = useState(lažno);
konst [napredek, setProgress] = useState(0);
konst videoRef = useRef(nič);
konst togglePlay = () => {
if (isPlaying) {
video Ref.trenutno.pavza();
} drugače {
video Ref.trenutno.play();
}
setIsPlaying(!isPlaying);
};
konst handleProgress = () => {
konst trajanje = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst napredek = (trenutni čas / trajanje) * 100;
setProgress (napredek);
};
vrnitev (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
širina="100%"
višina="100%"
kontrole
>
<vir src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" vrsta="video/mp4" />
</video>
<div>
<gumb onClick={togglePlay}>
{igra? "Pavza": "Igraj"}
</button>
<napredek value={progress} max="100" />
</div>
</div>
)
}
izvozprivzeto igralec;
Ta koda doda funkcijo handleProgress. Ta funkcija bo posodobila vrstico napredka. Video elementu doda tudi poslušalca dogodkov onTimeUpdate, ki bo sprožil funkcijo handleProgress. Na koncu doda element napredka na stran z atributoma value in max, nastavljenima na napredek oziroma 100.
Uporaba knjižnic tretjih oseb
Druga možnost za ustvarjanje video predvajalnika v Reactu je uporaba knjižnic tretjih oseb. Na voljo je veliko knjižnic, vendar sta nekateri najbolj priljubljeni ReactPlayer in React-media-player.
ReactPlayer
ReactPlayer je preprosta, lahka knjižnica, ki vam omogoča ustvarjanje video predvajalnika z le nekaj vrsticami kode. Če ga želite namestiti, zaženite naslednji ukaz v terminalu:
npm namestite odzivni igralecKo je nameščen, ga lahko uporabljate takole:
uvoz Reagiraj od 'reagirati';
uvoz ReactPlayer od 'odzivni igralec';konst Igralec = () => {
vrnitev (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
širina="100%"
višina="100%"
kontrole
/>
)
}
izvozprivzeto igralec;
Ta koda uvozi komponento ReactPlayer iz knjižnice react-player in jo doda na stran. Nastavi url, širino, višino in atribute kontrolnikov. Oglejte si vsakega od teh parametrov enega za drugim:
- url: To je URL videoposnetka, ki ga želite predvajati.
- premer: To je širina video predvajalnika.
- višina: To je višina video predvajalnika.
- kontrole: To je logični atribut, ki določa, ali bo video predvajalnik imel kontrole ali ne.
predvajalnik-video-js-react
react-video-js-player je še ena preprosta, lahka knjižnica, ki vam omogoča ustvarjanje video predvajalnika s samo nekaj vrsticami kode. Če ga želite namestiti, zaženite naslednji ukaz v terminalu:
npm namestite predvajalnik-video-js-reactKo je nameščen, ga lahko uporabljate takole:
uvoz Reagiraj od "reagirati";
uvoz VideoPlayer od "react-video-js-player";konst Igralec = () => {
vrnitev (
<VideoPlayer
širina="100%"
višina="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
kontrole
/>
)
}
izvozprivzeto igralec;
Ta koda uvozi komponento VideoPlayer iz knjižnice react-video-js-player in jo doda na stran.
Dodatne funkcije video predvajalnika
Videopredvajalniku lahko dodate dodatne funkcije, kot so:
- Dodajanje plakata: Svojemu videopredvajalniku lahko dodate sliko plakata tako, da nastavite atribut poster video elementa na URL slike.
- Zanka: Videoposnetek lahko zankate tako, da atribut zanke video elementa nastavite na »true«.
- Utišan: Videoposnetek lahko utišate tako, da atribut utišanega video elementa nastavite na »true«.
- Samodejno predvajanje: Svoj video lahko samodejno predvajate tako, da atribut samodejnega predvajanja video elementa nastavite na »true«.
Videopredvajalniku lahko dodate tudi lastne kontrolnike po meri. Če želite to narediti, boste morali video elementu dodati poslušalce dogodkov in napisati funkcije za nadzor videa.
Povečajte angažiranost uporabnikov z video predvajalnikom
S pravimi orodji in tehnikami lahko preprosto ustvarite video predvajalnik v Reactu. Dodate lahko tudi dodatne funkcije za povečanje angažiranosti uporabnikov. Medijski predvajalniki so odličen način za povečanje angažiranosti uporabnikov na vašem spletnem mestu ali aplikaciji.
Ko na svoje spletno mesto dodate predvajalnik videoposnetkov, ne pozabite spremljati angažiranosti uporabnikov, da vidite, ali ima želeni učinek. Uporabite lahko tudi testiranje A/B, da vidite, ali dodajanje video predvajalnika poveča stopnjo konverzije.
