Javascript 如何判断 <video> 元素当前是否正在播放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6877403/
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
How to tell if a <video> element is currently playing?
提问by Evan Krall
I see that the MediaElementinterface exposes attributes like paused, seeking, and ended. Missing from the list, however, is playing.
我看到的MediaElement接口公开属性，如paused，seeking和ended。但是，列表中缺少playing.
I know there are playingeventsthat fire when an element startsplaying, and timeupdateeventsevents periodically while playing, but I'm looking for a way to determine whether a video is playing right now. Is there an easy way to determine this?
我知道有playing事件，火灾，当一个元素开始演奏，timeupdate活动活动，同时定期播放，但是我正在寻找一种方法来确定视频是否正在播放现在。有没有简单的方法来确定这一点？
The closest I've got is:
我得到的最接近的是：
!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)
回答by Raees Iqbal
It has been a long time but here is a great tip. You can define .playingas a custom property for all media elements and access it when needed. Here is how:
已经很长时间了，但这里有一个很好的提示。您可以.playing为所有媒体元素定义一个自定义属性，并在需要时访问它。方法如下：
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
Now you can use it on <video>or <audio>elements like this:
现在您可以在<video>或<audio>元素上使用它：
if(document.querySelector('video').playing){ // checks if element is playing right now
// Do anything you want to
}
回答by George Cummins
There is not a specific attribute that will reveal whether a MediaElementis currently playing. However, you can deduce this from the state of the other attributes. If:
没有特定的属性可以显示 aMediaElement当前是否正在播放。但是，您可以从其他属性的状态推断出这一点。如果：
currentTimeis greater than zero, andpausedis false, andendedis false
currentTime大于零，并且paused是假的，并且ended是假的
then the element is currently playing.
那么元素当前正在播放。
You may also need to check readyStateto see if the media stopped due to errors. Maybe something like that:
您可能还需要检查readyState媒体是否因错误而停止。也许是这样的：
const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);
回答by Luke Robertson
var video = $('selector').children('video');
var videoElement = video.get(0);
if (!videoElement.paused) {}
One way of doing it using Jquery
使用 Jquery 的一种方法
回答by Variant
See my response here: HTML5 video tag, javascript to detect playing status?
在此处查看我的回复：HTML5 video tag, javascript to detection play status?
Basicaly, as said before there is no single property to check but according to the spec it's a combination of conditions.
基本上，如前所述，没有要检查的单一属性，但根据规范，它是条件的组合。
回答by Haolin Zhang
I was facing the same problem. Solution is very simple and straight forward:
我面临同样的问题。解决方案非常简单直接：
// if video status is changed to "ended", then change control button to "Play Again"
video.onended = function() {
$("#play_control_button").text("Play Again");
};
// if video status is changed to "paused", then change control button to "Continue Play"
video.onpause = function() {
$("#play_control_button").text("Continue Play");
};
// if video status is changed to "playing", then change control button to "Stop"
video.onplaying = function() {
$("#play_control_button").text("Stop");
};
