Chrome Vimeo Iframe 自动播放不再工作
Chrome Vimeo Iframe autoplay not working anymore
几天后我的 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
有人有想法或答案吗?
谢谢!
是的,根据他们的文档是的。
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 的一种方式是允许您页面上的自动播放音频基于您以前作为用户与此网页的交互。你可以去
看看这是什么样子的
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
});
}
用 allow
属性注释 <iframe>
对我有用:
<iframe ... allow="autoplay; fullscreen"></iframe>
它叫做 "Iframe delegation" 并在此处描述:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes。
您需要将 &muted=1
添加到 iFrame 源路径,并且您需要将属性 allow="autoplay"
添加到 iFrame。现在 Vimeo 视频在 Chrome.
中再次自动开始
现在,如果音频被静音,自动播放视频也能正常工作,您需要将 muted 参数添加到您的 api 或 iframe 代码 &muted=1,您可以更改浏览器首选项以允许自动播放未静音的视频:
chrome://flags/#autoplay-policy
将默认选项更改为 "No user gesture is required"
如果用户点击视频,您可以取消静音!!
如果您是付费会员并且想使用视频作为背景,这可能就是您所需要的:
?background=1: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.
或者,如果您不是:
?muted=1 This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.
但是,我仍然无法在 phone 上运行它。
自动播放 + 静音 + 开始时间 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参数必须是最后一个。
静音参数解决了我的问题:
<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>
几天后我的 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
有人有想法或答案吗?
谢谢!
是的,根据他们的文档是的。
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 的一种方式是允许您页面上的自动播放音频基于您以前作为用户与此网页的交互。你可以去
看看这是什么样子的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
});
}
用 allow
属性注释 <iframe>
对我有用:
<iframe ... allow="autoplay; fullscreen"></iframe>
它叫做 "Iframe delegation" 并在此处描述:https://developers.google.com/web/updates/2017/09/autoplay-policy-changes。
您需要将 &muted=1
添加到 iFrame 源路径,并且您需要将属性 allow="autoplay"
添加到 iFrame。现在 Vimeo 视频在 Chrome.
现在,如果音频被静音,自动播放视频也能正常工作,您需要将 muted 参数添加到您的 api 或 iframe 代码 &muted=1,您可以更改浏览器首选项以允许自动播放未静音的视频: chrome://flags/#autoplay-policy 将默认选项更改为 "No user gesture is required"
如果用户点击视频,您可以取消静音!!
如果您是付费会员并且想使用视频作为背景,这可能就是您所需要的:
?background=1: This parameter automatically disables all elements in the player (play bar, buttons, etc), autoplays, loops, and mutes your video on load. Please note: the background parameter is only supported for videos hosted by paid members. Learn more here.
或者,如果您不是:
?muted=1 This parameter will automatically mute your video on load. Once your video plays, viewers can manually un-mute by clicking on the volume bar within the player.
但是,我仍然无法在 phone 上运行它。
自动播放 + 静音 + 开始时间 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参数必须是最后一个。
静音参数解决了我的问题:
<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>