在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area)

我点击了一张HTML5视频播放海报，并点击了控制栏中的播放按钮。 每当播放视频时，我都需要一个跟踪像素。 我将视频封装在div中，并将onlick添加到触发像素的div上。 点击海报/视频区域时触发。 但即使div覆盖控件，点击控制区域时也不会触发。 我怎样才能捕捉点击的控件？ 或者更好的是，确定何时播放视频并将像素点亮。

代码如下：

I have an HTML5 video that plays when the poster is clicked, and when the play button in the control bar is clicked. I need a tracking pixel to fire whenever the video is played. I wrapped the video in a div and added an onlick to the div that fires the pixel. It fires when the poster/video area is clicked. But even tho the div covers the controls, it does not fire when the control area is clicked. How can I catch clicks to the controls? Or better yet, determine when the video gets played and fire the pixel.

Here is the code:

原文：https://stackoverflow.com/questions/50530087

更新时间：2020-01-11 16:45

最满意答案

视频标签有很多你可以听的事件 。 一种是在视频不再暂停时播放。 以下是您如何收听该事件的示例。

let clicks = 0;

let video = document.getElementById("myVideo");

video.addEventListener("play", obApi);

function obApi() {

clicks++;

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

}

Your browser does not support the video tag.

The video tag has many events you can listen to. One being play which will fire when the video is no longer paused. Here is an example of how you can listen to that event.

let clicks = 0;

let video = document.getElementById("myVideo");

video.addEventListener("play", obApi);

function obApi() {

clicks++;

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

}

Your browser does not support the video tag.

相关问答

似乎苹果的人再次改变了阴影。 为了隐藏控件，您需要使用以下CSS： /* This used to work for parent element of button divs */

/* But it is not enough now, below dont hide play button parent div */

*::-webkit-media-controls-panel {

display: none!important;

-webkit-appearance: non

...

我不确定我是否理解你，但也许你应该像你这样的ajax调用成功调用该游戏： $('nav li').click(function(){

$.ajax({

url: "whatever"

}).done(function() {

//do some stuff

triggerAutoplay();

});

});

function triggerAutoplay() {

$('video[autoplay]').each(function

...

评论时你的代码有一些错误。 我修复了它们，现在你可以看到一个工作的jsfiddle 使用Javascript var video = $('video').get(0);

$('video, #video-controls').mouseenter(function(){

if($('#video-controls').css('display') === 'none')

$('#video-controls').show();

});

$('video, #v

...

您添加onclick事件以暂停和恢复视频，但您没有处理暂停和播放事件。 当您从控制栏中暂停播放时，会触发这些事件。 这是我会这样做的： var video = document.getElementById("video");

function StartPauseHandler(e) {

if (e.type === "pause") {

console.log("paused");

} else if (e.type === "playing") {

...

你可能会让这个看起来更优雅，但下面的代码示例将允许你有一些按钮来改变HD和常规版本之间的来源(根据按钮的ID，但你可以根据需要改变逻辑)。 代码还会检查浏览器是否支持mp4，ogg或webm，并默认使用第一种支持的格式(因此，如果您使用代码的那部分，则可能需要对每种类型进行编码

Your b

...

视频标签有很多你可以听的事件 。 一种是在视频不再暂停时播放。 以下是您如何收听该事件的示例。 let clicks = 0;

let video = document.getElementById("myVideo");

video.addEventListener("play", obApi);

function obApi() {

clicks++;

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

}

...

您的iframe文档应与原始文档位于同一域中，而是属于同源策略限制。 如果没关系，那么这里是一个例子： 的index.html

Play

function play_video()

{

...

正如我在Lynda HTML5视频中看到的，关于播放/暂停按钮，只需使用： 播放/暂停： var video = document.getElementById("my_video");

$("#play_button").bind("click", function(){

video.play();

));

$("play_toggle").bind("click", function() {

if (video.paused) {

$(this).html("Pause")

...

我问了一个与此问题非常类似的问题。( 如何防止点击Firefox中的HTML5视频控件时出现事件冒泡 ) 我知道在不同浏览器中始终如一地执行此操作的唯一方法是在视频上进行叠加，然后对该叠加层进行自定义控制。 有几个原因。 例如，“无用”点击将取决于浏览器： Firefox会在点击视频时切换播放/暂停。 IE将有一个“无用”点击，但双击将进入全屏。 Chrome和Safari将获得“无用”点击 但如果你不关心Firefox那么这个例子对你有用，但只适用于Chrome，Safari和IE： http

...

如果您更改了JavaScript 加载类型 No wrap - in

那么它可以正常工作。 的jsfiddle If you change your JavaScript load type No wrap - in then it works. JSFiddle