HTML 5 Videodehnung
Können Sie ein video zu machen "stretch", um die Breite & die Höhe des video-element? Apparentlyby Standard -, video wird skaliert & im Innern der video-element, proportional.
Dank
InformationsquelleAutor der Frage thomasdecrick | 2010-09-23
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich getestet, mithilfe von Objekt-Passform: füllen Sie die CSS -
Funktioniert gut.
Vom MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):
Objekt-fit-CSS-Eigenschaft legt fest, wie der Inhalt von einem ersetzten element eingesetzt werden soll, um die box aufgebaut, durch seine Höhe und Breite.
Wert: füllen
Den ersetzten Inhalt ist so bemessen, füllen Sie den element-Inhalt box: das Objekt, die konkrete Objektgröße wird das element verwendet, Breite und Höhe.
InformationsquelleAutor der Antwort Leo Yu
Vom die Skillung für
<video>
:Gibt es keine Bestimmungen für die Dehnung des Videos anstelle von letterbox-Format. Dies ist wahrscheinlich, weil die Dehnung macht einen sehr schlechten user-Erfahrung, und die meisten der Zeit, ist nicht das, was vorgesehen ist. Bilder werden gestreckt, um fit standardmäßig, und weil das so ist, finden Sie viele Bilder, die sind stark verzerrt online, wahrscheinlich aufgrund eines einfachen Fehlers in der Angabe der Höhe und Breite.
Können Sie erreichen, gestreckt Effekt mit CSS 3 Transformationenobwohl diese noch nicht vollständig standardisiert oder in allen Browsern implementiert noch, und denen, in denen es implementiert ist, werden Sie brauchen, um eine vendor-Präfix wie
-webkit-
oder-moz-
. Hier ist ein Beispiel:InformationsquelleAutor der Antwort Brian Campbell
Dies funktionierte perfekt für mich
http://coding.vdhdesign.co.nz/?p=29
InformationsquelleAutor der Antwort prussian blue
Gibt es auch die Objekt-fit-CSS-Eigenschaftdas wird wahrscheinlich geben Sie Ihnen, was Sie brauchen.
Übrigens, ich denke, dieser Antrag ist realated zu Wie kann ich HTML-5-video-Wiedergabe fit to frame, statt auf die Wahrung der aspect ratio? .
InformationsquelleAutor der Antwort Silvia
Wird sich nicht ändern, den Anteil von Ihrem video, aber entledigt sich des hässlichen 'unbesetzt' Räume an der Ober-und Unterseite oder die Seiten der Ihre video-viewer, WENN Ihr browser nicht unterstützt die
object-fit:cover
Stil.Lassen Sie uns sagen, Sie haben eine in-page-viewer, der 500x281 (eine richtige Größenänderung von 1280x720). Aber manchmal erhalten Sie möglicherweise ein video, das nicht richtig proportioniert, um genau 16:9, sagen 1278x720 oder 320x176, wie im Fall der 'Buck Bunny" - video auf der W3C-Website. Es wäre schön, wenn das video füllte den Behälter vollständig, und Sie müssen nicht erstellen Sie einen neuen container für jeden falsch proportionierte video.
Einem gegebenen code-fragment wie:
Rendern eines Videos mit schwarzen oder weißen Linien oben und unten, je nachdem, wie behandelt Ihr browser
object-fit
. Fügen Sie den folgenden JavaScript für eine auf die Flughöhe ändern der Größe der video-container machen diese Linien Weg gehen, indem Sie gezwungen werden, Ihre video-container passend das video, zumindest vertikal.Teilen wir die aktuelle Breite des Containers durch die ermittelte Breite des video-stream, der dann multipliziert mit der ermittelten Höhe des video-Streams. Dass die Ergebnisse in dem, was die Höhe des Containers sein muss, um zu erzwingen, wie sauber eine Passform wie möglich.
Ist es wichtig, dass die video-Höhe und-Breite als Attribute in die HTML-zusätzlich zu den CSS-definition.
InformationsquelleAutor der Antwort TadLewis