是否有一种方法可以跟踪嵌入式视频的播放计数?理想情况下，无需使用缩略图链接来启动嵌入/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 width="480" height="390" 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" width="400" height="225" 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" width="440" height="248" 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>
如何跟踪这些视频的播放计数?
Ryan，要做到这一点，唯一的方法是使用视频分享网站的播放器api，因为html和javascript没有原生支持。
要为youtube视频做这个，你可以查看这里的文档
对于vimeo视频，您可以查看这里的文档
这适用于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'");
}
});