1

I'm working on a website that contains two the same vimeo video's. One is for the larger screen resolutions for the < 1000px resolutions I want the video in another place. So I placed two of them in there, and with some CSS I controlled which of them is visible..

However, the videos need to get an autoplay on page load. While the display:none; css tag it will only hide the vids and not pause/disable the video.

Is there a good way to control this? At the moment I'm trying to do this with jQuery and Froogaloops but have not been able to get it working yet. This is what I got so far:

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

    var player = $("#82625501");
    froogaloop = $f(player[0].id);
    // Optimalisation: Store the references outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowsize = $window.width();
        if (windowsize < 1000) {

             froogaloop.api('pause');

        }
        else {
             froogaloop.api('play');
        }
    }
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
});

This works only if you resize the screen, not on first load. How to do this? Or maybe there is an easier way? Thanks in advance!

4

1 回答 1

0

好的，所以您可能想要做的是将Vimeo 嵌入 API中概述的自动播放参数更改为“1”，如下所示：

<iframe src="//player.vimeo.com/video/82527075?autoplay=1" width="500" height="209" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/82527075">The Awareness</a> from <a href="http://vimeo.com/user2354244">Henry</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

附加到 src url 的地方?autoplay=1会触发自动播放，尽管这对大多数移动设备不起作用，因为这是关于数据消耗的最佳实践的问题。

您可以手动添加它，或者在从 Vimeo 获取嵌入代码时，只需打开显示选项菜单并选择自动播放以自动附加它。

至于禁用视频，至少在我在 Firefox 中的测试中，一旦将视频设置为display: none;超过断点，从音频切断来看，它会自行停止播放。

好吧，我想这个问题有助于解决如果您想在视频不可见时硬停。

于 2014-01-07T15:32:48.117 回答