如何跟踪嵌入视频（youtube、vimeo 等）的点击事件？（跟踪播放次数）

发布于 2024-12-02 11:24:13 字数 2048 浏览 1 评论 0原文

有没有办法跟踪嵌入视频的播放次数？理想情况下，无需借助链接的缩略图来启动嵌入/ 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>

如何跟踪每个视频的播放次数？

原文

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&byline=0&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(' ');
        });
        $('.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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

比忠 2024-12-09 11:24:14

Ryan，唯一的方法是使用视频共享网站的播放器 API，因为 html 和 javascript 对此没有本机支持。

，您可以在此处查看文档。

要对 YouTube 视频执行此操作对于 vimeo 视频，您可以在此处查看文档

回复收藏 0 原文

薄凉少年不暖心 2024-12-09 11:24:14

这适用于 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'");
}

});

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 原文

~没有更多了~