Geek Answers Handbook

How can I track the click event of an embedded video (youtube, vimeo, etc.)? (to track the amount of play)

Is there a way to track the playback amount of embedded videos? Ideally, without resorting to the sketch associated with running the embed / iframe code.

Example (try it yourself: 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 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>

How can I track the playback amount for each of these videos?

+6
jquery php video analytics embed
source share
2 answers

Ryan, the only way to do this is to use the api (s) player to share videos, since html and javascript do not have built-in support for this.

To do this for youtube videos, you can check the documentation here

To do this for vimeo video, you can see the documentation here

+7
source share

This works for Vimeo ... Triggers a javascript warning on the "Play" event, but there are a number of other events, such as "finished", "pause", "playProgress" (constantly updated during video playback). Uses 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'"); } });
+4
source share

More articles:


All Articles