HTML5 Video Elemento su iPad non scatta onclick o eventi TouchStart?

StackOverflow https://stackoverflow.com/questions/3803702

Domanda

Sto cercando di collegare alcuni eventi a un elemento HTML5 video all'interno mio iPad web app, ma non sembrano essere a sparare? Ho provato questo sia sul dispositivo e nel simulatore e ottenere gli stessi risultati. Gli eventi però (per la onclick almeno) funzionano bene nel desktop di Safari. Ho anche provato scambiando l'elemento video per un div e l'ammenda eventi fuoco? chiunque altro ha incontrato questo e hanno un'idea per un lavoro in giro? 

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <title>Test video swipe</title>
        </head>
        <body>

                <video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>

                <script>
                        var theVid = document.getElementById("currentlyPlaying");

                                theVid.addEventListener('touchstart', function(e){
                                        e.preventDefault();
                                        console.log("touchstart");
                                }, false);

                                theVid.addEventListener('click', function(e){
                                        e.preventDefault();
                                        console.log("click");
                                }, false);

                                theVid.addEventListener('touchmove', function(e){
                                        console.log("touchmove");
                                }, false);

                                theVid.addEventListener('touchend', function(e){
                                        console.log("touchend");
                                }, false);

                                theVid.addEventListener('touchcancel', function(e){
                                        console.log("touchcancel");
                                }, false);



                </script>
        </body>
</html>
È stato utile?

Soluzione

L'elemento video, sul iPad, sarà ingoiare eventi, se si utilizza l'attributo controlli. È necessario fornire i propri controlli, se si desidera che l'elemento di rispondere agli eventi di tocco.

Altri suggerimenti

Da mie esperienze piuttosto doloroso oltre l'ultimo paio di settimane posso iniziare tale lista un (almeno per iPad 3.2). Alcune di queste "caratteristiche" può essere documentata, ma la frase rilevante è spesso difficile da trovare.

  • La proprietà volume viene ignorata (è possibile impostare, e apparirà al cambiamento, ma il volume effettivo del dispositivo non viene influenzata).
  • La proprietà currentTime è di sola lettura. La mia soluzione per questo è alla chiamata load(), che almeno mi permette di Reset per l'inizio della clip.
  • l'evento onended non inviare in modo affidabile a meno che i controlli sono visibili. La mia soluzione per questo è di monitorare l'evento timeupdate e confrontare il currentTime al duration
  • come dici tu, autobuffer e autoplay sono disabilitati.
  • video non memorizza nella cache in locale, indipendentemente dalle impostazioni della cache delle applicazioni.
  • molte regole CSS non sembra funzionare come previsto quando applicato al tag <video> - ad es. opacity e z-index entrambi sembrano inefficaci, che significa che non è possibile attenuare o nascondere un video. È possibile impostare display:none, ma che è molto brusco.

Come ho detto, questo non è probabilmente un elenco esaustivo, e mi piacerebbe aggiunte o correzioni di benvenuto.

(Inoltre, dopo il molto googling, ho trovato un elenco qui del sottoinsieme esiguo di QT metodi e proprietà Plugin che sono supportati su Safari mobile).

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top