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

IT技术 javascript html5-video
2021-03-11 12:18:46

我看到的MediaElement接口公开属性,如pausedseekingended但是,列表中缺少playing.

我知道有playing事件,火灾,当一个元素开始演奏,timeupdate活动活动,同时定期播放,但是我正在寻找一种方法来确定视频是否正在播放现在有没有简单的方法来确定这一点?

我得到的最接近的是:

!(video.paused || video.ended || video.seeking || video.readyState < video.HAVE_FUTURE_DATA)
6个回答

已经很长时间了,但这里有一个很好的提示。您可以.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
}

没有特定的属性可以显示 aMediaElement当前是否正在播放。但是,您可以从其他属性的状态推断出这一点。如果:

  • currentTime 大于零,并且
  • paused 是假的,并且
  • ended 是假的

那么元素当前正在播放。

您可能还需要检查readyState媒体是否因错误而停止。也许是这样的:

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 2);
如果视频尚未开始播放,currentTime 会以秒为单位为我提供视频持续时间作为 Safari 中的浮点数。
2021-04-19 12:18:46
这个假设在 IE 中似乎不成立。当用户正在寻找时(因此视频现在没有播放),currentTime 可以大于 0 并且同时暂停 = 结束 = 假。
2021-04-27 12:18:46
很遗憾,这样的属性不是按照规范建造的!!
2021-04-30 12:18:46
var video = $('selector').children('video');

var videoElement = video.get(0);

if (!videoElement.paused) {} 

使用 Jquery 的一种方法

这是最好的方法。ac1太麻烦了
2021-05-14 12:18:46

请在此处查看我的回复:HTML5 视频标签,用于检测播放状态的 javascript?

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

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

// 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");
};
@brasofilo 我认为下面的链接将为使用 JavaScript 控制视频提供足够的信息: w3schools.com/tags/ref_av_dom.asp
2021-04-24 12:18:46
你能链接到这些属性的文档吗?
2021-05-12 12:18:46