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

Question

我有一个html5视频，这是我网站的背景，在该视频上，我放了一些文字，例如Welcome to 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

要检测视频是否正在播放，可以使用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指示视频状态（播放或不播放），然后将其用于代码的另一部分，而不是直接在事件处理程序中使用。

您可以在这里看到此代码。

希望能对您有所帮助。