Question

有一个带有autoplay属性的HTML视频代码。我想知道何时触发play事件，是由自动播放引起的，还是由用户点击播放按钮引起的？

Answer 1

AFAIK并没有真正的防弹方式来了解开箱即用的区别（除非我忽略了这个属性）。

在这种情况下解决这个问题的一种方法是在不同阶段使用旗帜。例如，在视频元素上的canplay事件上设置一个标志，该标志在合理的时间范围内被清除（过期），然后可以与play事件一起使用（我将在片刻）。

由于这有点“hackish”，可能会出现状态滑落的特殊情况，预加载和准备时间，快速用户点击按钮等都可能发挥作用。

概念示例：

（注意：出于某种原因，在play事件下方的堆栈片段中也会暂停...）。

一如既往，请自担风险使用！

var video = document.querySelector("video");

var tref;                                         // to expire flag below
var autoPlay = false;                             // if we started by autoplay (expires)

video.addEventListener("canplay", function(e) {
  clearTimeout(tref);                             // reset expire
  autoPlay = this.autoplay;
  if (!autoPlay) document.querySelector("div").innerHTML = "Ready."; 
  setTimeout(function() {autoPlay = false}, 100); // clear autoPlay flag
});

video.addEventListener("play", function(e) {
  document.querySelector("div").innerHTML = autoPlay ? "Autoplay" : "Manual play";
});

video.src = "//media.w3.org/2010/05/sintel/trailer.mp4";

video {width:320px}

<div>Loading video...</div>
<video muted autoplay controls preload=auto></video>

如何知道用户点击或自动播放是否触发了HTML视频播放事件？

1 个答案: