Gibt es eine Möglichkeit, HTML5-Videos im Vollbildmodus zu erstellen?

Gibt es eine Möglichkeit, ein Video im Vollbildmodus mit HTML5 abzuspielen? <video> Tag ?

Und wenn dies nicht möglich ist, weiß jemand, ob es einen Grund für diese Entscheidung gibt?

HTML 5 bietet keine Möglichkeit, ein Video im Vollbildmodus zu erstellen, aber die parallele Vollbildspezifikation bietet die requestFullScreenMethode, die beliebige Elemente (einschließlich) zulässt<video> Elemente) aus Vollbild werden.

Es hat experimentelle Unterstützung in einer Reihe von Browsern .

Ursprüngliche Antwort:

Aus der HTML5-Spezifikation (zum Zeitpunkt des Schreibens: Juni '09):

Benutzerprogramme sollten keine öffentliche API bereitstellen, damit Videos im Vollbildmodus angezeigt werden. Ein Skript in Kombination mit einer sorgfältig erstellten Videodatei könnte den Benutzer dazu verleiten, zu glauben, dass ein systemmodaler Dialog angezeigt wurde, und den Benutzer zur Eingabe eines Kennworts auffordern. Es besteht auch die Gefahr eines "bloßen" Ärgers, wenn Seiten Vollbildvideos starten, wenn auf Links geklickt oder Seiten navigiert werden. Stattdessen können benutzeragentenspezifische Schnittstellenfunktionen bereitgestellt werden, um es dem Benutzer leicht zu ermöglichen, einen Vollbild-Wiedergabemodus zu erhalten.

Browser bieten möglicherweise eine Benutzeroberfläche, sollten jedoch keine programmierbare bereitstellen.

Beachten Sie, dass die obige Warnung inzwischen aus der Spezifikation entfernt wurde.

Die meisten Antworten hier sind veraltet.

Es ist jetzt möglich, jedes Element mithilfe der Vollbild-API in den Vollbildmodus zu bringen , obwohl es immer noch ziemlich chaotisch ist , da Sie nicht nur div.requestFullScreen()alle Browser aufrufen können, sondern auch browserspezifische Präfixmethoden verwenden müssen .

Ich habe einen einfachen Wrapper screenfull.js erstellt , der die Verwendung der Vollbild-API erleichtert.

Aktuelle Browserunterstützung ist:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

Beachten Sie, dass viele mobile Browser noch keine Vollbildoption unterstützen .

Safari unterstützt es durch webkitEnterFullscreen.

Chrome sollte es unterstützen, da es auch WebKit ist, aber Fehler aus.

Chris Blizzard von Firefox sagte, dass sie eine eigene Vollbildversion herausbringen, mit der jedes Element in den Vollbildmodus wechseln kann. zB Leinwand

Philip Jagenstedt von Opera sagt, dass sie es in einer späteren Version unterstützen werden.

Ja, die HTML5-Videospezifikation besagt, dass Vollbild nicht unterstützt werden soll. Da Benutzer dies jedoch möchten und jeder Browser dies unterstützt, ändert sich die Spezifikation.

webkitEnterFullScreen();

Dies muss beispielsweise für das Video-Tag-Element aufgerufen werden, um das erste Video-Tag auf der Seite im Vollbildmodus zu verwenden:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

Hinweis: Dies ist eine veraltete Antwort und nicht mehr relevant.

Viele moderne Webbrowser haben eine FullScreen-API implementiert, mit der Sie bestimmten HTML-Elementen den Vollbildfokus geben können. Dies ist wirklich großartig, um interaktive Medien wie Videos in einer vollständig immersiven Umgebung anzuzeigen.

Damit die Vollbildschaltfläche funktioniert, müssen Sie einen anderen Ereignis-Listener einrichten, der die requestFullScreen()Funktion aufruft, wenn Sie auf die Schaltfläche klicken. Um sicherzustellen, dass dies in allen unterstützten Browsern funktioniert, müssen Sie auch überprüfen, ob das requestFullScreen()verfügbar ist, und auf die vom Hersteller vorangestellten Versionen ( mozRequestFullScreenund webkitRequestFullscreen) zurückgreifen, wenn dies nicht der Fall ist.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Referenz: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Referenz: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -videos

Ich denke, wenn wir eine offene Möglichkeit haben möchten, Videos in unseren Browsern ohne Closed-Source-Plugins anzuzeigen (und alle Sicherheitsverletzungen, die mit der Geschichte des Flash-Plugins einhergehen ...). Das Tag muss einen Weg finden, um den Vollbildmodus zu aktivieren. Wir könnten damit umgehen wie Flash: Um den Vollbildmodus zu aktivieren, muss es durch einen Linksklick mit der Maus aktiviert werden und sonst nichts. Ich meine, ActionScript kann nicht gestartet werden Vollbild beim Laden eines Blitzes durch Beispiel.

Ich hoffe ich war mir klar genug: Immerhin bin ich nur ein französischer IT-Student, kein englischer Dichter :)

Tschüss!

Aus CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Eine programmierbare Möglichkeit, Vollbild zu erstellen, funktioniert jetzt sowohl in Firefox als auch in Chrome (in den neuesten Versionen). Die gute Nachricht ist, dass hier eine Spezifikation entworfen wurde:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

Sie müssen sich vorerst noch mit Herstellerpräfixen befassen, aber alle Implementierungsdetails werden auf der MDN-Site verfolgt:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Sie können die Breite und Höhe auf 100% ändern, sie werden jedoch weder das Browser-Chrome noch die Betriebssystem-Shell abdecken.

Die Entwurfsentscheidung liegt darin, dass HTML im Browserfenster gespeichert ist. Flash-Plugins befinden sich nicht im Fenster, sodass sie im Vollbildmodus angezeigt werden können.

Dies ist sinnvoll, andernfalls können Sie img-Tags erstellen, die die Shell bedecken, oder h1-Tags erstellen, sodass der gesamte Bildschirm ein Buchstabe ist.

Nein, es ist nicht möglich, Vollbildvideos in HTML 5 zu haben. Wenn Sie Gründe wissen möchten, haben Sie Glück, denn der Streit um den Vollbildmodus wird gerade ausgetragen. Sehen Sie sich die WHATWG-Mailingliste an und suchen Sie nach dem Wort "Video". Ich persönlich hoffe, dass sie eine Vollbild-API in HTML 5 bereitstellen.

Firefox 3.6 bietet eine Vollbildoption für HTML5-Videos. Klicken Sie mit der rechten Maustaste auf das Video und wählen Sie "Vollbild".

Die neuesten Webkit-Nightlies unterstützen auch HTML5-Vollbildvideos. Probieren Sie den Sublime-Player aus mit den neuesten Nightlys aus und halten Sie Cmd / Ctrl gedrückt, während Sie die Vollbildoption auswählen.

Ich denke, Chrome / Opera wird auch so etwas unterstützen. Hoffentlich unterstützt IE9 auch HTML5-Vollbildvideos.

Dies wird in WebKit über webkitEnterFullscreen unterstützt .

Eine alternative Lösung wäre, den Browser einfach diese Option im Kontextmenü bereitstellen zu müssen. Dafür ist kein Javascript erforderlich, obwohl ich sehen konnte, wann es nützlich sein würde.

In der Zwischenzeit wäre eine alternative Lösung einfach, das Fenster zu maximieren (Javascript kann Bildschirmabmessungen bereitstellen) und dann das darin enthaltene Video zu maximieren. Probieren Sie es aus und prüfen Sie dann einfach, ob die Ergebnisse für Ihre Benutzer akzeptabel sind.

HTML 5-Videos werden in der neuesten nächtlichen Version von Safari im Vollbildmodus angezeigt, obwohl ich nicht sicher bin, wie dies technisch erreicht wird.

Die Komplettlösung:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Wenn Sie die Möglichkeit haben, Ihre Site als Progressive Web App (PWA) zu definieren, können Sie diese auch display: "fullscreen"unter manifest.json verwenden . Dies funktioniert jedoch nur, wenn der Benutzer Ihre Webanwendung zum Startbildschirm hinzufügt / installiert und von dort aus öffnet.

Ja. Was mit HTML5-Videos passiert, ist, dass Sie nur das <video>Tag einfügen und der Browser eine eigene Benutzeroberfläche und damit die Möglichkeit zur Vollbildanzeige bereitstellt. Es macht das Leben für uns Benutzer wirklich viel besser, nicht die "Kunst" sehen zu müssen, die ein Entwickler, der mit Flash spielt, machen könnte :) Es fügt der Plattform auch Konsistenz hinzu, was sehr schön ist.

es ist einfach, alle Probleme können so gelöst werden,

1) Lassen Sie sich durch Flucht immer aus dem Vollbildmodus herausführen (dies gilt nicht für die manuelle Eingabe des Vollbildmodus über f11).

2) Zeigen Sie vorübergehend ein kleines Banner an, das besagt, dass der Vollbild-Videomodus aktiviert ist (vom Browser).

3) Blockieren Sie standardmäßig die Vollbildaktion, genau wie dies für Popups und lokale Datenbanken in HTML5 und die Speicherort-API usw. usw. geschehen ist.

Ich sehe keine Probleme mit diesem Design. Glaubt jemand, ich hätte etwas verpasst?

Ab Chrome 11.0.686.0 hat der Dev-Kanal Chrome jetzt Vollbildvideos.

Sie können dies tun, wenn Sie den Benutzer anweisen, F11 zu drücken (Vollbild für viele Browser), und das Video auf den gesamten Seitenkörper setzen.

Wenn keine dieser Antworten nicht funktioniert (wie bei mir nicht), können Sie zwei Videos einrichten. Eine für normale Größe und eine für Vollbildgröße. Wenn Sie zum Vollbild wechseln möchten

1. Verwenden Sie Javascript, um das Attribut 'src' des Vollbildvideos auf das Attribut 'src' kleinerer Videos zu setzen
2. Stellen Sie die video.currentTime im Vollbildvideo so ein, dass sie mit dem kleinen Video übereinstimmt.
3. Verwenden Sie css 'display: none', um das kleine Video auszublenden und das große mit den via 'position: absolute' und 'z-index: 1000' oder etwas wirklich Hochem anzuzeigen.