Javascript 检测HTML5视频元素是否正在播放

我看了几个问题，想知道是否有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");
    }
  }
}

var stream=document.getElementsByTagName（'video'）；
函数pauseStream（）{
如果（流媒体播放）{
对于（变量i=0；i标题”）.addClass（“暂停注释”）；
$（“.paused_note”）。文本（“流暂停”）；
$（'.paused_note'）.css（“不透明度”，“1”）；
}
}
}

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

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

stream.paused

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

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

所以解决办法是

十个变量videoStatus

为视频的不同事件添加事件处理程序

使用事件处理程序更新视频状态

使用videoStatus识别视频的状态

本页将让您更好地了解视频事件。播放此页面上的视频，查看事件是如何触发的。

---

我遇到了一个类似的问题，在播放器开始播放之前，我无法将事件侦听器添加到播放器中，因此@Diode的方法不幸无法工作。我的解决方案是检查播放器的“暂停”属性是否设置为true。这是因为即使在视频开始播放之前和结束之后，“暂停”也被设置为true，而不仅仅是当用户单击“暂停”时。

在我看来，您可以检查

！stream.paused

我们正在使用此功能来防止人们在播放或暂停视频时意外离开页面

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

$(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.";
    };
}

$（文档）.ready（函数（）{
var视频=$（“视频”网络广播视频）；
如果（video.length我刚刚查看了添加的@tracevipin（）链接，我看到了一个名为“暂停”的属性

我已经对它进行了测试，效果很好。
这是我的代码-通过调用函数
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';
  }
}

我的回答是：

MediaElement
没有一个属性来说明它是否正在播放。但是您可以为它定义一个自定义属性

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})

现在，您可以在
视频
或
音频
元素上使用它，如下所示：

if(document.querySelector('video').playing){
    // Do anything you want to
}

将eventlisteners添加到媒体元素。可能触发的事件有：



Html5媒体活动
var media=document.getElementById（'myVideo'）；
//比赛项目
media.addEventListener（“播放”，函数（）{
$（“#输出”）.html（“播放事件触发”）；
});
//暂停事件
addEventListener（“暂停”，函数（）{
$（“#输出”）.html（“暂停事件触发”）；
});
//寻找事件
addEventListener（“查找”，函数（）{
$（“#输出”）.html（“搜索事件触发”）；
});
//卷更改事件
media.addEventListener（“卷更改”，函数（e）{
$（“#输出”）.html（“已触发Volumechange事件”）；
});
一个bit示例


var audio=新音频（'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
如果（音频暂停）{
音频播放
}否则{
audio.pause（）
}
我只是简单地使用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根据本例中的状态变量进行操作

希望这有助于……最佳方法：

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

  }

}

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

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


当我点击播放或暂停时，只需切换它。
我的要求是点击视频并在播放时暂停，或者在暂停时播放。这对我很有效



内部应用组件.ts

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

播放视频时的一个小示例

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

我绝对没有这方面的经验，但你能从视频标签中获取信息以获得播放时间戳吗？你能做的是在90毫秒上设置一个计时器，并跟踪你在视频中的位置，如果时间戳在前进，你知道视频正在播放…可能的重复也请参见：是的，我通常在事件处理程序上使用这个r单击播放/暂停按钮：videoNode.paused？videoNode.play（）：videoNode.pause（）；
！video.paused
或
video.paused==false
不一定表示视频正在播放-它只是告诉您“video.play（）已启动，但视频仍可能正在加载或播放”。若要检测它是否正在播放，请使用video.onplaying事件来检测它是否正在加载和播放，例如
video.onplaying=function（）{console.log（'video is now loaded and playing'）；}
。此区别对于您的需要可能很重要，也可能不重要。if（video.paused）{}等等……什么？这个问题是关于视频而不是音频的！@KurtVandenBranden没有区别，他们都有相同的事件handlers@Brad，我知道他们有相同的事件处理程序，但可能大多数寻找此类信息的人没有，因此
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;
    }
}