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();
}

我无法确定为什么，但是，在谷歌浏览器中，要自动播放视频，您需要将值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以获取指导，了解如何设置播放/暂停嵌入视频的自定义控件。