点击播放HTML视频

Question

我有一个非常简单的情况。我有一个HTML视频，我有玩，当我点击有类“.play”

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

我的问题是一个div，我怎能淡出播放按钮早在6秒的视频结束后。播放按钮绝对位于视频顶部，因此播放时需要淡出，但在短视频播放结束后重新出现，用户可以再次单击该按钮，并在需要时再次观看视频播放。

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