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

Question

我有一个 html5 视频，它是我网站的背景，我在该视频上放了一些文字，例如欢迎来到 blah blah blah.....

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

当用户点击暂停时应该显示文本，当点击播放时应该淡出。这是故事:-)

我发现了以下东西

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

但是没有找到

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

如何检测我的视频是在播放还是暂停？我需要像下面这样的东西

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

感谢...

Answer 1

有一个 "play" 事件，它在视频开始播放时触发，还有一个 "pause" 事件在视频暂停时触发。

或者，"paused" 属性在视频播放时为假，在不播放时为真。

Answer 2

要检测您的视频是否正在播放，您可以使用 playing（或 play）和 pause 事件，然后您可以显示或隐藏您的文本：

HTML :

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

JS :

$(function(){

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

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

})

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

您可以看到此代码有效 here。

希望能帮到你。

Answer 3

为什么不直接在点击播放按钮时触发事件？

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

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

参考： http://api.jquery.com/fadetoggle/

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

Detect if HTML5 video is playing or paused and show or hide a Div accordingly

html

javascript

video

jquery