如何跟踪嵌入视频（youtube、vimeo 等）的点击事件？ （跟踪播放次数）
Posted
技术标签:
【中文标题】如何跟踪嵌入视频（youtube、vimeo 等）的点击事件？ （跟踪播放次数）【英文标题】：How can I track a click event of an embedded video (youtube, vimeo, etc.)? (to track play count) 【发布时间】：2011-11-07 19:18:13 【问题描述】：有没有办法跟踪嵌入式视频的播放次数？理想情况下，无需借助链接来启动嵌入/iframe 代码的缩略图。
示例（在jsFiddle 上亲自尝试）：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="log"></div>
<ul>
<li class="video" id="video1"><iframe src="http://www.youtube.com/embed/z6lL83wl31E" frameborder="0" allowfullscreen></iframe><li>
<li class="video" id="video2"><iframe src="http://player.vimeo.com/video/28231570?title=0&byline=0&portrait=0" frameborder="0"></iframe></li>
<li class="video" id="video3"><embed flashVars="playerVars=autoPlay=no" src="http://www.metacafe.com/fplayer/3153323/the_three_stooges_minisode_beer_barrel_polecats_season_1_episode_0008.swf" wmode="transparent" allowFullScreen="true" allowScriptAccess="always" name="Metacafe_3153323" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></li>
</ul>
<script>
/* 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. */
);
</script>
</body>
</html>
如何跟踪每个视频的播放次数？
【问题讨论】：
【参考方案1】：这适用于 Vimeo... 在“播放”事件上触发 javascript 警报，但还有许多其他事件，如“完成”、“暂停”、“播放进度”（在视频播放时不断更新）。 . 使用 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'");
);
【讨论】：
【参考方案2】：Ryan，这样做的唯一方法是使用视频共享网站的播放器 API，因为 html 和 javascript 对此没有原生支持。
要为 youtube 视频执行此操作，您可以查看文档 here
要为 vimeo 视频执行此操作，您可以查看文档 here
【讨论】：
以上是关于如何跟踪嵌入视频（youtube、vimeo 等）的点击事件？ （跟踪播放次数）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 php 获取 youtube 和 vimeo 嵌入代码的视频缩略图？
如何将占位符图像添加到嵌入的 Vimeo 和 Youtube 视频中？
如何在 ruby on rails 中显示 vimeo 和 youtube 嵌入链接的缩略图？