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

Question

我看到 MediaElement 接口公开了像 paused ， seeking 和 ended 这样的属性。然而，列表中缺少 playing 属性。

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

我得到的最接近的是：

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

- Evan Krall

Answer 1

没有一个特定的属性可以显示一个 MediaElement 是否正在播放。然而，你可以从其他属性的状态中推断出来。如果：

• currentTime 大于零，且
• paused 是 false，且
• ended 是 false

那么该元素正在播放。

你可能还需要检查 readyState 来看媒体是否因为错误而停止。也许像这样：

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

- George Cummins

---

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

如果视频尚未开始播放，currentTime会在Safari中以浮点数的形式给出视频时长（秒）。 - Q Caron

很遗憾这个属性没有按规范构建！ - Jikku Jose

@QCaron 我不明白你的意思，你也可以将浮点数与零进行比较吗？ - undefined

@OZZIE 我猜Safari可能出了问题。如果视频还没有开始播放，currentTime可能会返回视频的总时长而不是真实的当前时间（如果视频还没有开始播放，应该是0）。 - undefined

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
}

- Raees Iqbal

---

这太棒了。可以适用于视频和音频！ - Kalaschnik

Answer 3

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

var videoElement = video.get(0);

if (!videoElement.paused) {} 

使用Jquery的一种方法

- Luke Robertson

---

这是最好的方式。Acc one 太过繁琐。 - Bariq Dharmawan

Answer 4

请查看我在这里的回答：HTML5视频标签，使用JavaScript检测播放状态？

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

- Variant

Answer 5

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

你可以使用这个链接，了解有关it技术的更多信息。

- user9106349

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

- Haolin Zhang

---

你能提供这些属性的文档链接吗？ - brasofilo

@brasofilo 我认为以下链接将提供足够的信息来使用JavaScript控制视频：https://www.w3schools.com/tags/ref_av_dom.asp - Haolin Zhang

Answer 7

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

正如在 https://html.spec.whatwg.org/ 中所解释的，当以下条件之一满足时，将触发 playing 事件： "readyState 新等于或大于 HAVE_FUTURE_DATA 并且 paused 为 false，或者 paused 新为 false 并且 readyState 等于或大于 HAVE_FUTURE_DATA"

- Sanjay C

Answer 8

这是一个简单的代码，用于播放/暂停按钮。

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

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

- Janis