Javascript : Ma video ne se stop pas

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Snoww
Messages : 2
Enregistré le : 31 août 2021, 10:01

Javascript : Ma video ne se stop pas

Message par Snoww » 31 août 2021, 10:06

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>
Modifié en dernier par Snoww le 31 août 2021, 15:39, modifié 2 fois.

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Javascript : Ma video ne se stop pas

Message par webmaster » 31 août 2021, 11:14

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.
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Snoww
Messages : 2
Enregistré le : 31 août 2021, 10:01

Re: Javascript : Ma video ne se stop pas

Message par Snoww » 31 août 2021, 11:35

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

Répondre