it-swarm.com.de

HTML5-Video auf dem iPad

Ich habe eine dynamische Videogalerie und sie funktioniert hervorragend auf einem Computer. Wenn Sie auf ein iPad wechseln, wird das Video geladen und das Symbol „Kann nicht abgespielt werden“ wird angezeigt. Stattdessen würde ich das Video lieber erst dann zeigen, wenn es abspielbereit ist. Ich habe versucht, Ereignis-Listener für "canplaythrough" und "canplay" hinzuzufügen, und wenn sie auftreten, wird das Video eingeblendet und dann wiedergegeben. Unterstützt das iPad diese Ereignisse nicht?

new_video = document.createElement('video');
new_video.setAttribute('class', 'none');
new_video.setAttribute('width', '568');
new_video.setAttribute('height', '269');
new_video.setAttribute('id', 'video'+video_num);
current_video.insertBefore(new_video, video_controls);
new_video.load();
new_video.addEventListener('canplaythrough', function() {
     $('#video'+video_num').fadeIn(100);
     new_video.play();
});
17
mrollinsiv

Die Lösung dieses visuellen Problems besteht darin, das Videoelement auszublenden, bis es für die Wiedergabe bereit ist. Beachten Sie, dass Sie display:none nicht festlegen können (das Video wird in diesem Fall nicht geladen) und visibility:hidden das Problem auch nicht lösen kann.

Um dies zu beheben, wickeln Sie das Videoelement mit overflow:hidden auf einen DIV und stellen Sie -webkit-transform:translateX(1024px) ein (eine Zahl, die hoch genug ist, um das Video aus dem Bildschirm zu schieben).

Dann müssen Sie die Ereignisse canplay oder canplaythrough oder load abhören (je nach Bedarf) und die translateX anschließend auf Null setzen.

7
Miller Medeiros

Auf dem iPad wird das Video erst geladen, wenn ein Benutzer ein von Apple geplantes Ereignis startet, um zu verhindern, dass iPhone- oder iPad-Benutzer ihre Datenpläne verbrennen. Sie werden also nicht in der Lage sein, das zu tun, was Sie wollen.

Schauen Sie sich diesen Link an und suchen Sie im Abschnitt "Gerätespezifische Überlegungen" nach Informationen. Es werden jedoch keine Daten geladen, sodass das Ereignis canplaythrough erst ausgelöst werden kann, wenn ein Benutzer es berührt.

4
Jeff Beck

startet automatisch den Player auf dem iPad/iPhone:

function fakeClick(fn) {
    var $a = $('<a href="#" id="fakeClick"></a>');

    $a.bind("click", function(e) {
        e.preventDefault();
        fn();
    });

    $("body").append($a);

    var evt,
        el = $("#fakeClick").get(0);

        if (document.createEvent) {
            evt = document.createEvent("MouseEvents");
            if (evt.initMouseEvent) {
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            }
        }

        $(el).remove();
} 

$(function() {
    var video = $("#mobileVideo").get(0);

    fakeClick(function() {
        video.play();
    });
});
1
Ryan Weiss

Überprüfen Sie, ob der Browser das Video abspielen kann, bevor Sie versuchen, es zu laden:

function canPlayVorbis() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));
}

function canPlayMP4() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
}

function canPlayWebM() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
}

Entnommen aus Tauchen Sie ein in HTML5 Anhang A .

1
robertc

das problem scheint darin zu liegen, das videoobjekt dynamisch zu erstellen - das bricht irgendwie den code auf dem ipad. Ich habe einen Videoplayer geschrieben, der das bereits vorhandene Videoelement in einen Container verschiebt und das Video sofort nicht mehr funktioniert. auf anderen systemen kein problem ... schätze, du musst einen weg finden, um das videoelement bereits zu platzieren und dann all deinen anderen code darüber und darunter hinzuzufügen ....

1
Jörn Berkefeld

Erkenne, dass dies ein altes Problem ist, aber wenn jemand anderes darüber stolpert, bin ich auf ein ähnliches Problem gestoßen.

Betrachtet man die Ereignisse, die vom Videoelement ausgelöst wurden, so sieht es so aus, als würde das iPad mit dem Laden des Videos beginnen und es dann fast sofort aussetzen (es scheint zeitgleich mit dem ersten Fortschrittsereignis zu sein).

Es wird nicht das "canplay" - oder "canplaythrough" -Ereignis auslösen, bis nachdem die Wiedergabe tatsächlich begonnen hat, also müssen Sie eines der 3 Ereignisse anhören, die ausgelöst werden, bevor die Wiedergabe beginnt:

  • ladestart
  • fortschritt
  • aussetzen

Ich würde Ihren Handler auf 'loadstart' ändern und das ausprobieren.

1
yenemy

Dies ist möglicherweise der Grund, warum Ihr MP4-Video erst abgespielt wird, wenn es vollständig geladen ist: wie Sie Ihr HTML5 MP4-Video zum Abspielen bringen, bevor es vollständig geladen ist . Jedenfalls einen Versuch wert.

0
Ian Devlin

Hier ist ein großartiger Ort, um sich mit HTML5-Ereignissen vertraut zu machen.

http://www.w3.org/2010/05/video/mediaevents.html

0
Tyguy7