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

Posted 2023-03-07

【中文标题】检测 HTML5 视频是不是正在播放或暂停，并相应地显示或隐藏 Div

【英文标题】：Detect if HTML5 video is playing or paused and show or hide a Div accordingly检测 HTML5 视频是否正在播放或暂停，并相应地显示或隐藏 Div

【发布时间】：2015-02-23 16:40:59

【问题描述】：

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

感谢您的建议...

【参考方案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工作。

希望能有所帮助。

【参考方案2】：

有一个“播放”事件，在视频开始播放时触发，还有一个“暂停”事件，在视频暂停时触发。

或者，当视频正在播放时，“paused”属性为假，不播放时为真。

【参考方案3】：

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

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

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

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