ipad - iPad 上的 YouTube 嵌入 : Buffers forever when starting via Javascript API

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=1如 Force HTML5 youtube video 中所述。这会将嵌入的 iFrame 的内容更改为使用 HTML5 播放器，但并不能解决问题。

我尝试了一下，看看它是否可以按照 http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html 中所述工作。 .

Answer 1

Apple 不允许在 iOS 上通过脚本加载标签(以防止在移动网络上使用不必要的带宽)。 Android 的多个版本都表现出相同的行为。

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