HTML5 Video Element на iPad не охватывает события OnClick или TouchStart?

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

Вопрос

Я пытаюсь прикрепить некоторые события к видеоэлементу HTML5 внутри моего веб-приложения 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>
Это было полезно?

Решение

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

Другие советы

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top