YouTube embed su iPad: buffer per sempre quando si avvia tramite l'API Javascript

Question

Sto riscontrando alcuni problemi nel far funzionare un embed di YouTube.

Sto utilizzando l'API di YouTube per caricare il video. In cima al video caricato ho un controllo personalizzato <div> (trasparente) con solo un pulsante di riproduzione (uno <img>). In questo modo si nasconde il player YouTube predefinito dietro un pulsante di riproduzione che si abbina al resto del design sul sito.

Il <div> sovrappone l'intero iFrame caricato, in modo che il giocatore in sé non è cliccabile - io uso un evento click sul <div> per avviare il video invece:

// 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; 
}); 

funziona bene su iPhone, ma su iPad (e anche Android sembra) il video passa al primo fotogramma del video, ma poi si blocca allo stato di buffering (controllato tramite player.getPlayerState()).

Ho provato ad avviare il video con player.loadVideoById() che non funziona (errore uguale).

Se rimuovo i controlli di sovrapposizione <div> e quindi consente all'utente di fare effettivamente clic sul video, funziona correttamente.

Qualche suggerimento su come posso riprodurre il video utilizzando l'API di Javascript?

Edit:

ho cambiato il codice embed un po ', vale a dire ho aggiunto la html5=1 come descritto in Force HTML5 youtube video. Questo cambia il contenuto dell'iFrame incorporato per usare il player HTML5, ma non risolve il problema.

Ho provato a vedere se poteva funzionare come descritto in http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html.

Answer 1

Apple non consente il caricamento di tag tramite script su iOS (per evitare l'utilizzo di larghezza di banda non necessaria su reti mobili). Diverse versioni di Android mostrano lo stesso comportamento.

Dovrai far sì che l'utente inizi il video facendo clic sul video stesso, dopodiché sarai in grado di controllare il video tramite l'API come sui dispositivi desktop.

Answer 2

Attualmente eseguiamo solo un controllo prima di inviare player.playVideo(); funzione. Non è l'ideale, ma funziona finché non otteniamo una migliore correzione a livello di API da parte di Google.

Nella parte superiore dello script embed si imposta il var:

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

Poi nella funzione click si utilizza:

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