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

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

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

Answer 2

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

Youtube Iframe Api在Chrome上开始播放视频的问题

2 个答案: