Youtube延迟自动开始视频答案

【问题标题】：Youtube delay auto start videoYoutube延迟自动开始视频
【发布时间】：2012-01-29 23:31:28
【问题描述】：

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

这是自动启动的示例：

http://jsfiddle.net/qbqEA/

谢谢

【问题讨论】：

标签： javascript youtube youtube-api

【解决方案1】：

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

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

请注意，我使用 data-src 而不是 'src'

$(document).ready(function() {
    setTimeout(function() { 
        $('iframe.delayed').attr('src', 
                                     $('iframe.delayed').attr('data-src')); 
    }, 20000);
}

它会在页面加载 20 秒后加载 iframe。看我的叉子：http://jsfiddle.net/WswGV/

【讨论】：

理解不是完美的:) 非常感谢...只是寻找其他方法，但 javascript 在 20 秒后模拟点击。不要向用户隐藏 youtube gui。
@RicardoRodrigues 那么怎么样？以 autoplay=0 开头并在 20 秒后将 src 替换为 autoplay=1？
感谢您的想法，可以尝试之后..现在尝试使用javascript插入 iframe ，并使用播放事件..可能是最好的解决方案。您是否尝试使用该解决方案替换 src ？不需要刷新dom？
@RicardoRodrigues 我尝试在 20 秒后更改 src 并且它起作用了。它不会刷新整个 dom，而是在 iframe 内。如果你在 iframe 上制作相同大小的透明 div 并捕获点击事件，你可能会完成 98% 的工作。
但是 100% 完美的解决方案总是使用正确的 API 调用：code.google.com/intl/ko/apis/youtube/js_api_reference.html

【解决方案2】：

最好的方法是使用带有 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'
        }); 
    }

希望对你有帮助

【讨论】：

【解决方案3】：

我认为上面指向 IFrame YouTube API 的链接已经过时，但这是我今天找到的一个：

https://developers.google.com/youtube/iframe_api_reference

希望我很久以前就读过。

从那里的示例中摘录，我建议您检测播放器正在下载并准备就绪，然后为所需的秒数（我认为是 20 秒）设置一个计时器，然后播放视频。

---v

【讨论】：

【解决方案4】：

使用https://developers.google.com/youtube/iframe_api_reference，这将在视频自动开始之前添加 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>

【讨论】：

【解决方案5】：

我使用如下函数

jQuery(document).ready(function () {
    var frame = jQuery('.embed-responsive iframe');
    var src = frame.attr('src');
    setTimeout(function(){ frame.attr('src', src+'?autoplay=1'); }, 20000);
});

【讨论】：