Iframe YouTube自动播放不起作用_Iframe_Youtube

Iframe YouTube自动播放不起作用

iframe youtube

Iframe YouTube自动播放不起作用,iframe,youtube,Iframe,Youtube,我的网站有一个播放多个视频的播放器。我一直在修改代码，以使用YouTube的iframe API作为播放器。我无法将视频自动播放。以下是相关代码： <body> <iframe id="existing-iframe-example" width="640" height="360" src="https://www.youtube.com/embed/-SFcIUEvNOQ? autopl

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

在自动播放=1之前删除空格：

src="https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&;enablejsapi=1"

它从2018年4月起就不起作用了，因为谷歌决定给用户更大的播放控制权。您只需将&mute=1添加到您的URL即可。

更新：

Chrome 73中的音频/视频更新

谷歌表示：现在所有桌面平台上都可以使用Progressive Web Apps（PWA），我们正在将移动平台上的规则扩展到桌面：已安装的PWA现在允许自动播放声音。请注意，它仅适用于web应用程序清单范围内的页面。

mute=1

或建议的

mute=1

将起作用但是，如果希望启用声音自动播放，则应将

allow=“autoplay”

添加到嵌入式

中

这是官方支持的，并记录在

Iframe委派特性策略允许开发人员有选择地启用和禁用各种浏览器功能和API的使用。一次 origin已收到自动播放权限，它可以委派该权限使用新的功能策略跨源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（）如果没有用户手势，将以不允许的错误拒绝承诺这是个例外。自动播放属性也将被忽略

此代码允许您自动播放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>


setInterval（函数（）{
if（document.activeElement instanceof htmliframelement）{
document.getElementById（'cover'）.style.opacity=0；
document.getElementById（'player'）.style.opacity=1；
}
} , 50);

在codepen上试用它：

URL中

？

后面的空格。尝试：

https://www.youtube.com/embed/-SFcIUEvNOQ?autoplay=1&enablejsapi=1

它在android移动chrome浏览器上不起作用。有什么主意吗？太棒了！谢谢伙计：）你知道为什么这个不行吗？这可能是错误的，但我认为这是因为Youtube一开始不知道播放哪个视频。加载页面时，Youtube需要使用“列表”参数搜索视频，然后获取播放列表中的第一个视频，然后播放。要使其正常工作，请在URL中添加要播放的第一个视频的视频ID：谢谢！所以它只允许你自动播放静音视频！有道理。2019年3月对我有效。2019年4月工作2019年5月工作这对台式机很好，但对移动设备来说，它不起作用。请注意，只有在有人已经与网站交互的情况下，这才适用于声音启用。因此，如果他们点击视频页面，视频就会自动播放声音。如果它们直接进入页面，那么它就不会自动播放。因此，选择似乎是自动播放所有静音或自动播放一些声音，而不是直接在页面上登录的人。这在桌面上很好，但在移动设备上，它不起作用。只是为了完整性：youtube的TOS（请参阅）禁止此解决方案，因为您不允许覆盖嵌入式播放器。

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

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