Javascript 检测HTML5视频是否正在播放或暂停，并相应地显示或隐藏Div

我有一个html5视频，它是我网站的背景，在这个视频上我放了一些文字，比如欢迎来到布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

最初视频将不会播放，但当用户点击播放按钮，视频将开始播放，在这里我想淡出的文本显示在该视频

当用户单击“暂停”时，文本应显示，当单击“播放”时，文本应淡出。这是一个故事：-）

我发现了下面的东西

$("#player").get(0).paused
$("#player").get(0).play()
$("#player").get(0).pause()

但是没有找到

$("#player").get(0).played

如何检测我的视频是否正在播放或暂停？我需要下面的东西

if(video == "playing"){
  $("#introText").fadeOut();
else {$("#introText").fadeIn();}
}

感谢您的支持。

视频开始播放时会触发“播放”事件，视频暂停时会触发“暂停”事件

---

或者，“暂停”属性在视频播放时为false，不播放时为true。

要检测视频是否正在播放，可以使用

播放

（或

播放

）和

暂停

事件，然后可以显示或隐藏文本：

HTML:

<video id="video">
    <!-- your videos -->
</video>

$(function(){

    var video = $('#video')[0];

    video.addEventListener('playing', function(){
           $('.text').fadeOut();
    })
     video.addEventListener('pause', function(){
           $('.text').fadeIn();
    })

})

当然，您可以使用var来指示视频状态（播放或不播放），然后在代码的另一部分中使用它，而不是直接在事件处理程序中使用

您可以看到此代码正在工作

---

希望能有所帮助。

为什么不点击播放按钮触发事件

$("button").click(function(){
    $("#div1").fadeToggle();
})

这样您就不必检测，只需切换文本即可

参考：