La creazione di un lettore video in React potrebbe sembrare un'attività impegnativa. Ma con gli strumenti e le tecniche giuste, puoi farlo con relativa facilità.
Esistono due modi per creare un lettore video in React: utilizzando le funzionalità integrate e utilizzando librerie di terze parti.
Creazione di un lettore video in React
Prima di creare un lettore video React, assicurati di avere una conoscenza di base di HTML, CSS e JavaScript.
A partire da creando un'app React di base a cui aggiungere la seguente funzionalità di video player.
Utilizzo delle funzionalità integrate (React Hooks)
La prima opzione per creare un lettore video in React è utilizzare le funzionalità integrate.
Inizia creando il componente player che visualizzerà il video e tutti i suoi controlli. Per fare ciò, crea un file chiamato "Player.js" e aggiungi il seguente codice:
importare Reagire da 'reagire';cost Giocatore = () => {
ritorno (
<div>
<larghezza video="100%" altezza="100%" controlli>
<fonte src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo="video/mp4" />
</video>
</div>
)
}
esportarepredefinito Giocatore;
Questo codice importa la libreria React e crea un componente player. Aggiunge anche un elemento video con l'attributo controls impostato su "true". Questo aggiungerà il lettore video di base alla pagina.
Successivamente, aggiungi il pulsante Riproduci/Pausa. Per fare ciò, dovrai aggiungere alcune righe di codice al componente player. Aggiungi il seguente codice al file Player.js:
importare Reagire, {useState, useRef} da 'reagire';cost Giocatore = () => {
cost [isPlaying, setIsPlaying] = useState(falso);
cost videoRef = useRef(nullo);
cost togglePlay = () => {
se (sta giocando) {
videoRif.attuale.pausa();
} altro {
videoRif.attuale.giocare();
}
setIsPlaying(!isPlaying);
};
ritorno (
<div>
<video
ref={videoRef}
larghezza="100%"
altezza="100%"
controlli
>
<fonte src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo="video/mp4" />
</video>
<pulsante onClick={togglePlay}>
{sta giocando? "Pausa": "Giocare"}
</button>
</div>
)
}
esportarepredefinito Giocatore;
Questo codice utilizza gli hook useState e useRef per tenere traccia dello stato del video (se è in riproduzione o in pausa) e il riferimento all'elemento video. Aggiunge anche una funzione togglePlay che riprodurrà e metterà in pausa il video. L'elemento button attiverà la funzione togglePlay.
L'ultimo passaggio consiste nell'aggiungere la barra di avanzamento. Per fare ciò, dovrai aggiungere qualche altra riga di codice al file Player.js. Aggiungi quanto segue:
importare Reagire, {useState, useRef} da 'reagire';cost Giocatore = () => {
cost [isPlaying, setIsPlaying] = useState(falso);
cost [progresso, setProgresso] = useState(0);
cost videoRef = useRef(nullo);
cost togglePlay = () => {
se (sta giocando) {
videoRif.attuale.pausa();
} altro {
videoRif.attuale.giocare();
}
setIsPlaying(!isPlaying);
};
cost handleProgress = () => {
cost durata = videoRef.current.duration;
cost currentTime = videoRef.current.currentTime;
cost progresso = (tempo corrente / durata) * 100;
setProgress (avanzamento);
};
ritorno (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
larghezza="100%"
altezza="100%"
controlli
>
<fonte src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" tipo="video/mp4" />
</video>
<div>
<pulsante onClick={togglePlay}>
{sta giocando? "Pausa": "Giocare"}
</button>
<valore progresso={progresso} max="100" />
</div>
</div>
)
}
esportarepredefinito Giocatore;
Questo codice aggiunge la funzione handleProgress. Questa funzione aggiornerà la barra di avanzamento. Aggiunge inoltre un listener di eventi onTimeUpdate all'elemento video che attiverà la funzione handleProgress. Infine, aggiunge un elemento progress alla pagina con gli attributi value e max impostati rispettivamente su progress e 100.
Utilizzo di librerie di terze parti
La seconda opzione per creare un lettore video in React è utilizzare librerie di terze parti. Ci sono molte librerie disponibili, ma alcune delle più popolari sono ReactPlayer e React-media-player.
Giocatore di reazione
ReactPlayer è una libreria semplice e leggera che ti consente di creare un lettore video con poche righe di codice. Per installarlo, esegui il seguente comando nel tuo terminale:
npm installare giocatore di reazioneUna volta installato, puoi usarlo in questo modo:
importare Reagire da 'reagire';
importare Giocatore di reazione da 'giocatore di reazione';cost Giocatore = () => {
ritorno (
<Giocatore di reazione
URL="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
larghezza="100%"
altezza="100%"
controlli
/>
)
}
esportarepredefinito Giocatore;
Questo codice importa il componente ReactPlayer dalla libreria react-player e lo aggiunge alla pagina. Imposta gli attributi url, width, height e controls. Dai un'occhiata a ciascuno di questi parametri uno per uno:
- URL: Questo è l'URL del video che desideri riprodurre.
- larghezza: Questa è la larghezza del video player.
- altezza: Questa è l'altezza del video player.
- controlli: Questo è un attributo booleano che determina se il video player avrà controlli o meno.
react-video-js-player
react-video-js-player è un'altra libreria semplice e leggera che ti consente di creare un lettore video con poche righe di codice. Per installarlo, esegui il seguente comando nel tuo terminale:
npm installare react-video-js-playerUna volta installato, puoi usarlo in questo modo:
importare Reagire da "reagire";
importare Lettore video da "react-video-js-player";cost Giocatore = () => {
ritorno (
<Lettore video
larghezza="100%"
altezza="100%"
sorgente="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controlli
/>
)
}
esportarepredefinito Giocatore;
Questo codice importa il componente VideoPlayer dalla libreria react-video-js-player e lo aggiunge alla pagina.
Funzionalità aggiuntive del lettore video
Puoi aggiungere funzionalità extra al tuo video player, come:
- Aggiunta di un poster: Puoi aggiungere un'immagine poster al tuo lettore video impostando l'attributo poster dell'elemento video sull'URL dell'immagine.
- Looping: Puoi eseguire il looping del tuo video impostando l'attributo loop dell'elemento video su "true".
- Disattivato: Puoi silenziare il tuo video impostando l'attributo muted dell'elemento video su "true".
- Riproduzione automatica: Puoi riprodurre automaticamente il tuo video impostando l'attributo di riproduzione automatica dell'elemento video su "true".
Puoi anche aggiungere i tuoi controlli personalizzati al lettore video. Per fare ciò, dovrai aggiungere ascoltatori di eventi all'elemento video e scrivere funzioni per controllare il video.
Aumenta il coinvolgimento degli utenti con un lettore video
Con gli strumenti e le tecniche giuste, puoi creare facilmente un video player in React. Puoi anche aggiungere funzionalità aggiuntive per aumentare il coinvolgimento degli utenti. I lettori multimediali sono un ottimo modo per aumentare il coinvolgimento degli utenti sul tuo sito Web o applicazione.
Dopo aver aggiunto un video player al tuo sito, assicurati di monitorare il coinvolgimento degli utenti per vedere se sta avendo l'effetto desiderato. Puoi anche implementare test A/B per vedere se l'aggiunta di un lettore video aumenta i tassi di conversione.