Das Erstellen eines Videoplayers in React mag wie eine herausfordernde Aufgabe erscheinen. Aber mit den richtigen Werkzeugen und Techniken können Sie dies relativ einfach tun.
Es gibt zwei Möglichkeiten, einen Videoplayer in React zu erstellen: die Verwendung integrierter Funktionen und die Verwendung von Bibliotheken von Drittanbietern.
Erstellen eines Videoplayers in React
Stellen Sie vor dem Erstellen eines React-Videoplayers sicher, dass Sie über grundlegende Kenntnisse in HTML, CSS und JavaScript verfügen.
Beginnen Sie mit Erstellen einer einfachen React-App, um die folgende Videoplayer-Funktionalität hinzuzufügen.
Verwenden integrierter Funktionen (React Hooks)
Die erste Option zum Erstellen eines Videoplayers in React ist die Verwendung integrierter Funktionen.
Erstellen Sie zunächst die Player-Komponente, die das Video und alle seine Steuerelemente anzeigt. Erstellen Sie dazu eine Datei namens „Player.js“ und fügen Sie den folgenden Code hinzu:
importieren Reagieren aus 'reagieren';konst Spieler = () => {
zurückkehren (
<div>
<Videobreite ="100%" Höhe ="100%" steuert>
<Quelle src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" Typ="Videos/mp4" />
</video>
</div>
)
}
ExportStandard Spieler;
Dieser Code importiert die React-Bibliothek und erstellt eine Player-Komponente. Es fügt auch ein Videoelement hinzu, bei dem das Attribut „controls“ auf „true“ gesetzt ist. Dadurch wird der Seite der grundlegende Videoplayer hinzugefügt.
Fügen Sie als Nächstes die Wiedergabe-/Pause-Schaltfläche hinzu. Dazu müssen Sie der Player-Komponente einige Codezeilen hinzufügen. Fügen Sie der Player.js-Datei den folgenden Code hinzu:
importieren Reagieren, { useState, useRef } aus 'reagieren';konst Spieler = () => {
konst [isPlaying, setIsPlaying] = useState(FALSCH);
konst videoRef = useRef(Null);
konst togglePlay = () => {
if (spielt) {
videoRef.aktuell.Pause();
} anders {
videoRef.aktuell.spielen();
}
setIsPlaying(!isPlaying);
};
zurückkehren (
<div>
<Video
ref={videoRef}
Breite ="100%"
Höhe ="100%"
steuert
>
<Quelle src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" Typ="Videos/mp4" />
</video>
<Schaltfläche onClick={togglePlay}>
{spielt? "Pause": "Spielen"}
</button>
</div>
)
}
ExportStandard Spieler;
Dieser Code verwendet die Hooks useState und useRef um den Status des Videos (ob es abgespielt oder angehalten wird) und den Verweis auf das Videoelement zu verfolgen. Es fügt auch eine TogglePlay-Funktion hinzu, die das Video abspielt und anhält. Das Button-Element löst die TogglePlay-Funktion aus.
Der letzte Schritt besteht darin, den Fortschrittsbalken hinzuzufügen. Dazu müssen Sie der Player.js-Datei einige weitere Codezeilen hinzufügen. Fügen Sie Folgendes hinzu:
importieren Reagieren, { useState, useRef } aus 'reagieren';konst Spieler = () => {
konst [isPlaying, setIsPlaying] = useState(FALSCH);
konst [Fortschritt, setProgress] = useState(0);
konst videoRef = useRef(Null);
konst togglePlay = () => {
if (spielt) {
videoRef.aktuell.Pause();
} anders {
videoRef.aktuell.spielen();
}
setIsPlaying(!isPlaying);
};
konst handleProgress = () => {
konst Dauer = videoRef.aktuelle.Dauer;
konst aktuelleZeit = videoRef.aktuelle.aktuelleZeit;
konst Fortschritt = (aktuelle Zeit / Dauer) * 100;
setProgress (Fortschritt);
};
zurückkehren (
<div>
<Video
onTimeUpdate={handleProgress}
ref={videoRef}
Breite ="100%"
Höhe ="100%"
steuert
>
<Quelle src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" Typ="Videos/mp4" />
</video>
<div>
<Schaltfläche onClick={togglePlay}>
{spielt? "Pause": "Spielen"}
</button>
<Fortschrittswert = {Fortschritt} max ="100" />
</div>
</div>
)
}
ExportStandard Spieler;
Dieser Code fügt die handleProgress-Funktion hinzu. Diese Funktion aktualisiert den Fortschrittsbalken. Außerdem wird dem Videoelement ein onTimeUpdate-Ereignis-Listener hinzugefügt, der die handleProgress-Funktion auslöst. Schließlich fügt es der Seite ein Fortschrittselement hinzu, wobei die Attribute value und max auf den Fortschritt bzw. 100 gesetzt sind.
Verwenden von Bibliotheken von Drittanbietern
Die zweite Option zum Erstellen eines Videoplayers in React ist die Verwendung von Bibliotheken von Drittanbietern. Es sind viele Bibliotheken verfügbar, aber einige der beliebtesten sind ReactPlayer und React-Media-Player.
ReactPlayer
ReactPlayer ist eine einfache, leichtgewichtige Bibliothek, mit der Sie mit nur wenigen Codezeilen einen Videoplayer erstellen können. Um es zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:
npm Installieren ReaktionsspielerEinmal installiert, können Sie es wie folgt verwenden:
importieren Reagieren aus 'reagieren';
importieren ReactPlayer aus 'Reaktionsspieler';konst Spieler = () => {
zurückkehren (
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
Breite ="100%"
Höhe ="100%"
steuert
/>
)
}
ExportStandard Spieler;
Dieser Code importiert die ReactPlayer-Komponente aus der React-Player-Bibliothek und fügt sie der Seite hinzu. Es legt die URL-, Breiten-, Höhen- und Steuerungsattribute fest. Schauen Sie sich jeden dieser Parameter einzeln an:
- URL: Dies ist die URL des Videos, das Sie abspielen möchten.
- Breite: Dies ist die Breite des Videoplayers.
- Höhe: Dies ist die Höhe des Videoplayers.
- Kontrollen: Dies ist ein boolesches Attribut, das bestimmt, ob der Videoplayer über Steuerelemente verfügt oder nicht.
React-Video-js-Player
React-Video-js-Player ist eine weitere einfache, leichtgewichtige Bibliothek, mit der Sie mit nur wenigen Codezeilen einen Videoplayer erstellen können. Um es zu installieren, führen Sie den folgenden Befehl in Ihrem Terminal aus:
npm Installieren React-Video-js-PlayerEinmal installiert, können Sie es wie folgt verwenden:
importieren Reagieren aus "reagieren";
importieren Videoplayer aus "react-video-js-player";konst Spieler = () => {
zurückkehren (
<Videoplayer
Breite ="100%"
Höhe ="100%"
Quelle="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
steuert
/>
)
}
ExportStandard Spieler;
Dieser Code importiert die VideoPlayer-Komponente aus der React-Video-js-Player-Bibliothek und fügt sie der Seite hinzu.
Zusätzliche Videoplayer-Funktionen
Sie können Ihrem Videoplayer zusätzliche Funktionen hinzufügen, z. B.:
- Poster hinzufügen: Sie können Ihrem Videoplayer ein Posterbild hinzufügen, indem Sie das Posterattribut des Videoelements auf die URL des Bilds setzen.
- Schleife: Sie können Ihr Video loopen, indem Sie das Loop-Attribut des Video-Elements auf „true“ setzen.
- Stumm: Sie können Ihr Video stumm schalten, indem Sie das muted-Attribut des Video-Elements auf „true“ setzen.
- Automatisches Abspielen: Sie können Ihr Video automatisch abspielen, indem Sie das Autoplay-Attribut des Videoelements auf „true“ setzen.
Sie können dem Videoplayer auch Ihre eigenen benutzerdefinierten Steuerelemente hinzufügen. Dazu müssen Sie dem Videoelement Ereignis-Listener hinzufügen und Funktionen schreiben, um das Video zu steuern.
Erhöhen Sie das Benutzerengagement mit einem Videoplayer
Mit den richtigen Tools und Techniken kannst du ganz einfach einen Videoplayer in React erstellen. Sie können auch zusätzliche Funktionen hinzufügen, um die Benutzerinteraktion zu erhöhen. Mediaplayer sind eine großartige Möglichkeit, die Benutzerinteraktion auf Ihrer Website oder Anwendung zu steigern.
Stellen Sie nach dem Hinzufügen eines Videoplayers zu Ihrer Website sicher, dass Sie das Nutzerengagement verfolgen, um zu sehen, ob es den gewünschten Effekt hat. Sie können auch A/B-Tests einsetzen, um zu sehen, ob das Hinzufügen eines Videoplayers die Konversionsraten erhöht.
