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

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

本文关键字：Div 隐藏 显示 暂停 视频 HTML5 是否 播放 检测      更新时间：2024-03-22

我有一个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();}
}

在广告中感谢…

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

你可以在这里看到这段代码。

希望这能有所帮助。

有一个"播放"事件，当视频开始播放时激发，还有一个"暂停"事件，在视频暂停时激发。

或者，当视频正在播放时，"暂停"属性将为false，而当视频未播放时，属性为true。

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

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

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

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

相关文章：