Étape 2 : Ajouter des commandes vidéo personnalisées

Ajoutez des contrôles vidéo en configurant des boutons personnalisés dans la création.

Ajouter des boutons de lecture de la vidéo

1. Créez deux éléments dans la création en utilisant un tag <div>. Vous devez les créer dans le fichier HTML et définir leur style dans le fichier CSS. Ensuite, affectez des identifiants différents et un nom de classe aux éléments.
   

   Exemple de tags <div> dans le fichier HTML

   <div id="play-btn" class="video-controls">PLAY</div>
<div id="pause-btn" class="video-controls">PAUSE</div>
<div id="mute-btn" class="video-controls">MUTE</div>
<div id="unmute-btn" class="video-controls">UNMUTE</div>
<div id="stop-btn" class="video-controls">STOP</div>
<div id="replay-btn" class="video-controls">REPLAY</div>

   Exemple de style et d'ID dans le fichier CSS

   .video-controls {
   position: absolute;
   width: 50px;
   height: 20px;
   cursor: pointer;
   background-color: #FFF;
   border: 1px solid #000;
}

#play-btn {
   left: 5px;
}

#pause-btn {
   left: 5px;
}

#mute-btn {
   left: 60px;
}

#unmute-btn {
   left: 60px;
}

#stop-btn {
   left: 115px;
}

#replay-btn {
   left: 115px;
}
2. Ajoutez des contrôles vidéo au code JavaScript.
   
   Un certain nombre de fonctionnalités vidéo ne sont pas disponibles pour le format HTML5. Assurez-vous de trouver une solution de contournement adaptée.
   

   • La désactivation et la réactivation du son ne sont disponibles que depuis un ordinateur. Sur un mobile, ces fonctions sont contrôlées au niveau du matériel.
   • La méthode d'arrêt n'est pas disponible. Une solution possible consiste à mettre la vidéo en pause et à définir le paramètre currentTime sur 0.
   • La méthode de nouvelle lecture n'est pas disponible. Une solution possible consiste à définir currentTime sur 0 et à relancer la lecture de la vidéo.
   
   

   Extrait de code

   var playBtn = document.getElementById('play-btn');
var pauseBtn = document.getElementById('pause-btn');
var muteBtn = document.getElementById('mute-btn');
var unmuteBtn = document.getElementById('unmute-btn');
var stopBtn = document.getElementById('stop-btn');
var replayBtn = document.getElementById('replay-btn');

playBtn.addEventListener('click', pausePlayHandler, false);
pauseBtn.addEventListener('click', pausePlayHandler, false);
muteBtn.addEventListener('click', muteUnmuteHandler, false);
unmuteBtn.addEventListener('click', muteUnmuteHandler, false);
stopBtn.addEventListener('click', stopHandler, false);

   replayBtn.addEventListener('click', replayHandler, false);

function pausePlayHandler(e) {
   if (video1.paused) {
       // Si la vidéo a été mise en pause, relancer sa lecture
       video1.play();
        // Afficher le bouton de mise en pause et masquer le bouton de lecture
       pauseBtn.style.visibility = 'visible';
       playBtn.style.visibility = 'hidden';
   } else {
       // Si la vidéo est en cours de lecture, la mettre en pause
       video1.pause();
       // Afficher le bouton de lecture et masquer le bouton de mise en pause
       pauseBtn.style.visibility = 'hidden';
       playBtn.style.visibility = 'visible';
   }
}

function muteUnmuteHandler(e) {
   if (video1.volume == 0.0) {
       // Si le son est désactivé, l'activer
       video1.volume = 1.0;
       // Afficher le bouton de désactivation du son et masquer le bouton de réactivation du son
       muteBtn.style.visibility = 'visible';
       unmuteBtn.style.visibility = 'hidden';
   } else {
       // Si le son est activé, le désactiver
       video1.volume = 0.0;
       // Afficher le bouton de réactivation du son et masquer le bouton de désactivation du son
       muteBtn.style.visibility = 'hidden';
       unmuteBtn.style.visibility = 'visible';
   }
}

function stopHandler(e) {
   // Il n'existe pas de méthode d'arrêt pour les vidéos HTML5
   // Pour contourner le problème, mettre la vidéo en pause
   // et définir currentTime sur 0
   video1.currentTime = 0;
   video1.pause();
   // Afficher ou masquer les autres boutons de la vidéo en fonction des besoins
}

function replayHandler(e) {
   // Il n'existe pas de méthode de nouvelle lecture pour les vidéos HTML5
   // Pour contourner le problème, définir currentTime sur 0
   // et lire la vidéo
   video1.currentTime = 0;
   video1.play();
   // Afficher ou masquer les autres boutons de la vidéo en fonction des besoins
}