Het maken van een videospeler in React lijkt misschien een uitdagende taak. Maar met de juiste tools en technieken kun je dit relatief gemakkelijk doen.
Er zijn twee manieren om een videospeler te maken in React: met behulp van ingebouwde functies en met behulp van bibliotheken van derden.
Een videospeler maken in React
Voordat je een React-videospeler maakt, moet je ervoor zorgen dat je een basiskennis hebt van HTML, CSS en JavaScript.
Start op een eenvoudige React-app maken om de volgende videospelerfunctionaliteit toe te voegen.
Ingebouwde functies gebruiken (React Hooks)
De eerste optie om een videospeler in React te maken, is door ingebouwde functies te gebruiken.
Begin met het maken van de spelercomponent die de video en alle bedieningselementen zal weergeven. Maak hiervoor een bestand met de naam "Player.js" en voeg de volgende code toe:
importeren Reageer van 'Reageer';const Speler = () => {
opbrengst (
<div>
<videobreedte="100%" hoogte="100%" controles>
<bron src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="filmpje/mp4" />
</video>
</div>
)
}
exporterenstandaard Speler;
Deze code importeert de React-bibliotheek en maakt een spelercomponent. Het voegt ook een video-element toe met het besturingskenmerk ingesteld op "true". Hiermee wordt de basisvideospeler aan de pagina toegevoegd.
Voeg vervolgens de afspeel-/pauzeknop toe. Om dit te doen, moet u een paar regels code toevoegen aan de spelercomponent. Voeg de volgende code toe aan het Player.js-bestand:
importeren Reageren, { useState, useRef } van 'Reageer';const Speler = () => {
const [isPlaying, setIsPlaying] = useState(vals);
const videoRef = gebruikRef(nul);
const togglePlay = () => {
als (speelt) {
videoRef.huidig.pauze();
} anders {
videoRef.huidig.toneelstuk();
}
setIsPlaying(!isPlaying);
};
opbrengst (
<div>
<video
ref={videoRef}
breedte="100%"
hoogte="100%"
controles
>
<bron src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="filmpje/mp4" />
</video>
<knop onClick={togglePlay}>
{speelt? "Pauze": "Toneelstuk"}
</button>
</div>
)
}
exporterenstandaard Speler;
Deze code gebruikt de hooks useState en useRef om de status van de video bij te houden (of deze wordt afgespeeld of gepauzeerd) en de verwijzing naar het video-element. Het voegt ook een togglePlay-functie toe die de video afspeelt en pauzeert. Het knopelement activeert de functie togglePlay.
De laatste stap is het toevoegen van de voortgangsbalk. Om dit te doen, moet je nog een paar regels code toevoegen aan het Player.js-bestand. Voeg het volgende toe:
importeren Reageren, { useState, useRef } van 'Reageer';const Speler = () => {
const [isPlaying, setIsPlaying] = useState(vals);
const [voortgang, setProgress] = useState(0);
const videoRef = gebruikRef(nul);
const togglePlay = () => {
als (speelt) {
videoRef.huidig.pauze();
} anders {
videoRef.huidig.toneelstuk();
}
setIsPlaying(!isPlaying);
};
const handleProgress = () => {
const duur = videoRef.huidige.duur;
const huidigeTijd = videoRef.huidige.huidigeTijd;
const voortgang = (currentTime / duur) * 100;
setProgress (voortgang);
};
opbrengst (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
breedte="100%"
hoogte="100%"
controles
>
<bron src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="filmpje/mp4" />
</video>
<div>
<knop onClick={togglePlay}>
{speelt? "Pauze": "Toneelstuk"}
</button>
<voortgangswaarde={voortgang} max="100" />
</div>
</div>
)
}
exporterenstandaard Speler;
Deze code voegt de functie handleProgress toe. Deze functie werkt de voortgangsbalk bij. Het voegt ook een onTimeUpdate-gebeurtenislistener toe aan het video-element die de functie handleProgress activeert. Ten slotte voegt het een voortgangselement toe aan de pagina met de waarden waarde en maximum ingesteld op respectievelijk voortgang en 100.
Bibliotheken van derden gebruiken
De tweede optie om een videospeler in React te maken, is door bibliotheken van derden te gebruiken. Er zijn veel bibliotheken beschikbaar, maar enkele van de meest populaire zijn ReactPlayer en React-media-player.
ReactPlayer
ReactPlayer is een eenvoudige, lichtgewicht bibliotheek waarmee je een videospeler kunt maken met slechts een paar regels code. Om het te installeren, voert u de volgende opdracht uit in uw terminal:
npm installeren reactie-spelerEenmaal geïnstalleerd, kunt u het als volgt gebruiken:
importeren Reageer van 'Reageer';
importeren ReactPlayer van 'reageer-speler';const Speler = () => {
opbrengst (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
breedte="100%"
hoogte="100%"
controles
/>
)
}
exporterenstandaard Speler;
Deze code importeert de ReactPlayer-component uit de react-player-bibliotheek en voegt deze toe aan de pagina. Het stelt de URL, breedte, hoogte en besturingskenmerken in. Bekijk elk van deze parameters één voor één:
- url: Dit is de URL van de video die je wilt afspelen.
- breedte: Dit is de breedte van de videospeler.
- hoogte: Dit is de hoogte van de videospeler.
- controles: Dit is een booleaans attribuut dat bepaalt of de videospeler besturingselementen heeft of niet.
reactie-video-js-speler
react-video-js-player is een andere eenvoudige, lichtgewicht bibliotheek waarmee je een videospeler kunt maken met slechts een paar regels code. Om het te installeren, voert u de volgende opdracht uit in uw terminal:
npm installeren reactie-video-js-spelerEenmaal geïnstalleerd, kunt u het als volgt gebruiken:
importeren Reageer van "Reageer";
importeren Video speler van "reageer-video-js-speler";const Speler = () => {
opbrengst (
<Video speler
breedte="100%"
hoogte="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controles
/>
)
}
exporterenstandaard Speler;
Deze code importeert de component VideoPlayer uit de bibliotheek react-video-js-player en voegt deze toe aan de pagina.
Aanvullende videospelerfuncties
U kunt extra functies aan uw videospeler toevoegen, zoals:
- Een affiche toevoegen: U kunt een posterafbeelding aan uw videospeler toevoegen door het posterkenmerk van het video-element in te stellen op de URL van de afbeelding.
- Looping: U kunt uw video herhalen door het luskenmerk van het video-element in te stellen op "true".
- Gedempt: U kunt uw video dempen door het kenmerk gedempt van het video-element in te stellen op 'true'.
- Automatisch afspelen: U kunt uw video automatisch afspelen door het kenmerk autoplay van het video-element in te stellen op 'true'.
U kunt ook uw eigen aangepaste bedieningselementen toevoegen aan de videospeler. Om dit te doen, moet u gebeurtenislisteners aan het video-element toevoegen en functies schrijven om de video te besturen.
Verhoog de gebruikersbetrokkenheid met een videospeler
Met de juiste tools en technieken maak je eenvoudig een videospeler in React. U kunt ook extra functies toevoegen om de betrokkenheid van gebruikers te vergroten. Mediaspelers zijn een geweldige manier om de betrokkenheid van gebruikers op uw website of applicatie te vergroten.
Nadat u een videospeler aan uw site heeft toegevoegd, moet u de betrokkenheid van gebruikers bijhouden om te zien of dit het gewenste effect heeft. U kunt ook A/B-testen inzetten om te zien of het toevoegen van een videospeler de conversiepercentages verhoogt.