2011-08-31 63 views
6

有沒有一種方法可以跟蹤嵌入式視頻的播放次數?理想情況下,不需要鏈接到啓動嵌入/ iframe代碼的縮略圖。如何追蹤嵌入式視頻(YouTube,VIMEO等)的點擊事件? (跟蹤播放次數)

例(你自己試試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&amp;byline=0&amp;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('&nbsp;'); 
     }); 
     $('.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> 

如何跟蹤播放次數爲每這些視頻嗎?

回答

7

瑞安,唯一的方法就是使用視頻分享網站的播放器api,因爲html和javascript沒有本地支持。

通過YouTube視頻做到這一點,你可以檢查出的文檔here

要爲VIMEO視頻做到這一點,你可以檢查出的文檔here

4

這適用於Vimeo的......觸發一個javascript在「播放」事件警報,但還有一些其他事件,如「完成」,「暫停」,「playProgress」(不斷更新,而視頻正在播放)...使用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'"); 
} 

}); 
相關問題