Как я могу отследить событие щелчка встроенного видео (YouTube, Vimeo и т. Д.)?(для отслеживания количества игр) - PullRequest
Новая
       27

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

6 голосов
/ 31 августа 2011

Есть ли способ отслеживать количество воспроизведений для встроенных видео?В идеале, не прибегая к миниатюре, связанной для запуска кода для встраивания / вставки.

Пример (попробуйте сами на 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>

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

Ответы [ 2 ]

6 голосов
/ 31 августа 2011

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

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

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

4 голосов
/ 07 ноября 2013

Это работает для 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'");
}

});
...