youtube-iframe-api - Youtube Iframe Api 在 Chrome 上开始播放视频的问题

Question

我有以下启动设置:

var player;
function onYouTubeIframeAPIReady() {
   player = new YT.Player('player', {
      events: {
         'onReady': onPlayerReady,
         'onStateChange': onPlayerStateChange
      }
   });
}

然后在 onPlayerReady处理程序我向 iframe 之外的按钮添加了事件监听器:

function onPlayerReady(event) {
   button.addEventListener('click', () => event.target.playVideo());
}

在 onPlayerStateChange我只是记录正在发生的事情:

function onPlayerStateChange(event) {
    console.log(event.data);
}

在 Chrome (v.72.0.3626.119) 中点击该按钮后，控制台中有 3 个条目: -1 (UNSTARTED), 3 (BUFFERING), -1 (UNSTARTED) .当我再次尝试按下按钮时，什么也没有发生。
这在 Firefox 中完美运行，IE 在控制台中给出: -1 (UNSTARTED), 3 (BUFFERING), 1 (PLAYING) 和简单的视频开始播放。

你知道如何解决它吗？

Answer 1

您必须添加 onPlayerReady功能这一行:

event.target.playVideo();

如 documentation 所示:

例子:

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  event.target.playVideo();
}

我不确定为什么，但是，在 Google Chrome 中，要自动播放视频，您需要设置值 1到 mute参数，否则，自动播放视频将不起作用。

例子:

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: '<YOUR_VIDEO_ID>',
    playerVars: {
      'autoplay': 1,
      'loop': 1,
      'mute': 1 // N.B. here the mute settings.
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

您可以查看此 jsfiddle指导您如何为播放/暂停嵌入视频设置自定义控件。