Å lage en videospiller i React kan virke som en utfordrende oppgave. Men med de riktige verktøyene og teknikkene kan du gjøre det relativt enkelt.
Det er to måter å lage en videospiller i React: ved å bruke innebygde funksjoner og ved å bruke tredjepartsbiblioteker.
Opprette en videospiller i React
Før du oppretter en React-videospiller, sørg for at du har en grunnleggende forståelse av HTML, CSS og JavaScript.
Start med lage en grunnleggende React-app for å legge til følgende videospillerfunksjonalitet.
Bruke innebygde funksjoner (React Hooks)
Det første alternativet for å lage en videospiller i React er å bruke innebygde funksjoner.
Start med å lage spillerkomponenten som viser videoen og alle kontrollene. For å gjøre dette, lag en fil kalt "Player.js" og legg til følgende kode:
import Reagere fra 'reagere';konst Spiller = () => {
komme tilbake (
<
div>
<videobredde="100%" høyde="100%" kontroller>
<kilde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
)
}eksportmisligholde Spiller;
Denne koden importerer React-biblioteket og lager en spillerkomponent. Den legger også til et videoelement med kontrollattributtet satt til "true". Dette vil legge til den grunnleggende videospilleren til siden.
Deretter legger du til spill/pause-knappen. For å gjøre dette, må du legge til noen få linjer med kode til spillerkomponenten. Legg til følgende kode i Player.js-filen:
import Reager, { useState, useRef } fra 'reagere';konst Spiller = () => {
konst [isPlaying, setIsPlaying] = useState(falsk);
konst videoRef = brukRef(null);
konst togglePlay = () => {
if (spiller) {
videoRef.nåværende.pause();
} ellers {
videoRef.nåværende.spille();
}
setIsPlaying(!isPlaying);
};
komme tilbake (
<div>
<video
ref={videoRef}
bredde="100%"
høyde="100%"
kontroller
>
<kilde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<button onClick={togglePlay}>
{spiller? "Pause": "Spille"}
</button>
</div>
)
}
eksportmisligholde Spiller;
Denne koden bruker hektene useState og useRef for å holde styr på tilstanden til videoen (enten den spilles av eller er satt på pause) og referansen til videoelementet. Den legger også til en togglePlay-funksjon som vil spille av og sette videoen på pause. Knappeelementet vil utløse togglePlay-funksjonen.
Det siste trinnet er å legge til fremdriftslinjen. For å gjøre dette, må du legge til noen flere linjer med kode i filen Player.js. Legg til følgende:
import Reager, { useState, useRef } fra 'reagere';konst Spiller = () => {
konst [isPlaying, setIsPlaying] = useState(falsk);
konst [progress, setProgress] = useState(0);
konst videoRef = brukRef(null);
konst togglePlay = () => {
if (spiller) {
videoRef.nåværende.pause();
} ellers {
videoRef.nåværende.spille();
}
setIsPlaying(!isPlaying);
};
konst handleProgress = () => {
konst varighet = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst fremgang = (nåværendeTid / varighet) * 100;
setProgress (fremgang);
};
komme tilbake (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
bredde="100%"
høyde="100%"
kontroller
>
<kilde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{spiller? "Pause": "Spille"}
</button>
<fremdriftsverdi={progress} maks="100" />
</div>
</div>
)
}
eksportmisligholde Spiller;
Denne koden legger til handleProgress-funksjonen. Denne funksjonen vil oppdatere fremdriftslinjen. Den legger også til en onTimeUpdate-hendelseslytter til videoelementet som vil utløse handleProgress-funksjonen. Til slutt legger den til et fremdriftselement på siden med verdi- og maksattributtene satt til henholdsvis fremdriften og 100.
Bruke tredjepartsbiblioteker
Det andre alternativet for å lage en videospiller i React er å bruke tredjepartsbiblioteker. Det er mange biblioteker tilgjengelig, men noen av de mest populære er ReactPlayer og React-media-player.
ReactPlayer
ReactPlayer er et enkelt, lett bibliotek som lar deg lage en videospiller med bare noen få linjer med kode. For å installere den, kjør følgende kommando i terminalen din:
npm installere reagere-spillerNår den er installert, kan du bruke den slik:
import Reagere fra 'reagere';
import ReactPlayer fra 'reager-spiller';konst Spiller = () => {
komme tilbake (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
bredde="100%"
høyde="100%"
kontroller
/>
)
}
eksportmisligholde Spiller;
Denne koden importerer ReactPlayer-komponenten fra react-player-biblioteket og legger den til siden. Den angir url, bredde, høyde og kontrollerer attributter. Ta en titt på hver av disse parameterne én etter én:
- url: Dette er nettadressen til videoen du vil spille av.
- bredde: Dette er bredden på videospilleren.
- høyde: Dette er høyden på videospilleren.
- kontroller: Dette er et boolsk attributt som bestemmer om videospilleren skal ha kontroller eller ikke.
react-video-js-player
react-video-js-player er et annet enkelt, lett bibliotek som lar deg lage en videospiller med bare noen få linjer med kode. For å installere den, kjør følgende kommando i terminalen din:
npm installere react-video-js-playerNår den er installert, kan du bruke den slik:
import Reagere fra "reagere";
import Videospiller fra "react-video-js-player";konst Spiller = () => {
komme tilbake (
<Videospiller
bredde="100%"
høyde="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
kontroller
/>
)
}
eksportmisligholde Spiller;
Denne koden importerer VideoPlayer-komponenten fra react-video-js-player-biblioteket og legger den til siden.
Ytterligere videospillerfunksjoner
Du kan legge til ekstra funksjoner til videospilleren din, for eksempel:
- Legge til en plakat: Du kan legge til et plakatbilde til videospilleren din ved å sette plakatattributtet til videoelementet til URL-en til bildet.
- Looping: Du kan loope videoen din ved å sette loop-attributtet til videoelementet til "true".
- Dempet: Du kan dempe videoen din ved å sette muted-attributtet til videoelementet til «true».
- Auto spill: Du kan spille av videoen din automatisk ved å sette autoplay-attributtet til videoelementet til «true».
Du kan også legge til dine egne tilpassede kontroller til videospilleren. For å gjøre dette, må du legge til hendelseslyttere til videoelementet og skrivefunksjoner for å kontrollere videoen.
Øk brukerengasjementet med en videospiller
Med de riktige verktøyene og teknikkene kan du enkelt lage en videospiller i React. Du kan også legge til flere funksjoner for å øke brukerengasjementet. Mediespillere er en fin måte å øke brukerengasjementet på nettstedet eller applikasjonen din.
Etter å ha lagt til en videospiller på nettstedet ditt, sørg for å spore brukerengasjement for å se om det har ønsket effekt. Du kan også implementere A/B-testing for å se om konverteringsfrekvensen øker ved å legge til en videospiller.
