YouTube 自动播放不支持 iFrame

我的网站有一个多视频播放器。我一直在修改代码，使用 YouTube 的 iframe API 作为播放器。我没法让视频自动播放。

以下是相关代码:

<body>
<iframe id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ?   autoplay=1&;enablejsapi=1"
frameborder="0"
autoplay="1"
style="border: solid 4px #37474F"
></iframe>
<div id="player"></div>


<div id="movieButtons" class="movieButtons">
<button class="movieButton" data-movieAdr="1-VjtC939_Q">Memorial Slide Show</button>

其余的是标准的 YouTube iframe API 脚本。您可以看到，我尝试将 autoplay=1设置为 iframe 参数和 iframe src 的一部分。我也试过把它包含在按钮的数据中。这些似乎都不管用。当按钮被点击时，视频会加载，但不会自动播放。

180598 次浏览
小开

自2018年4月以来一直无法正常工作，因为谷歌决定给予用户更大的播放控制权。您只需要将 &mute=1添加到您的 URL 中。 自动播放策略变更

<iframe
id="existing-iframe-example"
width="640" height="360"
src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&mute=1&enablejsapi=1"
frameborder="0"
style="border: solid 4px #37474F"
></iframe>

更新:

Chrome 73中的音频/视频更新

谷歌表示: 现在所有桌面平台上都可以使用渐进式 Web 应用程序(PWA) ，我们正在将移动设备上的规则扩展到桌面: 现在允许安装渐进式 Web 应用程序时自动播放声音。注意，它只适用于 web 应用程序清单范围内的页面。 Https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa

小开

@ Fab建议的 mute=1或 muted=1将起作用。然而，如果你想要 使声音自动播放成为可能，你应该添加 allow="autoplay"到你的嵌入式 <iframe>。

<iframe type="text/html" src="https://www.youtube.com/embed/-ePDPGXkvlw?autoplay=1" frameborder="0" allow="autoplay"></iframe>

这在 谷歌自动播放政策2017年变化中得到了正式的支持和记录

一个特性策略允许开发人员有选择地 启用和禁用各种浏览器特性和 API 起源已收到自动播放许可，它可以委托 允许使用新的特性策略跨源 iframe 注意，默认情况下，自动播放是允许的 Iframes.

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">


<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

当自动播放的特性策略被禁用时，调用 play () 如果没有用户手势，则会使用 NotAllowedError 拒绝承诺 自动播放属性也将被忽略。

小开

此代码允许您自动播放 iframe 视频

<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1"  width="560" height="315"  frameborder="0" allowfullscreen></iframe>

这里是工作小提琴

小开

您可以使用嵌入式播放器的不透明度超过封面照片与一个正确的定位播放图标。之后，您可以检查文档的 activeElement。

当然，我知道这不是一个最佳的解决方案，但也适用于移动设备。

<div style="position: relative;">
<img src="http://s3.amazonaws.com/content.newsok.com/newsok/images/mobile/play_button.png" style="position:absolute;top:0;left:0;opacity:1;" id="cover">
<iframe width="560" height="315" src="https://www.youtube.com/embed/2qhCjgMKoN4?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- picture" allowfullscreen style="position: absolute;top:0;left:0;opacity:0;" id="player"></iframe>
</div>
<script>
setInterval(function(){
if(document.activeElement instanceof HTMLIFrameElement){
document.getElementById('cover').style.opacity=0;
document.getElementById('player').style.opacity=1;
}
} , 50);
</script>

试试 codeen: https://codepen.io/sarkiroka/pen/OryxGP

小开 
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1"  width="560" height="315"  frameborder="0" allowfullscreen></iframe>

Https://jsfiddle.net/yojey_thilipan/6nalm0yc/6/

我觉得挺好的，谢谢。

小开

如欲在流动视图上使用自动播放功能: 移动设备的自动播放功能是一件严肃的事情，在大多数情况下是禁用的。各种原因包括数据使用、垃圾广告等。


提交答案