javascript - 视频播放暂停按钮动画

Question

当光标在视频播放时悬停在视频上时，“暂停”一词的动画效果很好，当我切换它时 - 也很好，但是当视频停止时，光标会从视频中删除并再次悬停在其上 -然后我的“play”一词动画失败了。

尝试在视频播放和停止时设置不同的行为:

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

if ( x ) {

}

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

if ( y ) {

}

我该如何解决这个问题，或者任何想法都会很棒。

fiddle

live example

Answer 1

将鼠标悬停时，您应该检查视频是否正在播放或停止。 另外，如果您对点击执行相同的操作，事情会更容易。

如下所示(我确实用不透明度替换了左侧的幻灯片)

$(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);
        }
    });
});