javascript Youtube 延迟自动启动视频

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8669702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 04:10:35  来源:igfitidea点击:

Youtube delay auto start video

javascriptyoutubeyoutube-api

提问by Ricardo Rodrigues

There is anyway to delay the auto start of a youtube video for example:" 20seconds, after page loads?"

无论如何,可以延迟 youtube 视频的自动启动,例如:“页面加载后 20 秒?”

Here is the example just with the auto start:

这是仅使用自动启动的示例:

http://jsfiddle.net/qbqEA/

http://jsfiddle.net/qbqEA/

Thanks

谢谢

回答by Sang

It is not perfect solution but it works,

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

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

note that I used data-src instead of 'src'

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

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

It will load iframe 20 seconds after page loads. see my fork: http://jsfiddle.net/WswGV/

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

回答by yamidemichaos

The best way to do it is to use YouTube.API with Javascript functionality.

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

I hope this help

我希望这有帮助

回答by Holster

I use the following function

我使用以下功能

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

回答by agentv

The link to the IFrame YouTube API above is obsolete, I think, but here's one I found today:

我认为上面指向 IFrame YouTube API 的链接已过时,但这是我今天找到的链接:

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

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

Wish I'd read that a long time ago.

希望我很久以前就读过。

To excerpt from the example there, I would suggest that you detect the player being downloaded and ready, then set a timer for the desired number of seconds (20 in your case, I think), and then play the video.

从那里的示例中摘录,我建议您检测正在下载并准备好的播放器,然后将计时器设置为所需的秒数(我认为在您的情况下为 20),然后播放视频。

---v

---v

回答by Steve Yancharas Jr.

Using https://developers.google.com/youtube/iframe_api_referencethis will add a 10 second delay before the video automatically starts:

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