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

How to tell if a <video> element is currently playing?

本文关键字：元素 播放 gt 视频 判断 何判断 lt      更新时间：2023-09-26

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

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

我得到的最接近的是：

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

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

  • currentTime大于零，并且
  • paused为假，并且
  • ended为假

则该元素当前正在播放。

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

const isVideoPlaying = video => !!(video.currentTime > 0 && !video.paused && !video.ended && video.readyState > 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
}

var video = $('selector').children('video');
var videoElement = video.get(0);
if (!videoElement.paused) {}

使用Jquery 的一种方法

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

Basicaly，正如之前所说，没有单一的财产需要检查，但根据规范，这是多种条件的结合。

我也面临同样的问题。解决方案非常简单明了：

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

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

你可以使用这个查看这个

如果readyState等于或大于HAVE_FUETURE_DATA并暂停为false，则可以检查它。这可以确认视频正在播放。

如中所述https://html.spec.whatwg.org/播放事件将在以下情况下触发："readyState新近等于或大于HAVE_FUETURE_DATA并且paused为false，或者paused新近为false并且readyState等于或大于"HAVE_FLUTURE_DATA"；

以下是播放/暂停按钮的简单代码：

playpause.addEventListener("click", (e) => {
  if (video.paused || video.ended) {
    video.play();
  } else {
    video.pause();
  }
});

来源：https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/cross_browser_video_player

相关文章：