Forums Tout JavaScript

Ce que je cherche à faire :

É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 CSS

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 JS

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>

Bonjour

La fonction stopvideo ne fait que cacher le contenu.
Pour l'arreter, il faut plutot supprimer le contenu avec innerHTML=""

Mais je suis sceptique sur le principe. Le bouton fermer est-il utile et bénéfique ?
Un marchand ne place par un bouton annuler la commande au moment ou le client doit saisir sa CB.

Merci pour votre réponse, mais j'ai suivie ce Tuto Sur Youtube https://www.youtube.com/watch?v=wnseY8goQoc. Mais j'ai pas le meme resultat

Forums Tout JavaScript

Javascript : Ma video ne se stop pas

Javascript : Ma video ne se stop pas

Re: Javascript : Ma video ne se stop pas

Re: Javascript : Ma video ne se stop pas