检测 HTML5 视频元素是否正在播放 [重复]答案

【问题标题】：Detect if HTML5 Video element is playing [duplicate]检测 HTML5 视频元素是否正在播放 [重复]
【发布时间】：2012-01-25 19:28:15
【问题描述】：

我查看了几个问题以了解是否正在播放 HTML5 元素，但找不到答案。我查看了 W3 文档，它有一个名为“正在播放”的事件，但我似乎无法让它工作。

这是我当前的代码：

var stream = document.getElementsByTagName('video');

function pauseStream() {
  if (stream.playing) {
    for (var i = 0; i < stream.length; i++) {
      stream[i].pause();
      $("body > header").addClass("paused_note");
      $(".paused_note").text("Stream Paused");
      $('.paused_note').css("opacity", "1");
    }
  }
}

【问题讨论】：

我完全没有这方面的经验，但是您能从视频标签中获取信息以获取播放时间时间戳吗？你可以做的是一个 90 毫秒的计时器，并跟踪你在视频中的位置，如果时间戳正在推进，你就知道视频正在播放......
另见：HTML5 video tag, javascript to detect playing status?

标签： javascript html video html5-video dom-events

【解决方案1】：

在我看来，您可以只检查!stream.paused。

【讨论】：

!video.paused 或 video.paused === false 不一定表示视频正在播放 - 它只是告诉您“video.play() 已触发，但视频仍可加载或播放”。要检测它是否正在播放，请使用 video.onplaying 事件来检测它现在是否已加载并正在播放，例如video.onplaying = function() { console.log('Video is now loaded and playing'); }。这种区别可能对您的需求很重要，也可能不重要。

【解决方案2】：

在How to tell if a <video> element is currently playing? 上查看我的答案：

MediaElement 没有一个属性来判断它是否正在播放。但是你可以为它定义一个自定义属性。

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){
    // Do anything you want to
}

【讨论】：

MDN 说它应该从 HTMLMediaElement 继承，但我必须将该属性附加到 HTMLVideoElement.prototype。

【解决方案3】：

注意：这个答案是在 2011 年给出的。请在继续之前检查 HTML5 视频的更新文档。

如果您只想知道视频是否暂停，请使用标志stream.paused。

视频元素在获取其播放状态时没有属性。但是有一个事件“正在播放”，它将在开始播放时触发。停止播放时也会触发一个名为“结束”的事件。

所以解决办法是：

声明一个变量videoStatus。
为不同的视频事件添加事件处理程序。
使用事件处理程序更新 videoStatus。
使用 videoStatus 来识别视频的状态。

此页面将使您更好地了解视频事件。播放此页面上的视频，看看事件是如何触发的。
http://www.w3.org/2010/05/video/mediaevents.html

【讨论】：

【解决方案4】：

jQuery(document).on('click', 'video', function(){
        if (this.paused) {
            this.play();
        } else {
            this.pause();
        }
});

【讨论】：

【解决方案5】：

将事件监听器添加到您的媒体元素。可能触发的事件有：Audio and video media events

<!DOCTYPE html> 
<html> 
<head>  
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Html5 media events</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head> 
<body >
    <div id="output"></div>
    <video id="myVideo" width="320" height="176" controls autoplay>
        <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg">
    </video>
    <script>
        var media = document.getElementById('myVideo');

        // Playing event
        media.addEventListener("playing", function() {
            $("#output").html("Playing event triggered");
        });
   
        // Pause event
        media.addEventListener("pause", function() { 
            $("#output").html("Pause event triggered"); 
        });

        // Seeking event
        media.addEventListener("seeking", function() { 
            $("#output").html("Seeking event triggered"); 
        });

        // Volume changed event
        media.addEventListener("volumechange", function(e) { 
            $("#output").html("Volumechange event triggered"); 
        });

    </script>   
</body> 
</html>

【讨论】：

【解决方案6】：

最佳方法：

function playPauseThisVideo(this_video_id) {

  var this_video = document.getElementById(this_video_id);

  if (this_video.paused) {

    console.log("VIDEO IS PAUSED");

  } else {

    console.log("VIDEO IS PLAYING");

  }

}

【讨论】：

这并不完全正确……因为当它不播放时，它也可能已经结束，甚至没有开始。从技术上讲，您的答案可能是正确的；-) 请参阅stackoverflow.com/a/6877530/1029469

【解决方案7】：

我遇到了一个类似的问题，我无法在播放器开始播放之前之后添加事件监听器，所以很遗憾@Diode 的方法不起作用。我的解决方案是检查玩家的“暂停”属性是否设置为 true。这是因为“paused”设置为 true，甚至在视频开始播放之前和结束之后，而不仅仅是在用户单击“pause”时。

【讨论】：

是的，我通常在事件处理程序上使用它来单击播放/暂停按钮： videoNode.paused ？ videoNode.play() : videoNode.pause();

【解决方案8】：

您可以使用“正在播放”事件侦听器 =>

const video = document.querySelector('#myVideo');

video.addEventListener("playing", function () {
     // Write Your Code
});

【讨论】：

【解决方案9】：

这是我们在 http://www.develop.com/webcasts 使用的方法，以防止人们在视频播放或暂停时意外离开页面。

$(document).ready(function() {

    var video = $("video#webcast_video");
    if (video.length <= 0) {
        return;
    }

    window.onbeforeunload = function () {
        var htmlVideo = video[0];
        if (htmlVideo.currentTime < 0.01 || htmlVideo.ended) {
            return null;
        }

        return "Leaving this page will stop your video.";
    };
}

【讨论】：

【解决方案10】：

一个例子

var audio = new Audio('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')

if (audio.paused) {
  audio.play()
} else {
  audio.pause()
}

【讨论】：

这个问题是关于视频，而不是音频！
@KurtVandenBranden 没有区别，它们都有相同的事件处理程序
@Brad，我知道他们有相同的事件处理程序，但可能大多数正在寻找此类信息的人没有，因此这个答案非常令人困惑。

【解决方案11】：

我刚刚查看了@tracevipin 添加的链接（http://www.w3.org/2010/05/video/mediaevents.html），我看到了一个名为“paused”的属性。

我已经测试过了，它工作得很好。

【讨论】：

【解决方案12】：

这是我的代码 - 通过调用函数play()，视频播放或暂停，按钮图像发生变化。

通过调用函数volume() 可以打开/关闭音量，并且按钮图像也会发生变化。

function play() { 
  var video = document.getElementById('slidevideo'); 
  if (video.paused) {
    video.play()
    play_img.src = 'img/pause.png'; 
  }
  else {
    video.pause()
    play_img.src = 'img/play.png';
  }
}

function volume() { 
  var video = document.getElementById('slidevideo');
  var img = document.getElementById('volume_img');
  if (video.volume > 0) {
    video.volume = 0
    volume_img.src = 'img/volume_off.png';  
  }
  else {
    video.volume = 1
    volume_img.src = 'img/volume_on.png';
  }
}

【讨论】：

if (video.paused) {} Wait..what?

【解决方案13】：

我只是非常简单地使用了 html 视频标签的 onpause 和 onplay 属性。创建一些 javascript 函数来切换全局变量，以便页面知道其他函数的视频状态。

以下Javascript：

   // onPause function
   function videoPause() {
      videoPlaying = 0;
   }

   // onPause function
   function videoPlay() {
      videoPlaying = 1;
   }

HTML 视频标签：

<video id="mainVideo" width="660" controls onplay="videoPlay();" onpause="videoPause();" >
                             <source src="video/myvideo.mp4" type="video/mp4">

                            </video>

在这种情况下，您可以使用 onclick javascript 来根据状态变量执行某些操作 videoPlaying。

希望这会有所帮助...

【讨论】：

【解决方案14】：

我的要求是点击视频，如果正在播放则暂停，如果暂停则播放。这对我有用。

<video id="myVideo" #elem width="320" height="176" autoplay (click)="playIfPaused(elem)">
  <source src="your source" type="video/mp4">
</video>

在 app.component.ts

内

playIfPaused(file){
    file.paused ? file.play(): file.pause();
}

【讨论】：

【解决方案15】：

var video_switch  = 0;

function play() {

    var media = document.getElementById('video');

    if (video_switch == 0)
    {
        media.play();
        video_switch = 1;
    }
    else if (video_switch == 1)
    {
        media.pause();
        video_switch = 0;
    }
}

【讨论】：

感谢您的回答。最好简要说明您的代码示例如何回答问题，以及为什么原始帖子的代码无法按预期工作。欢迎来到 SE！

【解决方案16】：

我只是手动将它添加到媒体对象中

let media = document.querySelector('.my-video');
media.isplaying = false;

...

if(media.isplaying) //do something

然后在我点击播放或暂停时切换它。

【讨论】：

【解决方案17】：

播放视频时的一个小例子

  let v = document.getElementById('video-plan');
  v.onplay = function() {
      console.log('Start video')
  };

【讨论】：