Chrome Vimeo Iframe 自动播放不再工作

Question

有些日子以来，我的 vimeo iframe 将不再自动播放。我知道 chrome 更新，它会阻止有声自动播放视频。该块是否已激活？

Vimeo 示例代码不起作用：

<iframe src="https://player.vimeo.com/video/12345?autoplay=1&loop=1&autopause=0" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

但是 netflix.com 和 vimeo 本身在主页上有一个自动播放的视频，这是有效的。

编辑：Chrome 版本 66.0.3359.139 macOS High Sierra 10.13.4

有人有想法或答案吗？

谢谢！

Answer 1

用

<iframe>

属性注释

allow

对我有用：

<iframe ... allow="autoplay; fullscreen"></iframe>

称为“Iframe 委托”，在此处进行了描述：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes.

Answer 2

您需要将

&muted=1

添加到iFrame src路径，并且您需要将属性

allow="autoplay"

添加到iFrame。现在，Vimeo 视频会在 Chrome 中再次自动启动。

Answer 3

是的，根据他们的文档是这样的。

https://help.vimeo.com/hc/en-us/articles/115004485728-Autoplaying-and-looping-embedded-videos

编辑：

FireFox、Chrome 和 Safari 等高级浏览器现在默认阻止视频自动播放。

CHROME 自动播放政策：

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

媒体参与指数，简称 MEI，Chrome 的一种方式是允许您页面上的自动播放音频基于您以前作为用户与该网页的交互。你可以去看看这是什么样子

铬：//媒体参与/

MEI 是根据用户个人资料计算的，并且会一直保留到隐身模式。

WEBKIT/SAFARI 自动播放政策：

https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

FIREFOX 自动播放改进：

https://www.ghacks.net/2018/09/21/firefox-improved-autoplay-blocking/

注意： 不要假设媒体元素会播放，也不要从一开始就显示暂停按钮。查看 HTMLMediaElement 上 play 函数返回的 Promise 是否被拒绝：

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

Answer 4

自动播放 + 静音 + 开始时间 x 秒 =

<div>
    <iframe src="https://player.vimeo.com/video/342787403?&autoplay=1&loop=1&title=0&byline=0&portrait=0&muted=1&#t=235s" style="position:absolute;top:0;left:0;width:100%;height:100%;" width="1400" height="900" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</div>

#t参数必须是最后一个。

Answer 5

现在，如果音频被静音，自动播放视频就可以工作了，你需要在你的 api 或 iframe 代码中添加 muted 参数 &muted=1，你可以更改你的浏览器首选项以允许自动播放未静音的视频： chrome://flags/#autoplay-policy 将默认选项更改为“不需要用户手势”

如果用户点击视频，您可以取消静音！！

Answer 6

静音参数解决了我的问题：

<iframe src="https://player.vimeo.com/video/x?background=1&autoplay=1&loop=1&byline=0&title=0&muted=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; fullscreen"></iframe>

Answer 7

如果你是付费会员，想用视频做背景，这大概就是你所需要的：

?background=1：此参数会自动禁用播放器中的所有元素（播放栏、按钮等）、自动播放、循环播放和加载视频时静音。请注意：背景参数仅支持付费会员托管的视频。在这里了解更多信息。

或者，如果你不是：

?muted=1 此参数将在加载时自动将您的视频静音。视频播放后，观众可以通过点击播放器中的音量条手动取消静音。

但是，我仍然不能让它在手机上工作。