如何判断 < video > 元素是否正在播放？

我看到 MediaElement接口公开了诸如 paused、 seeking和 ended之类的属性。

我知道当一个元素 开始播放时有 playing事件开火，而且 timeupdate events在播放时会周期性地发生事件，但是我正在寻找一种方法来确定一个视频是否在播放 就现在。有什么简单的方法来确定这个吗？

最接近的是:

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)
125763 次浏览
小开

没有一个特定的属性，将揭示是否一个 MediaElement目前正在播放。但是，您可以从其他属性的状态中推断出这一点。如果:

  • currentTime大于0
  • paused是假的
  • ended是假的

那么元素当前正在播放。

您可能还需要检查 readyState，看看媒体是否由于错误而停止:

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);
小开

点击这里查看我的回复: HTML5视频标签，javascript 检测播放状态？

基本上，如前所述，没有单个属性需要检查，但是根据规范，它是条件的组合。

小开 
var video = $('selector').children('video');


var videoElement = video.get(0);


if (!videoElement.paused) {}

使用 Jquery 的一种方法

小开

已经过去很长时间了，但这里有一个很好的提示。您可以将 .playing定义为所有媒体元素的自定义属性，并在需要时访问它。方法如下:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})

现在你可以像下面这样在 <video>或者 <audio>元素上使用它:

if(document.querySelector('video').playing){ // checks if element is playing right now
// Do anything you want to
}
小开

我也面临着同样的问题，解决方法很简单，也很直接:

// 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");
};
小开

您可以检查 readyState 是否等于或大于 HAVE _ FUTURE _ DATA 并暂停为 false。这可以证实视频正在播放。

正如 https://html.spec.whatwg.org/解释的那样，比赛将在下列情况下进行: ReadyState 等于或大于 HAVE _ FUTURE _ DATA，暂停为 false，或暂停为 new false，readyState 等于或大于 HAVE _ FUTURE _ DATA

小开 
var vid = document.getElementById("myVideo");
vid.onplaying = function() {
alert("The video is now playing");};

你可以用这个 see this


提交答案