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

问题描述

我有一个html5的视频，这是我的网站的背景，并在该视频上，我正在放置一些文字，如欢迎来到等等等等等......

最初，视频不会播放，但当用户点击播放按钮时，视频将开始播放，在这里我想淡出该视频上显示的文本。

当用户点击暂停时，应该显示文字，点击播放时应该是淡出。这是故事： - ）

我发现下面的东西

  $ （#player）。get（0）.paused 
 $（＃player）。get（0）.play（）
 $（＃player）。get（0）。暂停（）
  

但没有找到

  $（＃player）。get（0）.played 
  

如何检测我的视频是否正在播放或暂停？我需要类似以下内容

  if（video ==playing）{
 $（＃introText） 。消退（）; 
 else {$（＃introText）。fadeIn（）;} 
} 
  

感谢您的支持......

解决方案

要检测您的视频是否正在播放，您可以使用玩（或 play ）和暂停事件，然后您可以显示或隐藏您的文字：

HTML：

 < video id =video> 
 <！ - 您的影片 - > 
< / video> 
  

JS：

  $（function（）{
 
 var video = $（'＃video'）[0]; 
 
 video。 addEventListener（'playing'，function（）{
 $（'。text'）。fadeOut（）; 
}）
 video.addEventListener（'pause'，function（）{
 $（'。text'）。fadeIn（）; 
}）
 
}）
  

当然，您可以使用var来指示您的视频状态（不玩或不玩），然后将其用于代码的另一部分，而不直接在您的事件处理程序中。

您可以在此处查看此代码。

希望有帮助。

I have a html5 video which is background of my website, and on that video i am placing some text like Welcome to blah blah blah.....

Initially the video will not be played, but when user clicks on play button the video will start playing, here I want to fadeOut the text which am showing on that video.

When user clicks on pause the text should be displayed, when clicks on play it should be fadeout. This is story :-)

I found below things

$("#player").get(0).paused
$("#player").get(0).play()
$("#player").get(0).pause()

But didn't found

$("#player").get(0).played

How to detect if my video is playing or paused? I need something like below

if(video == "playing"){
  $("#introText").fadeOut();
else {$("#introText").fadeIn();}
}

Thanks in adv...

解决方案

To detect if your video is playing or not, you can use playing (or play) and pause events and then you can show or hide your text :

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();
    })

})

You can of course use a var to indicate your video state ( playing or not ) and then use it in another part of your code not directly inside your events handlers.

You can see this code working here.

Hope that can help.

这篇关于检测HTML5视频是否正在播放或暂停，并相应地显示或隐藏Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！