Как я могу отслеживать событие клика встроенного видео (youtube,vimeo и т. д.)? (отслеживать счетчик )

есть ли способ отслеживать количество воспроизведения для встроенных видео? В идеале, не прибегая к миниатюре, связанной с запуском кода embed / 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&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>

Как я могу отслеживать количество воспроизведения для каждого из этих видео?

6
analytics embed jquery php video

2 ответов

Райан, единственный способ сделать это-использовать api(ы) проигрывателя сайта обмена видео, поскольку html и javascript не имеют собственной поддержки для этого.

чтобы сделать это для видео youtube, вы можете проверить документацию здесь

чтобы сделать это для видео vimeo, вы можете проверить документацию здесь

6

это работает для Vimeo... Запускает предупреждение javascript о событии "Play", но есть ряд других событий, таких как" готово"," пауза"," 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'");
}

});
4