点击播放 HTML 视频

Question

我的情况很简单。我有一个 HTML 视频，当我点击 div 时播放 class “.play”

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

我的问题是，如何在 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
    })
})

感谢这篇帖子：

点击播放 HTML 视频

Play HTML video on click

html

video

mp4

click

playback