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

Question

我看到 MediaElement 接口公开了

paused

、

seeking

和

ended

等属性。然而，列表中缺少的是

playing

。

我知道当元素starts

播放时会触发

playing事件，并且播放时会定期触发

timeupdate

事件事件，但我正在寻找一种方法来确定视频是否正在播放正确现在。有没有简单的方法可以确定这一点？

我最接近的是：

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)

Answer 1

没有特定属性可以显示

MediaElement

当前是否正在播放。但是，您可以从其他属性的状态推断出这一点。如果：

• currentTime

  大于零，并且

• paused

  是假的，并且

• ended

  是假的

则该元素当前正在播放。

您可能还需要检查

readyState

以查看媒体是否因错误而停止。也许是这样的：

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

Answer 2

已经过去很长时间了，但这里有一个很棒的提示。您可以将

.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
}

Answer 3

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

var videoElement = video.get(0);

if (!videoElement.paused) {} 

使用 Jquery 的一种方法

Answer 4

在这里查看我的回复：HTML5视频标签，javascript来检测播放状态？

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

Answer 5

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

关于

onplaying

的 MDN 文档

Answer 6

我也面临着同样的问题。解决方案非常简单直接：

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

Answer 7

您可以检查readyState是否等于或大于HAVE_FUTURE_DATA并且paused为假。这可以确认视频正在播放。

正如 https://html.spec.whatwg.org/ 中所解释的那样，播放事件将在以下情况下被触发： “readyState 新等于或大于 HAVE_FUTURE_DATA 并且 Paused 为 false，或者 Paused 新为 false 并且 ReadyState 等于或大于 HAVE_FUTURE_DATA”