Bonjour,

j'ai créer à l'aide de JS / CSS un bouton play et mute.

le mute est une image prise d'internet et le play est construit avec CSS.

Le problème est que, quand je passe de play à pause, le button se décale et je ne comprend pas pourquoi.

GIF du problème : https://www.noelshack.com/2017-50-4-1513285361-sans-titre.gif

Si quelqu'un a une solution, je serai ravi de l'entendre!

-
Edité par Gregouz66 14 décembre 2017 à 22:04:41

Salut sans voir le code ca risque d'être compliquer de te dire ce qui ne va pas dans ton code

c'est comme demander à un aveugle ce qui ne va pas dans une peinture

Mon HTML:

<div class="positionplaymute">
<button id="playpausebtn" class="button"></button>
<button id="mutebtn" class="mute off"></button> </br>
</div>

Mon CSS:

/*DIV Buttons*/
.positionplaymute {
    text-align: right;

}

/*Buttons PLAY/PAUSE*/
.button {
    border: 0;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    height: 74px;
    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    cursor: pointer;
    border-style: solid;
    border-width: 37px 0 37px 60px;
    outline: none;
}
.button.paused {
    border-style: double;
    border-width: 0px 0 0px 60px;
}
.button:hover {
    border-color: transparent transparent transparent #404040;
}

/*Buttons MUTE/UNMUTE*/
.mute {
    height: 58px;
    width: 78px;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    border-color: transparent transparent transparent #202020;
    transition: 100ms all ease;
    cursor: pointer;
    background-size: 50px;
    border-width: 37px 0 37px 60px;
    outline: none;
}
.mute.on{background: url('muteBTN.png') no-repeat left bottom;}
.mute.off{background: url('muteBTN.png') no-repeat left top;}

Mon Js :

    <script>
        var vid, playbtn, mutebtn;
        function intializePlayer(){
            // Set object references
            vid = document.getElementById("my_video");
            playbtn = document.getElementById("playpausebtn");
            mutebtn = document.getElementById("mutebtn");
            // Add event listeners
            playbtn.addEventListener("click",playPause,false);
            mutebtn.addEventListener("click",vidmute,false);
        }
        window.onload = intializePlayer;
        function playPause(){
            if(vid.paused){
                vid.play();
                playbtn.setAttribute("class","button");
            } else {
                vid.pause();
                playbtn.setAttribute("class","button paused");
        }
        }

        function vidmute(){
            if(vid.muted){
                vid.muted = false;
                mutebtn.setAttribute("class","mute off");
            } else {
                vid.muted = true;
                mutebtn.setAttribute("class","mute on");
            }
        }

    </script>

Salut, ajoute ca à la fin de ton CSS :

.button{position:relative; top:-37px;}
.paused{position:relative; top:0px;}

Tout d'abord merci de ta réponse @noopy360 cela m'a aidé.

Autre mini problème maintenant, le "play" agrandit la page de quelques px je pense, et cela fait afficher la barre sur le côté comme tu peux le voir:

https://www.noelshack.com/2017-50-4-1513290182-sans-titre-3.gif