Gibt es eine Möglichkeit HTML5-Video-Vollbild zu machen?
https://stackoverflow.com/questions/1055214
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Gibt es eine Möglichkeit, ein Video-Vollbild mit dem HTML5 <video> Tag zu spielen?
Und wenn dies nicht möglich ist, weiß jemand, ob es ein Grund für diese Entscheidung ist?
Lösung
HTML 5 bietet keine Möglichkeit, ein Video Vollbild zu machen, aber die parallele Vollbild-Spezifikation liefert requestFullScreen die Methode, die (einschließlich <video> Elemente) beliebige Elemente ermöglicht Vollbild gemacht werden.
Es hat experimentelle Unterstützung in einer Reihe von Browsern .
Original Antwort:
Von der HTML5-Spezifikation (at die Zeit des Schreibens: June '09):
Benutzerprogramme sollten ein nicht liefern öffentliche API Videos zu veranlassen, dass gezeigt Vollbild. Ein Skript, mit einem kombinierten sorgfältig Videodatei gefertigt, könnte Trick den Benutzer in ein Denken System-modaler Dialog hatte gezeigt, wurde und fordert den Benutzer auf, ein Kennwort. Es besteht auch die Gefahr von „nur“ Ärger mit Seiten starten Vollbild-Videos, wenn Links sind geklickt oder Seiten navigiert. Stattdessen, User-Agent-Schnittstelle spezifische Merkmale vorgesehen sein, um die leicht zu erlauben Benutzer eine Vollbild-Wiedergabe zu erhalten Modus.
Browser eine Benutzeroberfläche zur Verfügung stellen kann, sollte aber einen programmierbaren nicht liefern.
Beachten Sie, dass die obige Warnung wurde von der Spezifikation seit entfernt.
Andere Tipps
Die meisten Antworten hier sind veraltet.
Es ist nun möglich, jedes Element zu bringen, in dem Vollbild-API , obwohl es immer noch ein ziemlich Chaos, weil Sie nicht nur div.requestFullScreen() in allen Browsern aufrufen können, haben aber browserspezifische Präfix Methoden verwenden.
Ich habe einen einfachen Wrapper erstellt screenfull.js , die es einfacher zu bedienen die Vollbild macht API.
Aktuelle Browser-Unterstützung ist:
- Chrome 15 +
- Firefox 10 +
- Safari 5.1 +
Beachten Sie, dass viele mobile Browser scheinen keine noch .
Safari unterstützt durch webkitEnterFullscreen.
Chrome sollte es unterstützen, da es WebKit ist auch, aber Fehler aus.
Chris Blizzard von Firefox , sagte sie mit ihrer eigenen Version von Vollbild herauskommen ist, die jedes Element in dem Vollbild gehen können. z.B. Leinwand
Philip Jagenstedt von Oper , sagt sie es in einem späteren Release unterstützt werden.
Ja, sagt die HTML5-Video-Spezifikation nicht größer anzeigen zu unterstützen, aber da die Nutzer es wollen, und jeder Browser unterstützen wird, wird die Spezifikation geändert werden.
webkitEnterFullScreen();
Dies muss auf dem Video-Tag-Elemente genannt werden, beispielsweise den ersten Video-Tages auf der Seite Verwendung auf Vollbild:
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
Hinweis:. Dies ist veraltet Antwort und nicht mehr relevant
Ich denke, dass, wenn wir eine offene Art und Weise zu betrachten, Videos in unserem Browser ohne Closed-Source-Plugins haben wollen (und alle Sicherheitsverletzungen, die mit der Geschichte der Flash-Plugin kommt ...). Der Tag hat einen Weg finden vollen Umfang nutzen zu aktivieren .. Wir könnten damit umgehen wie Flash tut: Vollbild zu tun, hat es aber durch einen Linksklick mit der Maus und nichts aktiviert werden, ich meine, es ist nicht möglich, von Actionscript zu starten Vollbild bei der Beladung eines Flash-Beispiel vorangehen.
Ich hoffe, dass ich klar genug waren: Immerhin, ich bin nur ein französisch IT Student, kein Englisch Dichter:)
Sehen Sie Ya!
Viele moderne Web-Browser haben eine Fullscreen-API implementiert, die im Vollbild Fokus auf bestimmte HTML-Elemente geben kann. Das ist wirklich toll für die Anzeige von interaktiven Medien wie Videos in einer vollständig immersiven Umgebung.
Um die Vollbild-Schaltfläche erhalten arbeiten Sie ein anderes Ereignis-Listener einrichten müssen, die die requestFullScreen() Funktion aufrufen, wenn die Schaltfläche geklickt wird. Um sicherzustellen, dass diese in allen unterstützten Browsern arbeiten Sie gehen zu müssen, auch überprüfen, um zu sehen, ob der requestFullScreen() verfügbar ist und Rückgriff auf den Verkäufer Präfix Versionen (mozRequestFullScreen und webkitRequestFullscreen), wenn es 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.com/building-custom- Kontrollen-for-html5-Videos
Eine programmierbare Art und Weise Vollbild zu tun, arbeitet jetzt sowohl in Firefox und Chrome (in ihren neuesten Versionen). Die gute Nachricht ist, dass ein spec Entwurf hier war:
http://dvcs.w3.org/hg/ Vollbild / raw-Datei / tip / overview.html
Sie werden nach wie vor mit Anbieter-Präfixen für jetzt beschäftigen müssen aber alle Implementierungsdetails in der MDN Website werden verfolgt:
Von 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;
}
Sie können die Breite und Höhe ändern 100% sein, aber es wird den Browser Chrome oder die OS-Shell nicht abdecken.
Design-Entscheidung ist, weil HTML im Browser-Fenster lebt. Flash-Plugins ist nicht in dem Fenster, damit sie Vollbild gehen.
Das ist sinnvoll, sonst könnte man img-Tags machen, die die Schale bedeckt oder h1-Tags machen so den ganzen Bildschirm ein Buchstabe war.
Nein, ist es nicht möglich, Vollbild-Video in HTML zu haben, 5. Wenn Sie Gründe wissen wollen, Sie haben Glück, weil das Argument Kampf für Vollbild jetzt gekämpft wird. Siehe WHATWG Mailingliste und suchen Sie nach der Wort "Video". Ich persönlich hoffe, dass sie in HTML 5 Vollbild-API zur Verfügung stellen.
Firefox 3.6 eine Vollbild-Option für HTML5 Videos hat die rechte Maustaste auf dem Video und wählen Sie ‚Vollbild‘.
Die neuesten Webkit Night auch Vollbild-HTML5-Video unterstützen, versuchen Sie den Sublime Spieler mit dem neuesten nächtlichen und Cmd / Strg halten, während die Vollbild-Option auswählen.
Ich denke, Chrome / Opera wird auch so etwas wie dies unterstützen. Hoffentlich IE9 wird auch Vollbild-HTML5-Video unterstützen.
Dies ist in WebKit über webkitEnterFullscreen .
Eine alternative Lösung wäre Browser zu haben einfach auf dem Kontextmenü diese Option zur Verfügung stellen. Keine Notwendigkeit, Javascript, dies zu tun, obwohl ich sehen konnte, wenn es sinnvoll wäre.
In der Zwischenzeit eine alternative Lösung einfach das Fenster zu maximieren wäre (Javascript kann Bildschirmabmessungen zur Verfügung stellen) und dann das Video in ihn zu maximieren. Probieren Sie es aus und dann einfach sehen, ob die Ergebnisse an den Benutzer akzeptabel sind.
HTML 5 Video geht Vollbild in der aktuellen Nightly Build von Safari, obwohl ich nicht sicher bin, wie es 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();
}
}
}
Ja. Nun, was mit HTML5-Video passiert ist, dass Sie nur die <video> Tag setzen und der Browser seine eigene Benutzeroberfläche geben, und damit die Möglichkeit für Vollbildansicht. Es macht wirklich das Leben viel besser auf uns Benutzer nicht zu haben, um die „Kunst“ einige Entwickler mit Flash-Spielen zu sehen, könnte machen :) Es fügt auch die Konsistenz der Plattform, das ist schön.
es ist einfach, alle Probleme können wie folgt gelöst werden,
1) haben zu entkommen nehmen Sie immer aus Vollbild-Modus (Dies gilt nicht manuell durch f11 Vollbild des Eintritt)
2) vorübergehend ein kleines Banner angezeigt Vollbild-Videomodus sagen, eingegeben wird (vom Browser)
3) blockieren Vollbild-Aktion standardmäßig, genau wie für Pop-ups und lokale Datenbank in html5 und Lage api und etc getan wurde, etc.
ich sehe keine Probleme mit diesem Entwurf. jemand glaube, ich etwas verpasst?
Wie von Chrome 11.0.686.0 dev Kanal Chrome hat jetzt Vollbild-Video.
Sie können dies tun, wenn Sie Benutzer sagen F11 (Vollbild für viele Browser) zu drücken, und Sie Video setzen auf den ganzen Körper auf der Seite.
Wenn keine dieser Antworten nicht arbeiten (wie sie mir den Ball hielt) Sie zwei Videos einrichten. Eine regelmäßige Größe und eine andere für Vollbild-Größe. Wenn Sie in der Vollbild wechseln
- Sie Javascript Verwenden Sie die Vollbild-Videos ‚src‘ Attribut auf den kleineren Videos ‚src‘ Attribut auf
- Stellen Sie die video.currentTime auf dem Vollbild-Video das gleiche wie das kleine Video sein.
- Verwenden Sie CSS 'display: none' das kleine Video verstecken und das große Display mit der über 'position: absolute' und 'z-index: 1000'. Oder etwas wirklich hoch
