跟踪html5视频控制区域中的点击播放按钮答案

【问题标题】：Track clicks to play button in html5 video control area跟踪html5视频控制区域中的点击播放按钮
【发布时间】：2018-05-25 13:13:16
【问题描述】：

我有一个 HTML5 视频，当点击海报和点击控制栏中的播放按钮时播放。每当播放视频时，我都需要一个跟踪像素来触发。我将视频包装在一个 div 中，并在 div 中添加了一个触发像素的 onlick。点击海报/视频区域时触发。但是即使 div 覆盖了控件，单击控件区域时它也不会触发。如何捕捉对控件的点击？或者更好的是，确定视频何时播放并触发像素。

代码如下：

<div onclick="obApi('track', 'Watch Video');">
<video controls="controls" style="width: 100%;" poster="https://cdn.shopify.com/s/files/1/0315/7737/t/2/assets/poster_fox.jpg" onclick="this.play();">
<source src="https://cdn.shopify.com/s/files/1/0315/7737/files/fw_fox.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>

【问题讨论】：

标签： javascript html5-video

【解决方案1】：

视频标签有很多events可以收听。一个是play，它将在视频不再暂停时触发。以下是如何收听该事件的示例。

let clicks = 0;
let video = document.getElementById("myVideo");
video.addEventListener("play", obApi);

function obApi() {
  clicks++;
  console.log(`I've been played ${clicks} time/s`);
}

<video id="myVideo" controls="controls" style="width: 100%;" poster="https://cdn.shopify.com/s/files/1/0315/7737/t/2/assets/poster_fox.jpg" onclick="this.play();">
<source src="https://cdn.shopify.com/s/files/1/0315/7737/files/fw_fox.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

【讨论】：