Question

我的网站有一个播放多个视频的播放器。我一直在调整代码以使用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的一部分。我也尝试将其包含在按钮中的数据中。这些似乎都不起作用。单击按钮时视频会加载，但它们不会自动播放。

Answer 1

自2018年4月以来它没有运作，因为Google决定更好地控制用户的播放。您只需要在网址中添加＆amp; mute = 1即可。 Autoplay Policy Changes

<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中的音频/视频更新

谷歌说：现在所有桌面平台都可以使用Progressive Web Apps（PWA），我们正在将我们在移动设备上的规则扩展到桌面：现在允许已安装的PWA使用声音自动播放。请注意，它仅适用于Web应用程序清单范围内的页面。 https://developers.google.com/web/updates/2019/02/chrome-73-media-updates#autoplay-pwa

Answer 2

@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已获得autoplay权限，它可以委派该权限使用新功能政策的跨源iframe的权限自动播放。请注意，默认情况下允许自动播放在同源上内部框架。

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


<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
禁用自动播放的功能政策时，调用play（）没有用户手势将使用NotAllowedError拒绝承诺抛出：DOMException。并且autoplay属性也将被忽略。

Answer 3

删除autoplay = 1之前的空格： SRC = “https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&;enablejsapi=1”

Answer 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"  width="560" height="315"  frameborder="0" allowfullscreen></iframe>

Here Is working fiddle

Answer 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 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>

在Codepen上尝试：https://codepen.io/sarkiroka/pen/OryxGP

YouTube自动播放无效

5 个答案: