无法通过api函数调用自动播放视频

如何解决无法通过api函数调用自动播放视频

尝试实现youtube iframe api，但播放器无法自动播放。自动播放通过player.playVideo()函数调用进行。观察到的是，如果通过某种手动交互（例如单击按钮（或通过开发者控制台发生的事件）），我调用函数，它将起作用。通过代码，setTimeout()无法播放视频。

我在网页上使用了jQuery。

主代码文件如下：

var YT_IFRAME_API = 'https://www.youtube.com/player_api';

var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('ytplayer',{        
    width: 400,height: 340,events: {
      onReady: playerReady,onStateChange: playerStateChange
    },videoId: 'M7lc1UVf-VE',playerVars: {
      fs: 1,controls: 1,origin: window.location.origin
    }
  });
};

var PLAYER_STATE = {};

function playerReady(event) {
  
  setTimeout(() => event.target.playVideo(),1000);

  PLAYER_STATE = Object.keys(YT.PlayerState)
    .reduce((carrier,key) => {
      let value = YT.PlayerState[key];
      carrier[value] = { state: key,value };
      return carrier;
    },PLAYER_STATE);
  
  var timeoutHandle = setInterval(() => {    
    let currentState = player.getPlayerState();
    if(currentState === YT.PlayerState.UNSTARTED) {
      console.log('stopping tick');
      clearInterval(timeoutHandle);
      // player.playVideo();  
      setTimeout(() => {
        console.log('replaying...');
        $('#play').click();
      },1000);
    }    
    console.log('interval tick');
  },1000);
  console.log('ready');
}

function playerStateChange(event) {
  console.log(PLAYER_STATE[event.data]);
}

$(function() {  
  let nourl = $('#no-url');
  let yt = $('#yt');
  $('#play').click(function(){
    player.playVideo();
  });
  let { search } = window.location;
  if(search.length === 0) {
    nourl.show();
    yt.hide();
  }
  else {
    nourl.hide();
    yt.show();
    $.getScript(YT_IFRAME_API,function(err){
      //signal success or failure here
      console.log('YT iframe api download:',err? err: 'success');
    });
  }
});

html文件在这里：

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="assets/yt.css">
</head>
<body>
  <div id="no-url">
    <div class="flex-container">
      <div class="flex-item">
        <input type="text" id="yt-url" placeholder="YouTube video URL">
      </div>
      <div class="flex-item">
        <input type="button" value="Go">
      </div>
    </div>
  </div>
  <div id="yt">
    <div id="ytplayer"></div>
    <input type="button" value="Play" id="play">
  </div>
  
  <script src="assets/jquery-3.3.1.min.js"></script>
  <script src="assets/yt.js"></script>
</body>
</html>

注意：您需要在url中传递一些搜索参数，此功能才能起作用。（任何事情都会做）。

进一步的观察是玩家从UNSTARTED移到BUFFERING，最后是UNSTARTED的状态。还分享了该问题的屏幕截图。