Javascript Youtube延迟自动启动视频

无论如何都有可能延迟youtube视频的自动启动，例如：“页面加载后20秒？”

以下是自动启动的示例：

---

谢谢

这不是完美的解决方案，但很有效

<iframe class="delayed" width="486" height="273" frameborder="0" data-src="__url__" allowfullscreen=""></iframe>

它将在页面加载20秒后加载iframe。

---

请参阅我的fork:

我认为上面指向IFrame YouTube API的链接已经过时，但我今天发现了一个：

但愿我早就读到了

从这里的示例中摘录，我建议您检测正在下载并准备好的播放器，然后将计时器设置为所需的秒数（我想在您的情况下是20秒），然后播放视频

---v

使用此选项将在视频自动启动前增加10秒的延迟：

<div id="player"></div>

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    setTimeout(function() {
        event.target.playVideo();
    }, 10000);
  }

  function stopVideo() {
    player.stopVideo();
  }
</script>

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'M7lc1UVf VE'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerReady（事件）{
setTimeout（函数（）{
event.target.playVideo（）；
}, 10000);
}
函数stopVideo（）{
player.stopVideo（）；
}

最好的方法是使用带有Javascript功能的YouTube.API

 // Load the IFrame Player API code asynchronously.
    setTimeout(function() {
        player.playVideo();
    }, 20000);
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
    var player;
    function onYouTubePlayerAPIReady() {    
        player = new YT.Player('ytplayer', {
          height: '315',
          width: '560',
          videoId: 'I_V_kIzKKqM'
        }); 
    }

//异步加载IFrame播放器API代码。
setTimeout（函数（）{
player.playVideo（）；
}, 20000);
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//用and替换“ytplayer”元素
//YouTube播放器的API代码下载后。
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer'{
高度：'315'，
宽度：“560”，
videoId:“I_V_kizkqm”
}); 
}

---

我希望这有助于我使用以下功能

jQuery（文档）.ready（函数（）{
var frame=jQuery（'.embed-responsive-iframe'）；
var src=frame.attr（'src'）；
setTimeout（函数（）{frame.attr（'src'，src+'？autoplay=1'）；}，20000）；
});了解不完美：）非常感谢。。。只是想用另一种方式来处理javascript，但要在20秒后模拟单击。不要对用户隐藏youtube gui。@Ricardordrigues那么如何？从autoplay=0开始，并在20秒后用autoplay=1替换src？感谢您的想法，您可以稍后再试。。现在尝试使用javascript插入iframe，并使用play event..可能是最好的解决方案。您是否尝试过用该解决方案替换src？不需要刷新dom？@RicardoRodrigues我试着在20秒后更改src，结果成功了。它不会刷新整个dom，而是在iframe内部。如果在iframe和catch click事件上使用相同大小的透明div，则可以完成98%的目标。但100%的完美解决方案始终是使用适当的API调用：
 // Load the IFrame Player API code asynchronously.
    setTimeout(function() {
        player.playVideo();
    }, 20000);
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/player_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
    var player;
    function onYouTubePlayerAPIReady() {    
        player = new YT.Player('ytplayer', {
          height: '315',
          width: '560',
          videoId: 'I_V_kIzKKqM'
        }); 
    }