javascript - 检测 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

要检测您的视频是否正在播放，您可以使用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 .

希望对您有所帮助。