Créer un lecteur vidéo dans React peut sembler une tâche difficile. Mais avec les bons outils et techniques, vous pouvez le faire avec une relative facilité.
Il existe deux façons de créer un lecteur vidéo dans React: en utilisant des fonctionnalités intégrées et en utilisant des bibliothèques tierces.
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.
Commence par créer une application React de base pour ajouter la fonctionnalité de lecteur vidéo suivante.
Utilisation des fonctionnalités intégrées (React Hooks)
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 tous ses contrôles. Pour cela, créez un fichier appelé "Player.js" et ajoutez le code suivant :
importer Réagir depuis 'réagir';constante Joueur = () => {
retour (
<div>
<largeur de la vidéo="100%" hauteur="100%" contrôles>
<code source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" taper="vidéo/mp4" />
</video>
</div>
)
}
exporterdéfaut Joueur;
Ce code importe la bibliothèque React et crée un composant de lecteur. Il ajoute également un élément vidéo avec l'attribut de contrôle défini sur "true". Cela ajoutera le lecteur vidéo de base à la page.
Ensuite, ajoutez le bouton lecture/pause. Pour ce faire, vous devrez ajouter quelques lignes de code au composant du lecteur. Ajoutez le code suivant au fichier Player.js :
importer Réagir, { useState, useRef } depuis 'réagir';constante Joueur = () => {
constante [isPlaying, setIsPlaying] = useState(FAUX);
constante Refvidéo = useRef(nul);
constante togglePlay = () => {
si (est en train de jouer) {
vidéoRéf.actuel.pause();
} autre {
vidéoRéf.actuel.jouer();
}
setIsPlaying(!isPlaying);
};
retour (
<div>
<vidéo
ref={videoRef}
largeur="100%"
hauteur="100%"
contrôles
>
<code source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" taper="vidéo/mp4" />
</video>
<bouton onClick={togglePlay}>
{est en train de jouer? "Pause": "Jouer"}
</button>
</div>
)
}
exporterdéfaut Joueur;
Ce code utilise les hooks useState et useRef pour suivre l'état de la vidéo (qu'elle soit en cours de lecture ou en pause) et la référence à l'élément vidéo. Il ajoute également une fonction togglePlay qui lit et met en pause la vidéo. L'élément bouton déclenchera la fonction togglePlay.
La dernière étape consiste à ajouter la barre de progression. Pour ce faire, vous devrez ajouter quelques lignes de code supplémentaires au fichier Player.js. Ajoutez ce qui suit :
importer Réagir, { useState, useRef } depuis 'réagir';constante Joueur = () => {
constante [isPlaying, setIsPlaying] = useState(FAUX);
constante [progress, setProgress] = useState(0);
constante Refvidéo = useRef(nul);
constante togglePlay = () => {
si (est en train de jouer) {
vidéoRéf.actuel.pause();
} autre {
vidéoRéf.actuel.jouer();
}
setIsPlaying(!isPlaying);
};
constante handleProgress = () => {
constante durée = videoRef.current.duration ;
constante currentTime = videoRef.current.currentTime ;
constante progression = (currentTime / durée) * 100;
setProgress (progrès);
};
retour (
<div>
<vidéo
onTimeUpdate={handleProgress}
ref={videoRef}
largeur="100%"
hauteur="100%"
contrôles
>
<code source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" taper="vidéo/mp4" />
</video>
<div>
<bouton onClick={togglePlay}>
{est en train de jouer? "Pause": "Jouer"}
</button>
<progression valeur={progression} max="100" />
</div>
</div>
)
}
exporterdéfaut Joueur;
Ce code ajoute la fonction handleProgress. Cette fonction mettra à jour la barre de progression. Il ajoute également un écouteur d'événement onTimeUpdate à l'élément vidéo qui déclenchera la fonction handleProgress. Enfin, il ajoute un élément progress à la page avec les attributs value et max définis respectivement sur progress et 100.
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 certaines des plus populaires sont ReactPlayer et React-media-player.
ReactPlayer
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 l'installer, exécutez la commande suivante dans votre terminal :
npm installer joueur de réactionUne fois installé, vous pouvez l'utiliser comme ceci :
importer Réagir depuis 'réagir';
importer ReactPlayer depuis 'réagir-joueur' ;constante Joueur = () => {
retour (
<ReactPlayer
URL="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
largeur="100%"
hauteur="100%"
contrôles
/>
)
}
exporterdéfaut Joueur;
Ce code importe le composant ReactPlayer de la bibliothèque react-player 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: C'est la hauteur du lecteur vidéo.
- contrôles: Il s'agit d'un attribut booléen qui détermine si le lecteur vidéo aura des contrôles ou non.
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 l'installer, exécutez la commande suivante dans votre terminal :
npm installer réagir-vidéo-js-playerUne fois installé, vous pouvez l'utiliser comme ceci :
importer Réagir depuis "réagir";
importer Lecteur vidéo depuis "react-video-js-player" ;constante Joueur = () => {
retour (
<Lecteur vidéo
largeur="100%"
hauteur="100%"
source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
contrôles
/>
)
}
exporterdéfaut Joueur;
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 :
- Ajout d'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".
- En sourdine: Vous pouvez couper le son de votre vidéo en définissant l'attribut muet de l'élément vidéo sur "true".
- Lecture automatique: Vous pouvez lire automatiquement votre vidéo 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.
Augmentez l'engagement des utilisateurs avec un 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, assurez-vous de suivre l'engagement des utilisateurs pour voir s'il a l'effet souhaité. Vous pouvez également déployer des tests A/B pour voir si l'ajout d'un lecteur vidéo augmente les taux de conversion.