YouTube通过JavaScript API启动时将嵌入iPad上的iPad:永久缓冲区

Question

我遇到了一些问题，使YouTube嵌入工作。

我正在使用YouTube API加载视频。在加载视频的顶部，我有一个自定义控件<div>（透明），只有一个播放按钮（<img>）。它是通过这种方式隐藏默认的YouTube播放器后面的播放按钮，该按钮与网站上的其余部分相关。

<div>覆盖了整个加载的iframe，因此播放器本身不可单击 - 我在<div>上使用单击事件来启动视频：

// Inside onYouTubePlayerAPIReady():
var player = new YT.Player(playerId, {
  height: height,
  width: '100%',
  videoId: videoId,
  playerVars: {
    html5: '1',
    controls: '0',
    rel: '0',
    showinfo: '0',
    modestbranding: '1',
    theme: 'light',
    color: 'white',
    wmode: 'transparent',
    suggestedQuality: "large"
  }
});
$(".youtube-player-controls").bind("click", function(e){
  if (!player || !player.getPlayerState) return false;
  if (player.getPlayerState() == YT.PlayerState.PLAYING) player.pauseVideo();
  else player.playVideo();
  return false;
});

在iPhone上工作正常，但是在iPad上（似乎也是Android），视频切换到视频的第一帧，但随后停滞在缓冲状态（通过player.getPlayerState()检查）。

我尝试使用player.loadVideoById()启动视频，该视频不起作用（同一错误）。

如果我删除了覆盖层控件<div>，因此允许用户实际单击视频，它可以正常工作。

关于如何使用JavaScript API播放视频的任何建议？

编辑：

我稍微更改了嵌入式代码，即我按照强制HTML5 YouTube视频中所述添加了html5=1。这更改了嵌入式iframe的内容以使用HTML5播放器，但不能解决问题。

p>

Answer 1

Apple不允许通过iOS上的脚本加载标签（以防止在移动网络上使用不必要的带宽）。Android的几个版本显示出相同的行为。

您必须通过单击视频本身来首先让用户启动视频 - 之后，您将能够通过桌面设备通过API控制视频。

Answer 2

当前我们只是在发送player.playvideo（）之前进行检查;功能。这不是理想的选择，但是直到我们从Google获得更好的API级修复之前。

。

在嵌入脚本的顶部您设置了var：

var isiPad = navigator.userAgent.match(/iPad/i) != null;

然后在单击功能中使用：

if (!isiPad) {
player.playVideo();
}