HTML5 Video-Elemente auf dem iPad nicht ausgelöst Onclick oder Berührungsstart Ereignisse?

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

Frage

Ich versuche, einige Ereignisse auf ein HTML5 Video-Element in meinen iPad Web-App zu befestigen, aber sie scheinen nicht feuern zu werden? Ich habe das auf dem Gerät getestet beide und im Simulator und die gleichen Ergebnisse erhalten. Die Ereignisse aber (für die Onclick zumindest) funktionieren in Desktop-Safari. Ich habe auch versucht, für ein div das Videoelement Swapping und die Ereignisse Feuer in Ordnung? Hat jemand anderes über diese kommen und für eine Arbeit um eine Idee? 

<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>
War es hilfreich?

Lösung

Das Videoelement, auf dem iPad, werden Ereignisse schlucken, wenn Sie die Steuerelemente Attribut verwenden. Sie haben eine eigene Kontrollen zur Verfügung zu stellen, wenn Sie das Element reagieren auf Berührungsereignisse wollen.

Andere Tipps

Aus meiner eigenen eher schmerzhaften Erfahrungen in den letzten paar Wochen kann ich eine solche Liste (zumindest für iPad 3.2) beginnen. Einige dieser „Feature“ dokumentiert werden, aber der entsprechende Satz ist oft schwer zu finden.

  • Die volume Eigenschaft wird ignoriert (Sie es einrichten können, und es wird zu ändern erscheinen, aber das tatsächliche Volumen auf dem Gerät nicht beeinträchtigt werden).
  • Die currentTime Eigenschaft ist schreibgeschützt. Meine Abhilfe für dies ist, um den Anruf load(), die zumindest erlaubt es mich zu Beginn des Clips zurückgesetzt werden.
  • das onended Ereignis wird nicht zuverlässig erstellen, wenn die Steuerung sichtbar ist. Meine Abhilfe für diese ist das timeupdate Ereignis zu überwachen und die currentTime zum duration vergleichen
  • , wie Sie sagen, autobuffer und autoplay sind deaktiviert.
  • Video wird cachen nicht lokal unabhängig von der Anwendung Cache-Einstellungen.
  • viele CSS-Regeln scheinen nicht zu funktionieren wie erwartet, wenn sie den <video> Tag angewandt - zB. opacity und z-index beide scheinen wirkungslos, was bedeutet, dass Sie nicht dimmen oder ein Video verbergen. Sie können display:none gesetzt, aber das ist sehr abrupt.

Wie gesagt, dies ist wahrscheinlich keine erschöpfende Liste, und ich würde willkommene Ergänzungen oder Korrekturen.

(Auch nach dem viel googeln, fand ich hier eine Liste der mageren Teilmenge von QT Plugin-Methoden und Eigenschaften, die auf mobile Safari werden unterstützt).

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top