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

Question

我在一个包含两个相同 vimeo 视频的网站上工作。一个是用于 < 1000px 分辨率的较大屏幕分辨率我希望视频在另一个地方。所以我把其中两个放在那里，并用一些 CSS 控制其中哪些是可见的..

但是，视频需要在页面加载时自动播放。 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如果您希望在视频不可见时硬停，这有助于解决问题。