HTML5 Video Element на iPad не запускает события onclick или touchstart? - PullRequest
Новая
       23

HTML5 Video Element на iPad не запускает события onclick или touchstart?

10 голосов
/ 27 сентября 2010

Я пытаюсь прикрепить некоторые события к элементу HTML5 Video в моем веб-приложении для iPad, но они, похоже, не запускаются?Я проверил это как на устройстве, так и в симуляторе и получил те же результаты.Однако события (по крайней мере, для onclick) отлично работают в настольном Safari.Я также пытался поменять элемент видео на div и события запускаются нормально?Кто-нибудь еще сталкивался с этим и есть идея для обхода? 

<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>

Ответы [ 2 ]

16 голосов
/ 27 сентября 2010

Элемент video на iPad будет проглатывать события, если вы используете атрибут controls.Вы должны предоставить свои собственные элементы управления, если хотите, чтобы элемент реагировал на сенсорные события.

8 голосов
/ 16 октября 2010

Исходя из своего довольно болезненного опыта за последние пару недель, я могу начать такой список (по крайней мере, для iPad 3.2). Некоторые из этих «особенностей» могут быть задокументированы, но соответствующее предложение часто трудно найти.

  • Свойство volume игнорируется (вы можете установить его, и оно, похоже, изменится, но на фактическую громкость на устройстве это не повлияет).
  • Свойство currentTime доступно только для чтения. Мой обходной путь для этого - вызвать load(), что, по крайней мере, позволяет мне вернуться к началу клипа.
  • событие onended не будет опубликовано надежно, если элементы управления не видны. Мой обходной путь для этого - отслеживать событие timeupdate и сравнивать currentTime с duration
  • как вы говорите, autobuffer и autoplay отключены.
  • видео не будет кэшироваться локально независимо от настроек кэша приложения.
  • многие правила CSS не работают должным образом при применении к тегу <video>, например. opacity и z-index оба кажутся неэффективными, что означает, что вы не можете затемнить или скрыть видео. Вы можете установить display:none, но это очень резко.

Как я уже сказал, это, вероятно, не исчерпывающий список, и я бы приветствовал дополнения или исправления.

(Кроме того, после большого поиска в Google я нашел список здесь скудного подмножества методов и свойств подключаемого модуля QT, поддерживаемых в Mobile Safari).

...