javascript 检测 HTML5 视频是否正在播放或暂停并相应地显示或隐藏 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28678689/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if HTML5 video is playing or paused and show or hide a Div accordingly
提问by vamsi
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.....
我有一个 html5 视频，它是我网站的背景，在那个视频上我放了一些文字，比如欢迎来到等等等等.....
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...
感谢广告...
回答by akmozo
To detect if your video is playing or not, you can use playing(or play) and pauseevents and then you can show or hide your text :
要检测您的视频是否正在播放，您可以使用playing(或play) 和pause事件，然后您可以显示或隐藏您的文本：
HTML :
HTML :
<video id="video">
<!-- your videos -->
</video>
JS :
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.
您当然可以使用 var 来指示您的视频状态（正在播放或未播放），然后在代码的另一部分而不是直接在事件处理程序中使用它。
You can see this code working here.
您可以在此处查看此代码。
Hope that can help.
希望能有所帮助。
回答by supereater14
There is a "play" event, which fires when the video begins playing, and a "pause" event that fires when the video is paused.
有一个“播放”事件在视频开始播放时触发，还有一个“暂停”事件在视频暂停时触发。
Alternatively, the "paused" property will be false when the video is playing and true when it is not.
或者，“暂停”属性在视频正在播放时为假，在不播放时为真。
回答by 1Bladesforhire
Why not just trigger the event on the play button click?
为什么不直接在播放按钮点击时触发事件？
$("button").click(function(){
$("#div1").fadeToggle();
})
That way you don't have to detect, simply toggle the text.
这样您就不必检测，只需切换文本即可。
Reference :http://api.jquery.com/fadetoggle/
