0

我正在使用颜色框在页面加载时显示 vimeo 剪辑。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="colorbox.css" />
    <link rel="stylesheet" href="style.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.colorbox-min.js"></script>
    <script type='text/javascript' src='bvssp-vimeo.js'></script>
</head>

<a style="display:none;" class="vimeo" href="http://player.vimeo.com/video/67189599?title=0&amp;byline=0&amp;portrait=0&amp;badge=0&amp;autoplay=1">hidden</a>

</body>
</html>

bvssp-vimeo.js 看起来像这样：

jQuery(function($) {
    $(".vimeo").colorbox({iframe:true, innerWidth:830, innerHeight:466, open: true});
});

这将弹出一个 iframe 播放 vimeo 剪辑。一切正常。我想知道是否有办法在 vimeo-clip 完成时自动关闭 iframe。这真的可能吗？确定 vimeoclip 何时完成并自动关闭 iframe 的最佳方法是什么？

更新：我使用以下代码更新了 bvssp-vimeo.js 以使其工作：

jQuery(function($) {
$(".vimeo").colorbox({iframe:true, innerWidth:830, innerHeight:466, open: true});

});

window.setTimeout(function() {
    $.colorbox.close();
}, 20000);

=========================== 更新2：

我发现上面的解决方案有效，但这并不理想，因为假设视频长 1 分钟，而您将时间设置为 1 分钟。如果您的连接速度较慢并且视频开始缓冲，它也会停止播放迅速地。

一种解决方案是查看 vimeo Froogaloop API，我在这里真的需要帮助：

<!DOCTYPE html>
<html>
<head>
  <title>Testar</title>
<link rel="stylesheet" href="colorbox.css" />
<link rel="stylesheet" href="style.css" />



    <!-- Inkludera javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.colorbox.js"></script>
<script src="froogaloop.js"></script>

<!-- <script type='text/javascript' src='bvssp-vimeo.js'></script> -->

</head>
<body>



        <script type="text/javascript">

        jQuery(document).ready(function($blaha) {

                $blaha(".cboxIframe").colorbox({iframe:true, innerWidth:830, innerHeight:466, open: true});


            // Enable the API on each Vimeo video
            jQuery('iframe.cboxIframe').each(function(){

                Froogaloop(this).addEvent('ready', ready);
            });

            function ready(playerID){

                // Add event listerns
                Froogaloop(playerID).addEvent('play', play(playerID));
                Froogaloop(playerID).addEvent('seek', seek);
                Froogaloop(playerID).addEvent('finish', finish);

                // Fire an API method
                Froogaloop(playerID).api('play');

            }
            function play(playerID){
                alert(playerID + " is playing!!!");
            }
            function seek() {
                alert('Seeking');
            }
            function finish() {
                alert('Finnished');
                $blaha.colorbox.close();
            }

        });

        </script>

<a style="display:none;" class="cboxIframe" href="http://player.vimeo.com/video/7100569?api=1&player_id=player2">dd</a>

</body>
</html>

Vimeo API 有一个解决方案，可以在视频结束时停止视频，但我无法使用 colorbox 进行此操作。

colorbox 输出的代码似乎一切正常，如果我从 Firefox 开发人员 webconsole 复制它并将其直接粘贴到文档中，一切正常。这很奇怪...

我究竟做错了什么？

亲切的问候约翰

4

2 回答 2

0

阅读有关 vimeo api http://developer.vimeo.com/player/js-api的文档

在我的情况下，弹出颜色框在此页面中使用此代码调用带有视频的页面，它可以正常工作。

<script>
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 'finish':
            onFinish();
            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() {
   post('addEventListener', 'finish');
}


function onFinish() {
window.parent.$.colorbox.close();
}

</script>
于 2014-01-02T16:06:16.430 回答
0

可能这可以帮助你。

找到视频文件的长度转换它，以毫秒为单位，以便在这里传递给setTimeout。

setTimeout("closeIframe()",<length of vidofile in milliseconds>);

有了这个功能，这应该可以工作。

function check_if_open() {
    var t=setTimeout("closeIframe()",30000);
    }



    function closeIframe() {
    var iframe = document.getElementById('someid');
    iframe.parentNode.removeChild(iframe);
    }

<iframe id="someid" src="http://www.somethg.com" width="700" height="700"   onload="check_if_open()">
    </iframe>
于 2013-07-18T08:42:34.553 回答