Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

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:

  1. Tilføjelse af en plakat: Du kan tilføje et plakatbillede til din videoafspiller ved at indstille plakatattributten for videoelementet til billedets URL.
  2. Looping: Du kan loope din video ved at indstille loop-attributten for videoelementet til "true".
  3. Slået fra: Du kan slå lyden fra for din video ved at indstille videoelementets muted-attribut til "true".
  4. 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.