Caricamento video HTML5 per iPad/iPhone

Question

Sto provando a caricare al volo sull'iPad/iPhone e ho notato che non posso posizionare un div al di sopra di questo. Inserisco l'overlay in html in modo che venga generato al caricamento della pagina e non aggiunto tramite javascript e il video quando il suo creato è assolutamente posizionato sotto questo elemento. Funziona su un PC, mi chiedo se da quando è stato creato tramite js che l'iPhone OS sta ignorando lo z-index e forzando verso l'alto?

C'è anche un modo per ignorare l'impostazione predefinita "non può riprodurre l'icona", quella con la barra e mostrare invece un'animazione di caricamento? Questo risolverebbe il mio problema attraverso un'altra rotta.

La mia ultima opzione sarebbe quella di caricare tutti i tag video tramite js sul caricamento della pagina e averli sovrapposti l'uno sull'altro per l'iPad/iPhone? Dal momento che il sistema operativo dell'iPhone non caricherà alcun video fino a quando richiesto funzionerebbe?

Ho anche un problema con l'iPhone e mostra l'attributo "poster" impostato sul tag video.

Answer 1

iPhone non supporta il poster ... fino OS4

Answer 2

È possibile posizionare un'immagine assolutamente sopra il video player. Safari su iPhone lo renderà con un simbolo 'play' trasparente. Credo che qualcosa di simile potrebbe funzionare:

<style type="text/css"> 
div.player 
{ 
    position: relative; 
    margin: 0; 
    padding: 0; 
} 

div.player > img.preview 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 9; 
    cursor: pointer; 
} 
</style> 

E

<div class="player"> 
    <img class="preview" src="zk/grumpies.png" width="320" height="240" alt="click to play" title="click to play"> 
    <video width="320" height="240" controls="controls"> 
    <source type="video/mp4" src="mah/mahnamahna.m3u8" width="320" height="240" /> 
    </video> 
</div> 

Su un iPad che potrebbe funzionare in modo diverso a seconda se si utilizza <video controls /> o no - nel qual caso è necessario fornire i propri controlli con javascript o non sarai in grado di avviare i tuoi file multimediali.

L'icona 'can not play' è nella mia esperienza di solito sempre un'indicazione che il media non può essere riprodotto davvero ;-) perché ha il mimetype o il codec sbagliato, src errato ecc. Sovraccarico sarebbe un caso di controllando le eccezioni degli errori di caricamento del supporto con javascript.

La sovrapposizione di supporti uno sull'altro è a mio avviso impossibile. Puoi fingere magari cambiando posizione.

Answer 3

Avevo lo stesso identico problema con il lettore video iPad. Visivamente lo z-index era inferiore alla sovrapposizione per la finestra di dialogo, ma in realtà non lo era. Se si sostituiscono i controlli predefiniti con il proprio utilizzando javascript il problema scompare.

http://sandbox.solutionsbydesign.com/montage/ipad/

Ho usato l'articolo Nettuts sul fare il proprio lettore video HTML5

Answer 4

ho trovato un bel bel work-around. Sono utilizzando jquery, quindi questa è una cosa da tenere a mente.

Il mio problema era che stavo creando un'applicazione web Ipad, con un pulsante di navigazione in basso a sinistra (non posso fornire un collegamento dato che si tratta di un progetto client). Quando l'utente farebbe clic (toccare) il pulsante in basso a sinistra, si aprirà un menu a comparsa, e quindi si potrebbe fare clic sui pulsanti in questi menu per accedere a sottomenu più profondi.

Il problema:

nessun tag li (o qualsiasi cosa per quella materia), che era sopra il video, non sarebbe cliccabile, così sulle pagine con video, parte della mia tap-navigazione (il parte sul video non funzionerebbe).La lettura di post qui in realtà mi porta alla mia soluzione, semplice, e può o non può funzionare per il tuo caso, ma spero che lo faccia.

mia soluzione:

var myNav = $("TAG_SELECTOR_HERE"); 

myNav.toggle(function(){ 
    var videos = $("video"); 
    videos.removeAttr("controls"); 
}, 
function(){ 
    var videos = $("video"); 
    videos.attr("controls","true"); 
}) 

Ora so io possa mancare alcuni punti e virgola, o il mio codice può essere spento, ma io sono solo distacco per riferimento. Fondamentalmente, quando il mio menu viene cliccato, o è attivo, rimuovo l'attributo controls da tutti i video, e poi quando il menu è disattivato, sto riportando i controlli.

È possibile utilizzare questo metodo ovunque si desideri ... è possibile rimuovere i controlli dopo la fine di un video, dopo che qualcuno passa sopra qualcosa (supponendo che qualcosa non sia già sopra il video), quando il mouse si trova all'interno di determinate coordinate (potrebbe essere la tua unica soluzione in casi estremi) ma dovrebbe funzionare.

Grazie !!

-Nick