jQuery 检测 HTML5 自动播放视频是否已经播放？

Question

我有一个带有文本叠加层的视频元素。我将视频设置为自动播放，但是当用户第一次进入网站时这可能需要一些时间。对于这种情况，我设置了一个海报图像以在视频尚未开始时显示。我想要实现的是，一旦视频开始播放，hide/fade-out 我的视频覆盖。

我的 HTML 看起来像这样：

  <div class="video-wrapper">    
      <div class="video-overlay">
         <h1>Lorem Ipsum</h1>
         <p>Lorem ipsum...</p>
      </div>
      <div class="video-container">
        <video poster="img/default_player.jpg" id="bgvid" playsinline autoplay muted loop>
            <source src="vdo/vdo_original.mp4" type="video/mp4">
        </video>
      </div>
   </div>

是否可以使用 jQuery 检测视频是否已经开始播放或仍在缓冲？

类似于：

var video = jQuery("#bgvid").getState();

if ( video.paused ) {
    jQuery(".video-overlay").show();
} 

else {
    jQuery(".video-overlay").hide();
}

return false;

并将其绑定到更改函数或类似函数？非常感谢您！

Answer 1

正如@Bilel 所指出的，有多种方法可以做到这一点。我选择了“on-play-function”的方式。

这给我留下了这个：

var videocontainer = '#bgvid';
 
jQuery(videocontainer).on('play', function() {
    jQuery('.video-overlay').fadeOut(400);
});

这对我来说效果很好，因为它会在播放时淡化我的叠加层，以后不需要，因为视频自动播放、循环和控件都被隐藏了。

jQuery 检测 HTML5 自动播放视频是否已经播放？

jQuery detect if HTML5 autoplay video plays already?

jquery

onchange

html5-video