YouTube嵌入iPad:通过Javascript API启动时永久缓存

Question

我在使用YouTube嵌入式工作时遇到了一些问题.

我正在使用YouTube API加载视频.在加载的视频之上,我有一个自定义控件<div>(透明),只有一个播放按钮(an <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播放器,但不能解决问题.

我试着看看它是否可以像http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html中所描述的那样工作.

Answer 1

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

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