如何跟踪嵌入video（youtube，vimeo等）的点击事件？ （跟踪比赛次数）

有没有办法跟踪嵌入video的播放次数？ 理想情况下，无需使用链接的缩略图来启动embed / iframe代码。

示例（在jsFiddle上自己尝试）：

        
 
 
 
 
 
  /* Here's what I've tried so far: */ $('.video').mouseover(function(){ $('#log').html('Mouseover!'); /*alert('Track mouseovers instead? Is this the best I can do?');*/ }); $('.video').mouseout(function(){ $('#log').html(' '); }); $('.video').mousedown(function(){ $('#log').html('Mousedown!'); alert('mousedown'); /* This will track mousedown events in embed objects (not iframes), but not allow the click event to pass through to object. */ });    

如何跟踪每个video的播放次数？

Answer 1

Ryan，唯一的方法就是使用video共享网站的播放器api（s），因为html和javascript没有本机支持。

要为youtubevideo执行此操作，您可以在此处查看文档

要为vimeovideo执行此操作，您可以在此处查看文档

Answer 2

这适用于Vimeo …在“Play”事件上触发javascript警报，但还有许多其他事件，如“已完成”，“暂停”，“playProgress”（在video播放时不断更新）…使用Jquery

 $(document).ready( function () { var f = $('iframe'), url = f.attr('src').split('?')[0], status = $('.status'); // Listen for messages from the player if (window.addEventListener){ window.addEventListener('message', onMessageReceived, false); } else { window.attachEvent('onmessage', onMessageReceived, false); } // Handle messages received from the player function onMessageReceived(e) { var data = JSON.parse(e.data); switch (data.event) { case 'ready': onReady(); break; case 'play': onPlay(); break; } } // Call the API when a button is pressed $('button').on('click', function() { post($(this).text().toLowerCase()); }); // Helper function for sending a message to the player function post(action, value) { var data = { method: action }; if (value) { data.value = value; } f[0].contentWindow.postMessage(JSON.stringify(data), url); } function onReady() { status.text('ready'); post('addEventListener', 'play'); } function onPlay() { alert("Dude done clicked 'Play'"); } });