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

Posted 2023-05-07

【中文标题】如何判断 <video> 元素当前是不是正在播放？

【英文标题】：How to tell if a <video> element is currently playing?如何判断 <video> 元素当前是否正在播放？

【发布时间】：2011-10-16 04:26:03

【问题描述】：

我看到MediaElement 接口公开了paused、seeking 和ended 等属性。但是，列表中缺少 playing。

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

我得到的最接近的是：

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

【参考方案1】：

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

你可以使用这个see this

【参考方案2】：

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

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

【参考方案3】：

我也遇到了同样的问题。解决方案非常简单直接：

// 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

【参考方案4】：

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

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

那么元素当前正在播放。

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

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

【讨论】：

这个假设在 IE 中似乎不成立。当用户正在寻找时（因此视频现在没有播放），currentTime 可以大于 0 并且同时 paused =ended = false。

currentTime 如果视频尚未开始播放，则以秒为单位在 Safari 中以浮点数为单位提供视频持续时间。

可悲的是，这样的属性不符合规范！！

【参考方案5】：

已经很久了，但这里有一个很棒的提示。您可以将.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

【参考方案6】：

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

var videoElement = video.get(0);

if (!videoElement.paused)  

使用 Jquery 的一种方法

【讨论】：

这是最好的方法。 ACC一太麻烦了

【参考方案7】：

在这里查看我的回复：HTML5 video tag, javascript to detect playing status?

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