完成后自动关闭 colorbox vimeo iframe 视频？答案

【问题标题】：Autoclose colorbox vimeo iframe video when finnished?完成后自动关闭 colorbox vimeo iframe 视频？
【发布时间】：2013-07-18 08:32:08
【问题描述】：

我正在使用颜色框在页面加载时显示 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 开发人员 web 控制台复制它并将其直接粘贴到文档中，一切正常。这很奇怪……

我做错了什么？

亲切的问候约翰

【问题讨论】：

标签： jquery colorbox vimeo

【解决方案1】：

也许这可以帮助你。

找到视频文件的长度，将其转换为毫秒，以便在这里传递给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>

【讨论】：

你好@SAM。这个问题没有解决。好吧，您的建议有效，但并不理想，因为例如视频长 1 分钟，而您将时间设置为 1 分钟，而您的连接速度很慢，并且视频可能开始缓冲，视频将很快停止播放.. . 我很快就会用新代码更新我的问题......哦，谢谢你到目前为止的帮助......

【解决方案2】：

阅读有关 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>

【讨论】：