Web App - iPad webkitEnterFullscreen - Programatically Vollbild-Video geht

Question

http://sandbox.solutionsbydesign.com/i-screenplay/h5/

Oben ist ein Beispiel, das ich von Apple heruntergeladen, wo Sie Steuerelemente für die Wiedergabe und Vollbild-Modus verwenden können. In Safara/iPad funktioniert es super. Ich möchte jedoch, dass die Leute auf einen Link klicken und ein Video laden und dann in den Vollbildmodus wechseln. So zum Beispiel auf dem Link oben, wenn nach dem Laden Punkte in Fullscreen ging das wäre perfekt.

Hat mehr Informationen zu diesem Thema.

Answer 1

Das Beste, was ich mir damit vorstellen konnte.

Richten Sie Ihr Video-Tag ein und verwenden Sie CSS, um es irgendwo auf dem Bildschirm zu positionieren (es kann nicht eingestellt werden: none). Ich habe absolute Positionierung verwendet, um es von der oberen linken Ecke des Bildschirms zu verschieben.

Dann nutzen Sie diese JS:

$('.popup.ipad a').click(function() { 

     var currentID = $(this).closest('.player').find('video').attr('id'); 
     var videoContainer = document.getElementById(currentID); 
     var newSrc = $(this).attr('href'); 

     videoContainer.src = newSrc; 
     videoContainer.webkitEnterFullscreen(); 
     videoContainer.play(); 
}); 

Es in Vollbild groß spielen, aber wenn der Benutzer klickt „done“ um das Video zu beenden wird auch weiterhin den Bildschirm auszuspielen (so werden Sie den Ton hören) .

Also muss ich herausfinden, wie man auf ein Ereignis hört, das ausgelöst wird, wenn "Fertig" berührt wird (ich bin nicht einmal sicher, dass es ein Ereignis dafür gibt). Oder verwenden Sie the method described here und führen Sie jede Sekunde aus, um festzustellen, ob der Vollbildmodus verwendet wird. Aber ich hatte nicht viel Erfolg, egal was ich mache, bekomme ich Fehler.

Hoffentlich hilft das Ihnen, einige Antworten zu finden. Wenn ja, lass es mich wissen!

Answer 2

Ich denke, Ihr Problem besteht darin, einen nicht vom Benutzer aufgerufenen Vollbild zu erzwingen, der nicht funktioniert. Der Benutzer muss die Vollbild-Anforderung durch einen Klick auf die Schaltfläche usw. aufrufen. Das Warten auf das Laden des Videos und das anschließende Vollbild-Anzeigen ist nicht dasselbe.

@Drew Baker Hier ist ein Beitrag, den ich letzte Nacht auf Fullscreen getan habe: http://johncblandii.com/2011/07/html5-video-fullscreen.html.

Answer 3

Das Geheimnis ist, dass Sie nicht in den Vollbildmodus gehen können, bis die Video-Metadaten geladen wurden. The Apple docs Zustand:

Diese Eigenschaft [webkitSupportsFullscreen] ist auch falsch, wenn die Meta Daten geladen oder das loadedmetadata Ereignis nicht ausgelöst hat, und wenn die Dateien sind Audio-only „

.

So wird die Vollbild zum richtigen Zeitpunkt auszulösen, einfach einen Ereignis-Listener für das Ereignisloadedmetadata erstellen:

videoContainer.addEventListener('loadedmetadata', function() { 
    if (videoContainer.webkitEnterFullscreen) { 
     videoContainer.webkitEnterFullscreen(); 
    } 
}); 

Damit sollten Sie in der Lage sein, Fullscreen-Videos auf iOS programmatisch hinzuzufügen und abzuspielen, unabhängig davon, ob Sie den von Drew erwähnten "Off-Screen" -Videobehälter verwenden oder die Video-Tags dynamisch hinzufügen.

Answer 4

Ich habe an diesem Problem auch gearbeitet. Der Versuch, das Video im Vollbildmodus mit einem Klick zu starten

Ich mag es falsch machen, aber hier ist, wie ich es für mich arbeiten (auf iPad Air, iPhone 5, Galaxy 3, Nexus 7 ... alles außer dem iPad 2, wo das Video nicht voll gehen wird Bildschirm noch, aber es wird spielen)

Um ein Video abzuspielen, müssen Sie den Benutzer direkt auf etwas klicken. Jedes Mal, wenn ich JQUERY verwende, funktioniert es auf den iOS-Geräten einfach nicht. Ich denke, dass iOS sehr empfindlich ist etwa weg So direkter Klicks erhalten, können Sie die Onclick-Handler direkt auf den Punkt setzen Sie sie, wie so klicken möchten:

<div onclick='openAndPlay(event);' id='video_layover' ></div> 

function openAndPlay(event) { 

    myvideo.play(); 
    myvideo.webkitEnterFullscreen(); 

    return false; 
} 

ich gefunden habe, die Reihenfolge wichtig. Zuerst das Spiel, dann die Vollbild-Anfrage. Probieren Sie es aus und sehen Sie, ob es für Sie funktioniert. Die Rückgabe false ist möglicherweise nicht erforderlich.