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

从this answer开始，谷歌浏览器需要iframe上的allow="autoplay"属性来让JS控制播放器或使自动播放功能起作用。

如果您手动使用 <iframe> 而不是 <div> 标记，则这是必需的。

示例：
注意！请注意，如果此站点的结果iframe 在iframe 上没有allow="autoplay" 属性，则它可能不起作用。将 HTML 和 JavaScript 复制并粘贴到您的 .html 文件中是测试它是否真正工作的最佳方法。

var player;


/**
 * Load YouTube API JavaScript
 */
function loadYTAPIScript() {
  console.log('loading YouTube script.');
  let tag = document.createElement('script');
  tag.src = 'https://www.youtube.com/iframe_api';
  firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}


/**
 * On YouTube iframe API ready
 * 
 * This function will be called automatically by YouTube.
 */
function onYouTubeIframeAPIReady() {
  console.log('function `onYouTubeIframeAPIReady` was called.');
  player = new YT.Player('player', {
    events: {
      'onError': onError,
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}


function onError(event) {
  console.error('YouTube API error!', event);
} // _onError


/**
 * On player ready.
 *
 * This is callback function from `onReady` event in `onYouTubeIframeAPIReady()`.
 */
function onPlayerReady(e) {
  console.log('function `onPlayerReady` was called from `onReady` event callback.', e);
  listClickButtons();
}


/**
 * On player state change.
 *
 * This is callback function from `onStateChange` event in `onYouTubeIframeAPIReady()`.
 */
function onPlayerStateChange(e) {
  console.log('function `onPlayerStateChange` was called from `onStateChange` event callback.', e);
  let state = e.target.getPlayerState();
  let stateText = '';
  if (state === -1) {
    stateText = 'unstarted';
  } else if (state === YT.PlayerState.ENDED) {
    stateText = 'ended';
  } else if (state === YT.PlayerState.PLAYING) {
    stateText = 'playing';
  } else if (state === YT.PlayerState.PAUSED) {
    stateText = 'paused';
  } else if (state === YT.PlayerState.BUFFERING) {
    stateText = 'buffering';
  } else if (state === YT.PlayerState.CUED) {
    stateText = 'cued';
  }
  console.log('State text: ', stateText);
}


/**
 * Listen on click buttons to controls the video.
 * 
 * This method was called from `onPlayerReady()`.
 */
function listClickButtons() {
  console.log('Listen click buttons.');
  let isPlayed = false;
  let playpauseBtn = document.getElementById('yt-playpause');
  let stopBtn = document.getElementById('yt-stop');
  playpauseBtn.addEventListener('click', (e) => {
    e.preventDefault();
    console.log('User click on play/pause button.');
    if (isPlayed === false) {
      player.playVideo();
      isPlayed = true;
    } else {
      player.pauseVideo();
      isPlayed = false;
    }
  });
  stopBtn.addEventListener('click', (e) => {
    e.preventDefault();
    console.log('User click on stop button.');
    player.stopVideo();
  });
}




document.addEventListener('DOMContentLoaded', (e) => {
  console.log('DOM ready.');
  loadYTAPIScript();
});

<iframe id="player" 
  width="560" height="315" 
  src="https://www.youtube.com/embed/1L904pgYbOE?enablejsapi=1" 
  title="YouTube video player" 
  allow="autoplay" 
  allowfullscreen=""
></iframe>
<!--
The `iframe` URL (`src` attribute) must contain enablejsapi=1 query string to let JS API work.
The `iframe` must contain `allow="autoplay"` attribute to allow JS controls the player.
-->


<div class="yt-controllers">
  <button id="yt-playpause" type="button">
    Play/Pause
  </button>
  <button id="yt-stop" type="button">
    Stop
  </button>
</div>

See full code on jsfiddle.

参考：

1. Iframe
2. Iframe allow features list
3. YouTube Iframe API

Answer 2

我在加载 html 后发送了一个密钥，它对我有用。

KeyEvent k = new KeyEvent();
k.WindowsKeyCode = 0x0D;
k.FocusOnEditableField = true;
k.IsSystemKey = false;
k.Type = KeyEventType.Char;
webytb.GetBrowser().GetHost().SendKeyEvent(k);

Answer 3

您必须在 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 以指导您自己如何设置自定义控件以播放/暂停嵌入视频。