HTML5 elemento de vídeo en el iPad no se dispara o eventos onclick touchstart?

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

Pregunta

Estoy intentando conectar algunos eventos a un elemento de vídeo HTML5 dentro de mi aplicación web IPAD, pero no parecen estar disparando? He probado esto tanto en el dispositivo y en el simulador y obtener los mismos resultados. Los eventos sin embargo (para el onclick al menos) buen hacer en el escritorio de Safari. También he intentado intercambiar el elemento de vídeo para un div y la multa eventos fuego? nadie ha llegado a través de este y tienen una idea para un trabajo alrededor? 

<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>
¿Fue útil?

Solución

El elemento de vídeo, en el IPAD, se tragará eventos si se utiliza el atributo controles. Usted tiene que proporcionar sus propios controles si desea que el elemento de responder a eventos de toque.

Otros consejos

A partir de mis propias experiencias dolorosas y no en el último par de semanas me puedo comenzar una lista de tales (al menos para el iPad 3.2). Algunas de estas "características" se puede documentar, pero la sentencia relevante es a menudo difícil de encontrar.

  • La propiedad volume se ignora (se puede establecer, y aparecerá al cambio, pero no se verá afectado el volumen real en el dispositivo).
  • La propiedad currentTime es de sólo lectura. Mi solución para esto es que load() llamada, que al menos me permite restablecer el principio del clip.
  • caso onended no publicará de forma fiable a menos que los controles son visibles. Mi solución para esto es para controlar el evento timeupdate y comparar la currentTime a la duration
  • como usted dice, autobuffer y autoplay están desactivados.
  • vídeo no almacenar en caché localmente, independientemente de la configuración de caché de la aplicación.
  • muchas reglas CSS no parecen funcionar como se espera cuando se aplica a la etiqueta <video> - por ejemplo. opacity y z-index ambos parecen ineficaces, lo que significa que no puede atenuar u ocultar un video. Puede configurar display:none, pero que es muy brusco.

Como digo, esto probablemente no es una lista exhaustiva, y me bienvenidas adiciones o correcciones.

(También, después de más buscando en Google, encontré una lista aquí de la escasa subconjunto de QT métodos y propiedades plugin que se apoyan en Mobile Safari).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top