Wie kann ich verfolgen eine click-Ereignis eines eingebetteten Videos (youtube, vimeo, etc.)? (um den track zu spielen, zählen)

Gibt es einen Weg, um zu spielen, zählt für eingebettete videos? Im Idealfall, ohne Rückgriff auf ein thumbnail verlinkt auf starten Sie den embed /iframe-code.

Beispiel (versuchen Sie es selbst 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>

Wie kann ich den track spielen zählt für jedes dieser videos?

InformationsquelleAutor Ryan | 2011-08-31

  1. 6

    Ryan, der einzige Weg, dies zu tun, ist die Verwendung der video-sharing-Website, player api(s), html-und javascript haben keine native Unterstützung für diese.

    Dazu für youtube-videos, die Sie heraus überprüfen können die Dokumentation hier

    Dazu für vimeo-videos, die Sie heraus überprüfen können die Dokumentation hier

    InformationsquelleAutor Kevin Pei

  2. 4

    Dies funktioniert für Vimeo... Löst ein javascript-alert auf den "Play" - Veranstaltung aber es gibt eine Reihe von anderen Veranstaltungen, wie "fertig", "pause", "playProgress" (ständig aktualisiert, während ein video abgespielt wird)... Jquery Verwendet

    $(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'");
}

});

    InformationsquelleAutor colmde

Schreibe einen Kommentar