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

【问题标题】：How to know if HTML video play event fired by user click or auto-play?如何知道用户点击或自动播放是否触发了 HTML 视频播放事件？
【发布时间】：2017-02-09 10:24:35
【问题描述】：

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

【问题讨论】：

标签： html html5-video dom-events

【解决方案1】：

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

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

由于这有点“骇人听闻”，但在某些特殊情况下，状态会滑过，预加载和准备时间，快速用户单击按钮等都可能起作用。

一个概念示例：

（注意：由于某种原因，在play 事件下方的stack-sn-p 中也会触发暂停......）。

一如既往，使用风险自负！

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>

【讨论】：

运行代码sn -p时出现问题。视频play 事件在添加事件侦听器之前触发。我是不是做错了什么？
@MartinZhai 通常可以通过最后设置src来解决（如示例）
我发现 Chrome 在单击播放/暂停按钮时不会生成 click 事件。一开始我以为这是最新版本的新功能，但我在 Chrome 40+ 上试过，还是一样。你有解决办法吗？
@MartinZhai 似乎在 Chrome/Opera 中被阻止（控制（影子 DOM）防止冒泡我猜的点击事件）。我想出了一个新策略并更新了答案。