Controlli sovrapposti per video su iPhone/iPad

Question

Sto scrivendo una webapp in cui ho bisogno di visualizzare un video e alcuni controlli (non standard), che dovrebbero apparire in sovrapposizione. Quindi crea alcune div e posizionale sul video, con un indice z più alto.

Ancora, su iPhone e iPad, sembra che quei controlli non siano selezionabili. Registro le azioni per l'evento click, ma non viene attivato affatto quando tocco i controlli. Capisco che non posso avere alcun controllo mentre il video è in riproduzione (anche a schermo intero), ma il problema è che i controlli sono inutilizzabili anche quando il video è fermo.

Ho anche provato a rimuovere l'attributo controls dal video, senza alcun effetto.

C'è un modo per registrare eventi di clic per elementi posizionati su un video su iPhone/iPad?

Answer 1

Una cosa da provare è fare in modo che l'elemento con i controlli ostruisca l'intero video, non solo una parte di esso - questo ti aiuterà a eseguire il debug in ogni caso. Un altro approccio è utilizzare gli eventi tattili invece degli eventi click. Questi si eseguono più velocemente e di solito non sono sovraccarichi. Il codice di esempio sarebbe utile.

Answer 2

Ho avuto lo stesso problema e ottenuto che funziona impostando la proprietà CSS dell'elemento video HTML5, mentre

pausa al -webkit-transform:scale(0.01);

giocare--webkit-transform:scale(1);

Il problema è che l'elemento video HTML5 su iOS sembra dirottare gli eventi di clic nelle aree (degli elementi sovrapposti in alto) contenuti nel riquadro di delimitazione dell'elemento video. Se il riquadro di delimitazione viene reso più piccolo con la scala (0,01) o il riquadro di delimitazione viene spostato dallo schermo con translateX (-2560px), nessuna area di elemento si trova direttamente sopra l'elemento video e gli eventi di clic verranno attivati.