At oprette en videoafspiller i React kan virke som en udfordrende opgave. Men med de rigtige værktøjer og teknikker, kan du gøre det med relativ lethed.
Der er to måder at oprette en videoafspiller i React: ved at bruge indbyggede funktioner og ved at bruge tredjepartsbiblioteker.
Oprettelse af en videoafspiller i React
Før du opretter en React-videoafspiller, skal du sørge for, at du har en grundlæggende forståelse af HTML, CSS og JavaScript.
Start med oprettelse af en grundlæggende React-app at tilføje følgende videoafspillerfunktionalitet til.
Brug af indbyggede funktioner (React Hooks)
Den første mulighed for at oprette en videoafspiller i React er at bruge indbyggede funktioner.
Start med at oprette afspillerkomponenten, som viser videoen og alle dens kontroller. For at gøre dette skal du oprette en fil kaldet "Player.js" og tilføje følgende kode:
importere Reagere fra 'reagere';konst Spiller = () => {
Vend tilbage (
<div>
<videobredde="100%" højde="100%" kontroller>
<kilde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
)
}
eksportStandard Spiller;
Denne kode importerer React-biblioteket og opretter en afspillerkomponent. Det tilføjer også et videoelement med kontrolattributten indstillet til "true". Dette vil tilføje den grundlæggende videoafspiller til siden.
Tilføj derefter afspil/pause-knappen. For at gøre dette skal du tilføje et par linjer kode til afspillerkomponenten. Tilføj følgende kode til filen Player.js:
importere React, { useState, useRef } fra 'reagere';konst Spiller = () => {
konst [isPlaying, setIsPlaying] = useState(falsk);
konst videoRef = useRef(nul);
konst togglePlay = () => {
if (spiller) {
videoRef.nuværende.pause();
} andet {
videoRef.nuværende.Spil();
}
setIsPlaying(!isPlaying);
};
Vend tilbage (
<div>
<video
ref={videoRef}
bredde ="100%"
højde="100%"
kontroller
>
<kilde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<knap onClick={togglePlay}>
{spiller? "Pause": "Spil"}
</button>
</div>
)
}
eksportStandard Spiller;
Denne kode bruger useState og useRef krogene for at holde styr på videoens tilstand (uanset om den afspilles eller er sat på pause) og referencen til videoelementet. Det tilføjer også en togglePlay-funktion, der afspiller og pauser videoen. Knapelementet vil udløse togglePlay-funktionen.
Det sidste trin er at tilføje statuslinjen. For at gøre dette skal du tilføje et par flere linjer kode til filen Player.js. Tilføj følgende:
importere React, { useState, useRef } fra 'reagere';konst Spiller = () => {
konst [isPlaying, setIsPlaying] = useState(falsk);
konst [fremskridt, sætProgress] = brugState(0);
konst videoRef = useRef(nul);
konst togglePlay = () => {
if (spiller) {
videoRef.nuværende.pause();
} andet {
videoRef.nuværende.Spil();
}
setIsPlaying(!isPlaying);
};
konst handleProgress = () => {
konst varighed = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst fremskridt = (aktuelTid / varighed) * 100;
setProgress (fremskridt);
};
Vend tilbage (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
bredde ="100%"
højde="100%"
kontroller
>
<kilde src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div>
<knap onClick={togglePlay}>
{spiller? "Pause": "Spil"}
</button>
<fremskridt værdi={fremskridt} max="100" />
</div>
</div>
)
}
eksportStandard Spiller;
Denne kode tilføjer handleProgress-funktionen. Denne funktion vil opdatere statuslinjen. Det tilføjer også en onTimeUpdate-hændelseslytter til videoelementet, der vil udløse handleProgress-funktionen. Endelig tilføjer den et fremskridtselement til siden med værdi- og max-attributterne indstillet til henholdsvis fremskridt og 100.
Brug af tredjepartsbiblioteker
Den anden mulighed for at oprette en videoafspiller i React er at bruge tredjepartsbiblioteker. Der er mange tilgængelige biblioteker, men nogle af de mest populære er ReactPlayer og React-media-player.
ReactPlayer
ReactPlayer er et simpelt, letvægtsbibliotek, der giver dig mulighed for at oprette en videoafspiller med blot et par linjer kode. For at installere det skal du køre følgende kommando i din terminal:
npm installere reagere-spiller
Når det er installeret, kan du bruge det sådan:
importere Reagere fra 'reagere';
importere ReactPlayer fra 'react-player';konst Spiller = () => {
Vend tilbage (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
bredde ="100%"
højde="100%"
kontroller
/>
)
}
eksportStandard Spiller;
Denne kode importerer ReactPlayer-komponenten fra react-player-biblioteket og tilføjer den til siden. Den indstiller url, bredde, højde og kontrollerer attributter. Tag et kig på hver af disse parametre én efter én:
- url: Dette er URL'en på den video, du vil afspille.
- bredde: Dette er bredden af videoafspilleren.
- højde: Dette er højden på videoafspilleren.
- kontroller: Dette er en boolesk attribut, der bestemmer, om videoafspilleren skal have kontrol eller ej.
react-video-js-player
react-video-js-player er et andet simpelt, let bibliotek, der giver dig mulighed for at oprette en videoafspiller med blot et par linjer kode. For at installere det skal du køre følgende kommando i din terminal:
npm installere react-video-js-player
Når det er installeret, kan du bruge det sådan:
importere Reagere fra "reagere";
importere Videoafspiller fra "react-video-js-player";konst Spiller = () => {
Vend tilbage (
<Videoafspiller
bredde ="100%"
højde="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
kontroller
/>
)
}
eksportStandard Spiller;
Denne kode importerer VideoPlayer-komponenten fra react-video-js-player-biblioteket og tilføjer den til siden.
Yderligere videoafspillerfunktioner
Du kan tilføje ekstra funktioner til din videoafspiller, såsom:
- Tilføjelse af en plakat: Du kan tilføje et plakatbillede til din videoafspiller ved at indstille plakatattributten for videoelementet til billedets URL.
- Looping: Du kan loope din video ved at indstille loop-attributten for videoelementet til "true".
- Slået fra: Du kan slå lyden fra for din video ved at indstille videoelementets muted-attribut til "true".
- Automatisk afspilning: Du kan afspille din video automatisk ved at indstille autoplay-attributten for videoelementet til "true".
Du kan også tilføje dine egne brugerdefinerede kontroller til videoafspilleren. For at gøre dette skal du tilføje begivenhedslyttere til videoelementet og skrivefunktioner for at styre videoen.
Øg brugerengagementet med en videoafspiller
Med de rigtige værktøjer og teknikker kan du nemt oprette en videoafspiller i React. Du kan også tilføje yderligere funktioner for at øge brugerengagementet. Medieafspillere er en fantastisk måde at øge brugerengagementet på dit websted eller din applikation.
Når du har tilføjet en videoafspiller til dit websted, skal du sørge for at spore brugerengagement for at se, om det har den ønskede effekt. Du kan også implementere A/B-test for at se, om tilføjelse af en videoafspiller øger konverteringsraterne.