停止以特定分辨率播放嵌入式视频

Question

我正在开发一个包含两个相同 vimeo 视频的网站。一个是针对

但是，视频需要在页面加载时自动播放。虽然display:none; css 标签它只会隐藏视频而不是暂停/禁用视频。

有没有好的方法来控制它？目前我正在尝试用 jQuery 和 Froogaloops 来做这件事，但还不能让它工作。这是我到目前为止得到的：

    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);
});

这仅在您调整屏幕大小时有效，而不是在首次加载时有效。这个怎么做？或者也许有更简单的方法？提前致谢！

Answer 1

好的，所以您可能想要将Vimeo's embed 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; 超过断点，从音频中断判断它会自行停止播放。

好吧，我想this question 可以帮助解决如果您想在视频不可见时硬停。