CODEWITHSUNDEEP
javascriptjqueryanimationvideohtml5-video
Eva Nebko
Eva Nebko

Reputation: 214

Video play pause button animation

When cursor is hovered on video when it's playing, then animation of word 'pause' is fine, and when I toggle it - it's fine too, but when video is stopped, cursor is removed from video and again hovered on it - then my animation of word 'play' is failed.

Tried to set different behavior when video is playing and stopped: 

var x = myVid.play();
var x = true;

if ( x ) {

}

var y = myVid.pause();
var y = true;

if ( y ) {

}

How can I fix it or any ideas would be great.

fiddle

live example

Upvotes: 0

Views: 778

Answers (1)

jplara
jplara

Reputation: 141

on hover you should check if the video is playing or stopped. Also, it'll be easier if you did the same for the click.

something like below (i did replace your slide left with opacity)

$(document).ready(function(){
    console.log("as");
    myVid=document.getElementById('infoVideo');

    $('#video-mask').hover(function (){

      $(this).animate({ opacity: '1' }, 200 ,function(){
        if(!myVid.paused){
            $('#video-play').animate({opacity : '0'}, 200);
            $('#video-pause').animate({opacity : '1'}, 200);

        }else{
            $('#video-play').animate({opacity : '1'}, 200);
            $('#video-pause').animate({opacity : '0'}, 200);
        }
      });
      },function(){
        $(this).animate({ opacity: '0' }, 200);
    });

    $('#video-mask').on('click', function(){
        if(!myVid.paused){
            myVid.pause();
            $('#video-play').animate({opacity : '1'}, 200);
            $('#video-pause').animate({opacity : '0'}, 200);
        }else{
            myVid.play();
            $('#video-play').animate({opacity : '0'}, 200);
            $('#video-pause').animate({opacity : '1'}, 200);
        }
    });
});

Upvotes: 2

Related Questions