从 javascript 文件加载视频时，在播放 <video> 和暂停时获取事件

Question

我有一个包含 javascript 文件的 html 页面。此 .js 文件插入 html 视频播放器。我需要检测视频何时播放以及视频何时暂停，是否可以发出警报？例如：警报（'Video is playing'）；警报（'Video is paused'）；

不幸的是，视频标签没有任何 class 或 ID，为此我从 whosebug.com 尝试过的大多数代码对我都不起作用，因为我没有任何选择器。

<video width="600px" height="600px" preload="metadata"><source src="video.mp4" type="video/mp4"></video>

此代码不在 html 文件中，而是由 javascript 文件加载的。

Answer 1

可以参考W3CHTML DOM Video Object 如果您想查看视频是否正在播放，解决方案是在 setInterval

中设置一个函数

var currTimeChk = 0;
setInterval(function(){

    var currTime = document.getElementById("vid").currentTime;

    if(currTime  != currTimeChk ){
        currTimeChk  = currTime;
        /* video is playing */
        alert('Video is playing');
    }else{
        /* video is paused*/
        alert('Video is paused');
    }
},100)

Answer 2

不需要jQuery。

您将事件侦听器添加到每个 video 元素。如果媒体事件会冒泡，那么您只需要在 documentElement 上监听这些事件类型并切换事件的 target 节点。

由于这是不可能的，您需要通过遍历 HTMLCollection ([...document.getElementsByTagName('video')].forEach(/* ... */)) 将侦听器添加到所有现有的 video 元素，并且您需要将这些侦听器添加到每个未来video 元素。为此你需要 MutationObserver

在这个例子中，我有两个现有的视频，两个是由 JS 添加的（一个有自动播放，一个没有）。我对 play 和 pause 事件做出反应并相应地更改视频的 class（播放：绿色，暂停：粉红色）

"use strict";
console.clear();

{
  
  const events = ['play', 'pause']
  
  
  // Called upon play or pause event of video element
  function listener(e) {  
    e.target.classList.remove('playing');
    e.target.classList.remove('paused');
    switch(e.type) {
      case 'play':
        e.target.classList.add('playing');
        break;
      case 'pause':
        e.target.classList.add('paused');
        break;
    }
  }
  
  // Add Event Listeners to existing video elements
  [...document.getElementsByTagName('video')].forEach(v => {
    events.forEach(ev => v.addEventListener(ev, listener)) 
    
  })

  // called by MutationObserver
  // Adds Eventlisteners to newly inserted video elements
  
  
  function react(mutationList, observer) {
    [...mutationList].forEach(mr => {
      mr.addedNodes.forEach(node => {
        if (node.nodeType === 1 && node.tagName.toLowerCase() === 'video') {
          events.forEach(ev => node.addEventListener(ev, listener)) 
        }
      })
    })
  }

  
  const observer = new MutationObserver(react);
  const config = { childList: true, subtree: true };
  
  observer.observe(document.documentElement, config);

  
}



document.body.insertAdjacentHTML('beforeend', "<video controls src=\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4\" width=\"360\" height=\"240\" autoplay muted playsinline></video>\n")

document.body.insertAdjacentHTML('beforeend', "<video controls src=\"https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4\" width=\"360\" height=\"240\"></video>\n")

video {
  background-color: gray;
  border: 10px solid black;
}
video.playing {
  background-color: lightgreen;
  border-color: green;
}
video.paused {
  background-color: pink;
  border-color: red;
}

<video controls src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4" width="360" height="240" autoplay muted playsinline></video>
<video controls src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4" width="360" height="240"></video>

从 javascript 文件加载视频时，在播放 <video> 和暂停时获取事件

Get event when <video> is playing and when is paused when the video is loaded from a javascript file

html

javascript

jquery

html5-video