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 に答える