YouTube 自动播放无法正常工作
Posted
技术标签:
【中文标题】YouTube 自动播放无法正常工作【英文标题】：YouTube Autoplay not working 【发布时间】：2017-04-02 18:43:52 【问题描述】：我的网站有一个播放器可以播放多个视频。我一直在调整代码以使用 YouTube 的 iframe API 作为播放器。我无法让视频自动播放。以下是相关代码：
<body>
<iframe id="existing-iframe-example"
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 的一部分。我也尝试将它包含在按钮的数据中。这些似乎都不起作用。单击按钮时会加载视频，但不会自动播放。
【问题讨论】：
URL 中? 之后的空格。尝试：https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&enablejsapi=1
它不适用于 android 移动 chrome 浏览器。有什么想法吗？
【参考方案1】：
去掉 autoplay=1 前的空格：
src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&;enablejsapi=1"
【讨论】：
【参考方案2】：自 2018 年 4 月以来，它就无法正常工作，因为 Google 决定将更多的播放控制权交给用户。您只需将 &mute=1 添加到您的 URL。 Autoplay Policy Changes
<iframe id="existing-iframe-example"
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) 在所有桌面平台上都可用，我们正在将我们在移动设备上的规则扩展到桌面：现在已安装的 PWA 允许自动播放声音。请注意，它仅适用于 Web 应用清单范围内的页面。 https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa
【讨论】：
太棒了！谢谢队友:) 知道为什么这个不起作用吗？ youtube.com/… 这可能是错误的，但我认为是因为 Youtube 不知道开始播放哪个视频。当您加载页面时 Youtube 需要使用“列表”参数搜索视频，然后获取播放列表的第一个视频然后播放。要使其正常工作，请在 URL 中添加您要播放的第一个视频的视频 ID：youtube.com/embed/… 谢谢！所以它只能让你自动播放静音视频！有道理。【参考方案3】：@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>
官方支持并记录在Google's Autoplay Policy Changes 2017 post
Iframe 委托 一项功能策略允许开发人员有选择地 启用和禁用各种浏览器功能和 API。一旦一个 origin 已获得自动播放权限，它可以委托 允许使用新功能策略跨域 iframe 自动播放。请注意，默认情况下允许在同源上自动播放 iframe。
<!-- 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 的承诺 DOM 异常。并且自动播放属性也会被忽略。
【讨论】：
截至 2019 年 3 月为我工作。 2019 年 4 月工作 2019 年 5 月工作 这适用于台式机，但对于移动设备，它不起作用。 请注意，如果有人已经与网站进行了交互，这仅适用于声音启用。因此，如果他们点击进入带有视频的页面，那么它将自动播放声音。如果他们直接登陆页面，那么它根本不会自动播放。所以选择似乎是自动播放所有静音或自动播放一些有声音而不是直接登陆页面的人。【参考方案4】：此代码允许您自动播放 iframe 视频
<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Here Is working fiddle
【讨论】：
这适用于台式机，但对于移动设备，它不起作用。 小提琴今天不工作了【参考方案5】：您可以在带有右侧播放图标的封面照片上使用带有不透明度的嵌入播放器。在此之后，您可以检查文档的 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 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>
在 codepen 上试用：https://codepen.io/sarkiroka/pen/OryxGP
【讨论】：
为了完整起见：YouTube 的 TOS（请参阅webmasters.stackexchange.com/questions/44157/…）禁止此解决方案，因为您不允许覆盖嵌入式播放器。【参考方案6】：<iframe src="https://www.youtube.com/embed/2MpUj-Aua48?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
https://jsfiddle.net/YoJey_Thilipan/6naLm0yc/6/
谢谢。
【讨论】：
谢谢，这在桌面上对我有用。但是，移动设备上的自动播放仍然不起作用。 今天不工作以上是关于YouTube 自动播放无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
Youtube iframe src 自动播放在 Chrome 浏览器中不起作用