it-swarm.com.de

Gibt es eine Möglichkeit, HTML5-Videos als Vollbild anzuzeigen?

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

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

140
nicudotro

HTML 5 bietet keine Möglichkeit, ein Video im Vollbildmodus zu erstellen, aber die parallele Vollbildspezifikation liefert die requestFullScreen -Methode, mit der beliebige Elemente (einschließlich <video> Elemente) als Vollbild angezeigt 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 des "bloßen" Ärgers, wenn Seiten Vollbildvideos starten, wenn auf Links geklickt oder durch Seiten navigiert wird. Stattdessen können benutzeragentenspezifische Schnittstellenmerkmale 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 bieten.


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

89
Quentin

Die meisten Antworten hier sind veraltet.

Es ist jetzt möglich, mit der Vollbild-API jedes Element in den Vollbildmodus zu bringen, obwohl es immer noch ein ziemliches Durcheinander ist, da Sie nicht einfach div.requestFullScreen() aufrufen können. in allen Browsern, müssen jedoch browserspezifische Präfixmethoden verwenden.

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 anscheinend noch keine Vollbildoption unterstützen .

72
Sindre Sorhus

Safari unterstützt es durch webkitEnterFullscreen.

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

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

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

Ja, in der HTML5-Videospezifikation wird angegeben, dass der Vollbildmodus nicht unterstützt wird. Da die Benutzer dies jedoch möchten und jeder Browser dies unterstützen wird, wird sich die Spezifikation ändern.

31
heff
webkitEnterFullScreen();

Dies muss auf dem Video-Tag-Element aufgerufen werden, um beispielsweise das erste Video-Tag auf der Seite im Vollbildmodus anzuzeigen.

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

Hinweis: Diese Antwort ist veraltet und nicht mehr relevant.

14
jpkeisala

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

Damit die Vollbild-Schaltfläche funktioniert, müssen Sie einen anderen Ereignis-Listener einrichten, der beim Klicken auf die Schaltfläche die Funktion requestFullScreen() aufruft. Um sicherzustellen, dass dies in allen unterstützten Browsern funktioniert, müssen Sie auch prüfen, ob die Funktion requestFullScreen() verfügbar ist, und auf die vom Anbieter festgelegten Versionen (mozRequestFullScreen und webkitRequestFullscreen) wenn es das nicht 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. de/building-custom-controls-for-html5-videos

6
Mo.

Ich denke, wenn wir eine offene Möglichkeit haben möchten, Videos in unseren Browsern ohne Closed-Source-Plugins anzuzeigen (und alle Sicherheitslücken, die mit der Geschichte des Flash-Plugins einhergehen ...). Das Tag muss einen Weg finden, um den Vollbildmodus zu aktivieren. Wir könnten es wie Flash handhaben: Um den Vollbildmodus zu aktivieren, muss es mit einem Linksklick mit der Maus aktiviert werden und nichts anderes, ich meine, es ist nicht möglich, ActionScript zu starten Vollbild beim Laden eines Blitzes am Beispiel.

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

Tschüss!

6
LokR

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;
}
5
Montaser

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 erstellt 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

5
Ernest

Sie können die Breite und Höhe auf 100% ändern, aber der Browser chrome oder die OS Shell werden nicht abgedeckt.

Die Entscheidung für das Design liegt darin, dass HTML im Browserfenster enthalten 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 abdecken, oder h1-Tags erstellen, sodass der gesamte Bildschirm ein Buchstabe ist.

3
Rich Bradshaw

Dies wird in WebKit über webkitEnterFullscreen unterstützt.

3
Zachary Ozer

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. Versuchen Sie es mit Sublime Player 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 wird IE9 auch HTML5-Vollbildvideo unterstützen.

3
Husky

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

3
calavera.info

Eine alternative Lösung wäre, dass der Browser diese Option einfach im Kontextmenü bereitstellt. Ich brauche kein Javascript, um dies zu tun, obwohl ich sehen konnte, wann es nützlich wäre.

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

2
Andre

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();
                    }
            }
    }
1
momomo

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.

1
st3v3