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

javascript html5-video

2022-08-30 05:37:20

我看到 MediaElement 接口公开了像、、和这样的属性。但是，列表中缺少的是。pausedseekingendedplaying

我知道有些播放事件会在元素开始播放时触发，并在播放时定期更新事件事件，但我正在寻找一种方法来确定视频是否正在播放。有没有一种简单的方法来确定这一点？

我最接近的是：

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

答案 1

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

currentTime大于零，并且
paused是假的，并且
ended为假

则该元素当前正在播放。

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

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

答案 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
}