Séparer une page html en plusieurs parties indépendantes
Amsteroque
Messages postés
2
Statut
Membre
-
jordane45 Messages postés 40050 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 40050 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
A voir également:
- Séparer une page html en plusieurs parties indépendantes
- Supprimer une page word - Guide
- Word colonnes indépendantes - Guide
- Imprimer tableau excel sur une page - Guide
- Traduire une page en français - Guide
- Editeur html - Télécharger - HTML
2 réponses
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
