9

我在让 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 播放视频的任何建议？

编辑：

我稍微更改了嵌入代码，即添加了Force HTML5 youtube videohtml5=1中所述的代码。这将嵌入式 iFrame 的内容更改为使用 HTML5 播放器，但并没有解决问题。

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

4

2 回答 2

0

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

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

于 2012-11-08T11:02:32.043 回答
-1

目前我们只是在发送 player.playVideo(); 之前进行检查。功能。这并不理想，但在我们从 Google 获得更好的 API 级别修复之前它会起作用。

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

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

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

if (!isiPad) {
player.playVideo();
}
于 2013-08-20T00:13:23.460 回答