点击播放 HTML 视频答案

【问题标题】：Play HTML video on click点击播放 HTML 视频
【发布时间】：2015-11-19 22:57:47
【问题描述】：

我有一个非常简单的情况。当我单击具有“.play”类的 div 时，我播放了一个 HTML 视频

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

我的问题是，如何在 6 秒视频结束后淡入播放按钮。播放按钮绝对位于视频的顶部，所以播放时需要淡出，短视频播放完后又会重新出现，用户可以再次点击，再看一遍视频播放。

【问题讨论】：

标签： html video click mp4 playback

【解决方案1】：

一个非常简单的jQuery解决方案

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

【讨论】：

【解决方案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

【讨论】：