Question

我有一个html5视频，它是我网站的背景，在那个视频上，我正在放置一些文字，比如Welcome to 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。

希望可以提供帮助。

Answer 2

有一个＆＃34; play＆＃34;在视频开始播放时触发的事件，以及＆＃34;暂停＆＃34;视频暂停时触发的事件。

或者，＆＃34;暂停＆＃34;视频播放时属性为false，而视频播放时为true。

Answer 3

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

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

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

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

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

3 个答案: