如何追踪HTML5视频控制区播放按钮点击并触发追踪像素？

首先，你遇到的问题根源在于：浏览器原生的视频控制栏是独立于你的DOM结构渲染的，它的层级比外层div更高，所以点击控制栏时，事件不会冒泡到外层的div上，导致你的onclick事件无法触发。

最可靠的方案不是依赖点击事件，而是直接监听视频的play事件——不管用户是点击海报、控制栏播放按钮，还是用键盘触发播放，只要视频开始播放，这个事件就会触发，完全覆盖所有播放场景。

最优实现方案 #

我们可以通过给video元素添加play事件监听器来实现，同时可以避免重复追踪（比如用户暂停后再次播放）：

<div>
  <video id="targetVideo" controls style="width: 100%;" poster="https://cdn.shopify.com/s/files/1/0315/7737/t/2/assets/poster_fox.jpg">
    <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>

<script>
  // 获取视频元素
  const video = document.getElementById('targetVideo');
  // 标记是否已经触发过追踪，避免重复执行
  let hasTriggeredTracking = false;

  // 监听视频播放事件
  video.addEventListener('play', () => {
    if (!hasTriggeredTracking) {
      // 执行你的追踪像素逻辑
      obApi('track', 'Watch Video');
      // 标记为已追踪，后续播放不再触发
      hasTriggeredTracking = true;
    }
  });
</script>

方案优势 #

• 覆盖所有播放触发方式：点击海报、控制栏播放键、键盘操作甚至JS主动调用play()方法，都能触发。
• 避免重复追踪：通过hasTriggeredTracking变量确保只在第一次播放时触发追踪，如果你需要每次播放都触发，去掉这个变量即可。
• 不需要依赖外层div的点击事件，代码更简洁可靠。

为什么原来的方法不生效？ #

你外层div的onclick无法捕获控制栏点击，是因为浏览器的原生控制栏是由浏览器自身渲染的独立UI组件，它不属于你编写的DOM结构，事件不会向上冒泡到外层div，所以你的点击事件无法捕获到控制栏的交互。

内容的提问来源于stack exchange，提问作者webguy