O elemento de vídeo html5 no iPad não dispara eventos OnClick ou TouchStart?

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

Pergunta

Estou tentando anexar alguns eventos a um elemento de vídeo HTML5 dentro do meu aplicativo da Web do iPad, mas eles não parecem estar disparando? Eu testei isso tanto no dispositivo quanto no simulador e obtive os mesmos resultados. Os eventos, no entanto (pelo menos para o OnClick) funcionam bem no Safari da Desktop. Eu também tentei trocar o elemento de vídeo por uma div e os eventos disparam bem? Alguém mais se deparou com isso e tem uma idéia para uma trabalho?

<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>
Foi útil?

Solução

O elemento de vídeo, no iPad, engolirá eventos se você usar o atributo Controls. Você precisa fornecer seus próprios controles se quiser que o elemento responda aos eventos de toque.

Outras dicas

A partir de minhas próprias experiências bastante dolorosas nas últimas duas semanas, posso começar essa lista (pelo menos no iPad 3.2). Alguns desses "recursos" podem ser documentados, mas a frase relevante geralmente é difícil de encontrar.

  • o volume A propriedade é ignorada (você pode defini -lo e parece mudar, mas o volume real no dispositivo não será afetado).
  • o currentTime A propriedade é somente leitura. Minha solução alternativa para isso é ligar load(), que pelo menos me permite redefinir para o início do clipe.
  • a onended O evento não será publicado de maneira confiável, a menos que os controles sejam visíveis. Minha solução alternativa para isso é monitorar o timeupdate evento e compare o currentTime para o duration
  • como você diz, autobuffer e autoplay estão desativados.
  • O vídeo não fará cache localmente, independentemente das configurações de cache do aplicativo.
  • Muitas regras de CSS não parecem funcionar como esperado quando aplicado ao <video> Tag - por exemplo. opacity e z-index Ambos parecem ineficazes, o que significa que você não pode diminuir ou ocultar um vídeo. Você pode definir display:none, mas isso é muito abrupto.

Como eu disse, essa provavelmente não é uma lista exaustiva e eu receberia adições ou correções.

(Além disso, depois Muito de Google, encontrei uma lista aqui do subconjunto escasso dos métodos e propriedades do plug -in QT que são suportados no Safari móvel).

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top