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控制视频，就像在桌面设备上一样。

Answer 2

目前我们只是在发送播放器之前进行检查。播放视频（）;功能。它并不理想，但在我们从Google获得更好的API级别修复之前它才有效。

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

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

然后在您使用的点击功能中：

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

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

2 个答案: