Étape 1 : Je souhaite mettre en place une image où il a par-dessus celle-ci un bouton 'Play".
Étape 2 : En cliquant sur ce bouton 'Play" une vidéo apparaît par-dessus l'image. Cette vidéo se lance automatiquement avec le son, par-dessus celle-ci, il y a un bouton "Fermer".
Étape 3 : En cliquant sur ce bouton "Fermer", je reviens à l'Étape 1.
Le problème que je rencontre, c'est à l'Étape 3, quand je clique sur le bouton "Fermer", la procédure se déroule correctement, mais la vidéo continue sa lecture avec le son en arrière-plan.
Pour info j'ai suivie ce TUTO YouTube --> https://www.youtube.com/watch?v=wnseY8goQoc
Si une personne pouvait m'aider pour résoudre ce problème, cela serait génial. Merci par avance.
PS: Dans l'idéal j'aimerai aussi au moment de l'Étape 2 que le panneau de contrôle (Bouton "Pause" "Timeline" "Volume" "Pleine écrans") de la vidéo ne s'affiche pas et que en survolant la vidéo avec le curseur mon bouton "Fermer" apparaisse.
CODE HTML
Code : Tout sélectionner
<div class="container">
<h1>HOW TITRE</h1>
<div class="feature-img">
<img src="/src/photo.webp" width="100%">
<img src="/src/play.png" class="play-btn" onclick="playVideo('/src/video.mp4')">
<div class="video-player" id="videoPlayer">
<video with="100%" autoplay id="myVideo">
<source src="/src/video.mp4" type="video/mp4">
</video>
<img src="/src/close.png" class="close-btn" onclick="stopVideo()">
</div>
</div>
</div>
Code : Tout sélectionner
*{
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 80px auto;
}
.container .video-player {
width: 100%;
}
.container h1{
padding: 60px 0;
color: #000;
font-size: 44px;
text-align: center;
}
.feature-img {
margin: 20px 0;
width: 100%;
position: relative;
border-radius: 6px;
overflow: hidden;
}
.play-btn {
position: absolute;
left: 50%;
top: 50%;
width: 60px;
transform: translate(-50%,-50%);
cursor: pointer;
}
.container .video-player {
width: 100%;
height: 100%;
}
.video-player {
position: absolute;
top: 0;
left: 0;
display: none;
}
.video-player video{
width: 100%;
margin: auto;
position: relative;
border-radius: 6px;
overflow: hidden;
}
video:focus {
outline: none;
}
.close-btn {
position: absolute;
top: 2%;
right: 1%;
width: 4%;
cursor: pointer;
}
Code : Tout sélectionner
<script>
var videoPlayer = document.getElementById("videoPlayer");
var myVideo = document.getElementById("myVideo");
function playVideo(file){
myVideo.src = file;
videoPlayer.style.display = "block";
myVideo.style.display = "block";
}
function stopVideo(){
videoPlayer.style.display = "none";
myVideo.style.display ="none";
};
</script>