Question

让自动播放的Chromeless播放器无法正常工作时出现问题。我正在尝试的代码直接从developers.google.com documentaiton中复制： https://developers.google.com/youtube/youtube_player_demo

IFRAME示例：http://jsfiddle.net/BN6Sa/

<iframe width="720" height="405" src="//www.youtube.com/embed/M7lc1UVf-VE?feature=player_embedded&autoplay=1&controls=0&loop=1&modestbranding=1&rel=0&showinfo=0&theme=light" frameborder="0" allowfullscreen></iframe>

JS示例：http://jsfiddle.net/7DWTU/

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  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: '405',
    width: '720',
    videoId: 'M7lc1UVf-VE',
    autoplay:1,
    controls:0,
    loop:1,
    rel:0,
    showinfo:0,
    theme:'light'
    });
  }
</script>

Answer 1

使用iFrame API时，任何播放器对象参数（例如，如果您要将播放器作为iFrame而不是API嵌入，可能会附加为URL参数）都需要设置为playerVars参数对象而不是YT.Player参数的直接参数。具体来说，您的代码应如下所示：

<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
  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: '405',
     width: '720',
     videoId: 'M7lc1UVf-VE',
     playerVars: {
      autoplay:1,
      controls:0,
      loop:1,
      rel:0,
      showinfo:0,
      theme:'light'
      }
    });
  }
</script>

无铬和自动播放无法正常工作

1 个答案: