Att skapa en videospelare i React kan verka som en utmanande uppgift. Men med rätt verktyg och tekniker kan du göra det relativt enkelt.
Det finns två sätt att skapa en videospelare i React: med hjälp av inbyggda funktioner och med hjälp av tredjepartsbibliotek.
Skapa en videospelare i React
Innan du skapar en React-videospelare, se till att du har en grundläggande förståelse för HTML, CSS och JavaScript.
Börja med skapa en grundläggande React-app för att lägga till följande videospelarfunktioner till.
Använda inbyggda funktioner (React Hooks)
Det första alternativet för att skapa en videospelare i React är att använda inbyggda funktioner.
Börja med att skapa spelarkomponenten som visar videon och alla dess kontroller. För att göra detta, skapa en fil som heter "Player.js" och lägg till följande kod:
importera Reagera från 'reagera';konst Spelare = () => {
lämna tillbaka (
<div>
<videobredd="100%" höjd="100%" kontroller>
<källa src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
</div>
)
}exporterastandard Spelare;
Denna kod importerar React-biblioteket och skapar en spelarkomponent. Den lägger också till ett videoelement med kontrollattributet inställt på "true". Detta kommer att lägga till den grundläggande videospelaren på sidan.
Lägg sedan till play/paus-knappen. För att göra detta måste du lägga till några rader kod till spelarkomponenten. Lägg till följande kod i filen Player.js:
importera Reagera, { useState, useRef } från 'reagera';konst Spelare = () => {
konst [isPlaying, setIsPlaying] = useState(falsk);
konst videoRef = useRef(null);
konst togglePlay = () => {
if (spelar) {
videoRef.nuvarande.paus();
} annan {
videoRef.nuvarande.spela();
}
setIsPlaying(!isPlaying);
};
lämna tillbaka (
<div>
<video
ref={videoRef}
bredd="100%"
höjd="100%"
kontroller
>
<källa src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
<button onClick={togglePlay}>
{spelar? "Paus": "Spela"}
</button>
</div>
)
}
exporterastandard Spelare;
Denna kod använder hakarna useState och useRef för att hålla reda på videons tillstånd (oavsett om det spelas upp eller pausas) och referensen till videoelementet. Den lägger också till en växlingsfunktion som spelar upp och pausar videon. Knappelementet kommer att utlösa togglePlay-funktionen.
Det sista steget är att lägga till förloppsindikatorn. För att göra detta måste du lägga till några fler rader kod i filen Player.js. Lägg till följande:
importera Reagera, { useState, useRef } från 'reagera';konst Spelare = () => {
konst [isPlaying, setIsPlaying] = useState(falsk);
konst [progress, setProgress] = useState(0);
konst videoRef = useRef(null);
konst togglePlay = () => {
if (spelar) {
videoRef.nuvarande.paus();
} annan {
videoRef.nuvarande.spela();
}
setIsPlaying(!isPlaying);
};
konst handleProgress = () => {
konst duration = videoRef.current.duration;
konst currentTime = videoRef.current.currentTime;
konst progress = (aktuell tid / varaktighet) * 100;
setProgress (framsteg);
};
lämna tillbaka (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
bredd="100%"
höjd="100%"
kontroller
>
<källa src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" typ="video/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{spelar? "Paus": "Spela"}
</button>
<progress value={progress} max="100" />
</div>
</div>
)
}
exporterastandard Spelare;
Denna kod lägger till handleProgress-funktionen. Denna funktion kommer att uppdatera förloppsindikatorn. Den lägger också till en onTimeUpdate-händelselyssnare till videoelementet som kommer att utlösa handleProgress-funktionen. Slutligen lägger den till ett förloppselement på sidan med värde- och maxattributen inställda på förloppet respektive 100.
Använda tredje parts bibliotek
Det andra alternativet för att skapa en videospelare i React är att använda tredjepartsbibliotek. Det finns många tillgängliga bibliotek, men några av de mest populära är ReactPlayer och React-media-player.
ReactPlayer
ReactPlayer är ett enkelt, lätt bibliotek som låter dig skapa en videospelare med bara några rader kod. För att installera det, kör följande kommando i din terminal:
npm Installera reagera-spelareNär du har installerat den kan du använda den så här:
importera Reagera från 'reagera';
importera ReactPlayer från 'reagera-spelare';konst Spelare = () => {
lämna tillbaka (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
bredd="100%"
höjd="100%"
kontroller
/>
)
}
exporterastandard Spelare;
Denna kod importerar ReactPlayer-komponenten från react-player-biblioteket och lägger till den på sidan. Den ställer in url, bredd, höjd och kontrollerar attribut. Ta en titt på var och en av dessa parametrar en efter en:
- url: Det här är webbadressen till videon du vill spela upp.
- bredd: Detta är bredden på videospelaren.
- höjd: Detta är höjden på videospelaren.
- kontroller: Detta är ett booleskt attribut som avgör om videospelaren kommer att ha kontroller eller inte.
react-video-js-player
react-video-js-player är ett annat enkelt, lätt bibliotek som låter dig skapa en videospelare med bara några rader kod. För att installera det, kör följande kommando i din terminal:
npm Installera react-video-js-playerNär du har installerat den kan du använda den så här:
importera Reagera från "reagera";
importera Videospelare från "react-video-js-player";konst Spelare = () => {
lämna tillbaka (
<Videospelare
bredd="100%"
höjd="100%"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
kontroller
/>
)
}
exporterastandard Spelare;
Den här koden importerar VideoPlayer-komponenten från react-video-js-player-biblioteket och lägger till den på sidan.
Ytterligare videospelarfunktioner
Du kan lägga till extra funktioner till din videospelare, till exempel:
- Lägga till en affisch: Du kan lägga till en affischbild till din videospelare genom att ställa in affischattributet för videoelementet till bildens URL.
- Looping: Du kan loopa din video genom att ställa in loop-attributet för videoelementet till "true".
- Avstängd: Du kan stänga av din video genom att ställa in attributet muted för videoelementet till "true".
- Autospela: Du kan spela upp din video automatiskt genom att ställa in autoplay-attributet för videoelementet till "true".
Du kan också lägga till dina egna anpassade kontroller till videospelaren. För att göra detta måste du lägga till händelseavlyssnare till videoelementet och skrivfunktioner för att styra videon.
Öka användarens engagemang med en videospelare
Med rätt verktyg och tekniker kan du enkelt skapa en videospelare i React. Du kan också lägga till ytterligare funktioner för att öka användarens engagemang. Mediaspelare är ett bra sätt att öka användarnas engagemang på din webbplats eller applikation.
När du har lagt till en videospelare på din webbplats, se till att spåra användarens engagemang för att se om det ger önskad effekt. Du kan också implementera A/B-tester för att se om omvandlingsfrekvensen ökar om du lägger till en videospelare.