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

Question

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

javascripthtmlvideohtml5-videodom-events

108

我查看了几个问题，想知道HTML5元素是否正在播放，但找不到答案。我查看了W3文档，其中有一个名为“playing”的事件，但似乎无法使用。

这是我的当前代码：

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

- user1076821

我对这方面完全没有经验，但你能从视频标签中获取信息来获得播放时间戳吗？你可以设置一个90毫秒的计时器，并跟踪视频的播放位置，如果时间戳在增加，那么你就知道视频正在播放。 - jcolebrand

另请参阅：HTML5视频标签，用JavaScript检测播放状态？ - Drew Gaynor

17个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JediSal · Answer 1

我只是使用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)执行某些操作。

希望这能帮到您...

- Simon the Salmon · Answer 2

我刚刚查看了@tracevipin添加的链接(http://www.w3.org/2010/05/video/mediaevents.html)，并且发现有一个名为“paused”的属性。我已经测试过它，它可以正常工作。

- Damaris · Answer 3

这是我的代码 - 通过调用函数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';
  }
}

- drifter_Min · Answer 4

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

- Anish · Answer 5

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

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

- Santiago Vasquez · Answer 6

播放视频时的一个示例

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

- Deprecated Darren · Answer 7

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

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

...

if(media.isplaying) //do something

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