Question

我有一个HTML5视频，可以在单击海报时播放，也可以在单击控制栏中的播放按钮时播放。我需要一个跟踪像素，以便在播放视频时触发。我将视频包装在一个div中，并添加一个onlick到激发像素的div。单击海报/视频区域时会触发。但是即使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>

Answer 1

视频广告代码中有许多events您可以收听。一个是play，当视频不再暂停时会触发。以下是您可以如何收听该事件的示例。

＆＃13;

let clicks = 0;
let video = document.getElementById("myVideo");
video.addEventListener("play", obApi);

function obApi() {
  clicks++;
  console.log(`I've been played ${clicks} time/s`);
}

＆＃13;

<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>

＆＃13;

跟踪点击以在html5视频控制区域中播放按钮

1 个答案: