Question

我正在使用colorbox在pageload上显示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输出的代码似乎都没问题，如果我从Firefox开发人员webconsole复制并将其直接粘贴到文档中，一切正常。这很奇怪......

我做错了什么？

亲切的问候约翰

Answer 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>

Answer 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>

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

2 个答案: