Séparer une page html en plusieurs parties indépendantes
Amsteroque
Messages postés
2
Statut
Membre
-
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
bonjour, j'ai fait un tableau sur une page et j'aimerai que le bouton play soit différent pour chaque parties, mais je n'y arrive pas.
Merci d'avance
MichèleN
2 réponses
-
bonjour
il faudrait commencer par nous montrer ton code HTML...
-
Bonjour Jordane,
Voici ce qui semble poser problème, mais si il faut tout le reste de la page dis-le moi.
<style> { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .video-container { position: relative; } video { display: block; margin: 0 auto; width: 640px; height: 360px; controls: false; } .play-button { position: absolute; top: 1%; left: 39%; width: 630px; height: 350px; background-image: url('photos/tableaux/jazzman.jpg'); background-size: contain; background-repeat: no-repeat; cursor: pointer; opacity: 0.99; } </style> </head> <body> <div><br> <div class="video-container"> <video id="jazzman" preload="auto"> <source src="films/jazzman.mp4" type="video/mp4">Votre navigateur ne supporte pas les vidéos HTML5. </source> </video> <div class="play-button"></div> </div> <script> const video = document.getElementById('jazzman'); const playButton = document.querySelector('.play-button'); playButton.addEventListener('click', function() {video.play(); playButton.style.display = 'none'; // Cache le bouton après le démarrage }); video.addEventListener('click', function(){ if (video.paused){ video.play(); } else { video.pause(); } }); video.addEventListener('play', function(){ playButton.style.display = 'none'; // s'assure que le bouton disparait si on clique sur la video. }); video.addEventListener('pause', function(){ playButton.style.display = 'block'; // s'assure que le bouton réapparait si on met la video en pause. }); </script>Merci beaucoup et bonne journée
*
*EDIT: Ajout des balises de code
