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

【问题标题】：jQuery detect if HTML5 autoplay video plays already?jQuery 检测 HTML5 自动播放视频是否已经播放？
【发布时间】：2020-11-26 19:51:23
【问题描述】：

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

我的 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;

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

【问题讨论】：

有不同的方法可以做到这一点......但首先你希望使用 jQuery 来触发 Play/Pause 吗？喜欢这里：stackoverflow.com/questions/34532133/…
或者使用 jQuery On('play')... 像这里：tomelliott.com/html-5/html-5-video-play-pause-jquery.
一个更高级的更复杂的情况，您可以在其中预加载视频......由于异步性，您需要一个承诺。那么你选择哪种方法呢？ :)
@Bilel 谢谢伙计！我选择了第二个选项，这适用于我的用例。再次感谢您为我指明方向！
不客气！祝你好运

标签： jquery html5-video onchange

【解决方案1】：

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

这让我有了这个：

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

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

【讨论】：