Question

我的情况非常简单。当我点击具有“.play”类

的div时，我有一个HTML视频

$('.play').click(function() {
    $('.video').get(0).paused ? $('.video').get(0).play() : $('.video').get(0).pause();
    $(this).fadeOut(100);
});

我的问题是，在6秒视频完成后，我怎样才能淡出播放按钮。播放按钮绝对位于视频的顶部，因此播放时需要淡出，但在短视频播放完毕后重新出现，因此用户可以再次点击它，如果愿意再观看视频播放。

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

Answer 1

使用jQuery的简单解决方案

$(document).ready(function() {
    $('.video').on('ended', function(){
        // Do anything that needs to happen when the video is done
        $('.play').fadeIn(100);
    });
});

Answer 2

我明白了！通过使用播放（或播放）和暂停事件来检测视频是否正在播放，如下所示：

$(function(){
    var video = $('#video')[0];

    video.addEventListener('playing', function(){
           $('.play').fadeOut();
           //**Add whatever other transitions wanted while video is playing
    })
     video.addEventListener('pause', function(){
           $('.play').fadeIn();
          //**Add whatever other transitions wanted while video is paused
    })
})

感谢此帖：Detect if HTML5 video is playing or paused and show or hide a Div accordingly

点击播放HTML视频

2 个答案: