Créer un lecteur vidéo dans React peut sembler une tâche ardue. Mais avec les bons outils et techniques, vous pouvez le faire avec une relative facilité.
Il existe plusieurs façons simples de créer un lecteur vidéo dans React : en utilisant des fonctionnalités intégrées et en utilisant des bibliothèques tierces. Vérifier Comment créer des objets par glisser-déposer dans React.
Créer un lecteur vidéo dans React
Avant de créer un lecteur vidéo React, assurez-vous d'avoir une compréhension de base de HTML, CSS et JavaScript.
Commencez par créer une application React de base à laquelle ajouter les fonctionnalités de lecteur vidéo suivantes.
Utiliser les fonctionnalités intégrées (crochets d'interaction)
La première option pour créer un lecteur vidéo dans React consiste à utiliser les fonctionnalités intégrées.
Commencez par créer le composant du lecteur qui affichera la vidéo et toutes ses commandes. Pour cela, créez un fichier appelé "Player.js" et ajoutez le code suivant :
import React from ‘react’;
const Player = () => {
return (
<div>
<video width=”100%” height=”100%” controls>
<source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
</video>
</div>
)
}
export default Player; Ce code importe la bibliothèque React et crée le composant de lancement. Il ajoute également un élément vidéo avec l'attribut controls défini sur true. Cela ajoutera le lecteur vidéo principal à la page.
Ensuite, ajoutez le bouton lecture/pause. Pour ce faire, vous devrez ajouter quelques lignes de code au configurateur du lanceur. Ajoutez le code suivant au fichier Player.js :
import React, { useState, useRef } from ‘react’;
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
return (
<div>
<video
ref={videoRef}
width=”100%”
height=”100%”
controls
>
<source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
</video>
<button onClick={togglePlay}>
{isPlaying ? “Pause” : “Play”}
</button>
</div>
)
}
export default Player; Ce code utilise un hook utiliserÉtat et utiliserRef Suit l'état de la vidéo (qu'elle soit en cours de lecture ou en pause) et indique l'élément vidéo. Il ajoute également des fonctionnalités basculeJouer qui jouera et mettra en pause la vidéo. L'élément bouton déclenchera la fonction togglePlay.
La dernière étape consiste à ajouter une barre de progression. Pour ce faire, vous devrez ajouter quelques lignes de code au fichier Player.js. Vous devez ajouter ce qui suit :
import React, { useState, useRef } from ‘react’;
const Player = () => {
const [isPlaying, setIsPlaying] = useState(false);
const [progress, setProgress] = useState(0);
const videoRef = useRef(null);
const togglePlay = () => {
if (isPlaying) {
videoRef.current.pause();
} else {
videoRef.current.play();
}
setIsPlaying(!isPlaying);
};
const handleProgress = () => {
const duration = videoRef.current.duration;
const currentTime = videoRef.current.currentTime;
const progress = (currentTime / duration) * 100;
setProgress(progress);
};
return (
<div>
<video
onTimeUpdate={handleProgress}
ref={videoRef}
width=”100%”
height=”100%”
controls
>
<source src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type=”video/mp4" />
</video>
<div>
<button onClick={togglePlay}>
{isPlaying ? “Pause” : “Play”}
</button>
<progress value={progress} max=”100" />
</div>
</div>
)
}
export default Player; Ce code ajoute la fonction handleProgress. Cette fonction mettra à jour la barre de progression. Le code ajoute également un écouteur d'événement onTimeUpdate à l'élément vidéo qui déclenchera la fonction handleProgress. Enfin, vous ajoutez un élément progress à la page avec les attributs value, max progress et 100 set respectivement. Vérifier Comment configurer la souris pour l'utiliser confortablement.
Utilisation de bibliothèques tierces
La deuxième option pour créer un lecteur vidéo dans React consiste à utiliser des bibliothèques tierces. Il existe de nombreuses bibliothèques disponibles, mais les plus populaires sont ReactPlayer et React-media-player.
RéagirJoueur
ReactPlayer est une bibliothèque simple et légère qui vous permet de créer un lecteur vidéo avec seulement quelques lignes de code. Pour les installer, exécutez la commande suivante dans Terminal :
npm install react-player
Une fois installé, vous pouvez l'utiliser comme suit :
import React from ‘react’;
import ReactPlayer from ‘react-player’;
const Player = () => {
return (
<ReactPlayer
url=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
width=”100%”
height=”100%”
controls
/>
)
}
export default Player; Ce code importe le composant ReactPlayer de la bibliothèque ReactPlayer et l'ajoute à la page. Il définit l'URL, la largeur, la hauteur et les attributs de contrôle. Jetez un oeil à chacun de ces paramètres un par un:
- url : il s'agit de l'URL de la vidéo que vous souhaitez lire.
- largeur : il s'agit de la largeur du lecteur vidéo.
- hauteur : il s'agit de la hauteur du lecteur vidéo.
- contrôles : il s'agit d'un attribut booléen qui spécifie si le lecteur vidéo inclura des contrôles.
réagir-vidéo-js-player
react-video-js-player est une autre bibliothèque simple et légère qui vous permet de créer un lecteur vidéo avec seulement quelques lignes de code. Pour les installer, exécutez la commande suivante dans Terminal :
npm install react-video-js-player
Une fois installé, vous pouvez l'utiliser comme suit :
import React from “react”;
import VideoPlayer from “react-video-js-player”;
const Player = () => {
return (
<VideoPlayer
width=”100%”
height=”100%”
src=”http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
controls
/>
)
}
export default Player; Ce code importe le composant VideoPlayer de la bibliothèque react-video-js-player et l'ajoute à la page.
Fonctionnalités supplémentaires du lecteur vidéo
Vous pouvez ajouter des fonctionnalités supplémentaires à votre lecteur vidéo, telles que :
- Ajouter une affiche : vous pouvez ajouter une image d'affiche à votre lecteur vidéo en définissant l'attribut "affiche" de l'élément vidéo sur l'URL de l'image.
- Boucle : vous pouvez boucler votre vidéo en définissant l'attribut de boucle de l'élément vidéo sur true.
- Muet : vous pouvez désactiver la vidéo en définissant l'attribut muet de l'élément vidéo sur true.
- Lecture automatique : vous pouvez lire la vidéo automatiquement en définissant l'attribut de lecture automatique de l'élément vidéo sur true.
Vous pouvez également ajouter vos propres commandes personnalisées au lecteur vidéo. Pour ce faire, vous devrez ajouter des écouteurs d'événements à l'élément vidéo et écrire des fonctions pour contrôler la vidéo. Vérifier La meilleure façon de corriger l'erreur "Cette vidéo ne peut pas être lue" sur Google Drive.
Augmenter l'interaction de l'utilisateur avec le lecteur vidéo
Avec les bons outils et techniques, vous pouvez facilement créer un lecteur vidéo dans React. Vous pouvez également ajouter des fonctionnalités supplémentaires pour augmenter l'engagement des utilisateurs. Les lecteurs multimédias sont un excellent moyen d'augmenter l'engagement des utilisateurs sur votre site Web ou votre application.
Après avoir ajouté un lecteur vidéo à votre site Web, assurez-vous de suivre l'interaction de l'utilisateur pour voir si cela a l'effet souhaité. Vous pouvez également publier un test A/B pour voir si l'ajout d'un lecteur vidéo augmente les taux de conversion. Vous pouvez voir maintenant Les meilleures façons d'améliorer le taux de conversion de votre site Web.
