Chrome Vimeo Iframe 自动播放不再起作用答案

【问题标题】：Chrome Vimeo Iframe autoplay not working anymoreChrome Vimeo Iframe 自动播放不再起作用
【发布时间】：2018-10-18 14:01:42
【问题描述】：

因为有些日子我的 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

有人有想法或答案吗？

谢谢！

【问题讨论】：

您是否有指向特定视频的链接和/或嵌入了视频但不自动播放的页面？我对 Vimeo Embed Playground 进行了快速检查，自动播放在 Windows 10 上的 Chrome 66 上按预期工作：player.vimeo.com/embed?videos=76979871|w:640|h:360|a:1|m:0
很抱歉，这是本地项目，但你是对的，操场可以工作。我认为它有效，因为您与点击进行了用户交互。如果我将嵌入代码复制到本地 html 文件中，它将不会自动播放

标签： google-chrome iframe vimeo autoplay

【解决方案1】：

用allow 属性注释<iframe> 对我有用：

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

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

【讨论】：

为什么会出现在页面底部？差点错过了。
这对我有用 - 2018 年 12 月 - 解决了 Chrome 中的自动播放问题。当我将 allow="autoplay; fullscreen" 添加到 iframe 标记时，它会播放声音。
20 年 2 月，为我工作。确保将 ?autoplay=1 参数保留在 URL 之后。例如我有<iframe src="https://player.vimeo.com/video/000000000?autoplay=1&loop=1&autopause=0" frameborder="0" allow="autoplay"></iframe> vimeo.zendesk.com/hc/en-us/articles/… 虽然autopause=0 似乎不起作用：当我点击标签时，视频仍然暂停
autopause=0 实际上似乎禁用暂停，如果您开始在同一页面上播放第二个视频（正如它在我之前提供的 URL 中所说：vimeo.zendesk.com/hc/en-us/articles/…），我也想要
2020 年 6 月，为我工作。当用户单击“查看我们的视频”按钮（即用户已参与并想要查看）时，我在叠加层中动态生成 iframe

【解决方案2】：

您需要将&muted=1 添加到iFrame src 路径，并且您需要将属性allow="autoplay" 添加到iFrame。现在 Vimeo 视频会在 Chrome 中再次自动启动。

【讨论】：

谢谢兄弟，这个解决方案更好！

【解决方案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

Media Engagement Index，简称 MEI，Chrome 的一种方式是允许您页面上的自动播放音频基于您之前作为用户与此网页的交互。您可以转到

来查看它的外观

chrome://media-engagement/

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

【讨论】：

@Manshoor-Ahmad 链接已损坏
@ManshoorAhmad，谢谢我现在也看到了链接。这一定只是 Vimeo 方面的一个小故障。这是一个很好的例子，说明为什么在答案中包含详细信息而不仅仅是链接很重要。
执行document.querySelector('video').play() 似乎更像是程序化播放而不是自动播放。如果没有play() 命令，如何处理承诺？

【解决方案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参数必须是最后一个。

【讨论】：

我试过你的代码，但它不起作用。我正在使用 Youtube 视频链接。
那是因为 iframe 缺少 allow="autoplay" 属性

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

如果您是付费会员，并且想使用视频作为背景，这可能就是您所需要的：

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

或者，如果你不是：

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

但是，我仍然无法在手机上使用它。

【讨论】：

【解决方案7】：

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

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

【讨论】：

query string 不应该以问号开头吗？