How can I track a click event of an embedded video

2019-01-24 13:39发布

站内问答 / PHP
1485 2 4

Is there a way to track play counts for embedded videos? Ideally without resorting to a thumbnail linked to launch the embed / iframe code.

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

How can I track play counts for each of these videos?

2条回答
贪生不怕死
2楼-- · 2019-01-24 14:25

This works for Vimeo... Triggers a javascript alert on the "Play" event but there are a number of other events like "finished", "pause", "playProgress" (constantly updating while video is playing)... 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'");
}

});
查看更多
0人赞 添加讨论(0) 举报
乱世女痞
3楼-- · 2019-01-24 14:36

Ryan, the only way to do this is to use the video sharing site's player api(s), as html and javascript have no native support for this.

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

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)