HTML5 Video Skalierungsmodi?

Question

Ich versuche, einen Vollbild-Hintergrund in HTML zu erstellen, was ziemlich einfach ist. Aber da HTML5-Video auf die Größe des Containers skaliert wird, während das Seitenverhältnis beibehalten wird, kann ich den gewünschten Effekt nicht erzielen.

Gibt es verschiedene Skalierungsmodi für HTML5-Videos? Ich möchte auf Fill-and-Crop skalieren.

Das ist der gewünschte Effekt, der in Flash durchgeführt wird: http://www.caviarcontent.com/

Wenn Sie das Fenster neu dimensionieren, sehen Sie, wie es skaliert und beschnitten wird. Sie werden niemals schwarze Balken sehen.

Vielen Dank für die Hilfe!

Answer 1

Ein weiterer Weg, dies mit CSS zu tun, ist die Verwendung der object-fit Eigenschaft. Dies funktioniert bei Video- oder Bild-Elementen

video {
    object-fit: cover;
}

http://caniuse.com/object-fit

http://dev.opera.com/articles/css3-object-fit-object-position/

Dies ist nur kompatibel mit Chrome 31+ und ist die einfachste CSS-Lösung und ein Kandidatenempfehlung.

Answer 2

Sie können dies nur mit CSS tun:

video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);        
}

Verwenden Sie natürlich die entsprechenden Vendor-Präfixe für die Transform-Eigenschaft

Bonus: Um dies mit einem Bild zu tun, können Sie "background-size: cover;" verwenden, um das Bild auf den gewünschten Raum zuzuschneiden:

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(background-image.jpg) center;
  background-size: cover;
}

Answer 3

Ich habe es herausgefunden, indem ich dieselbe Funktion verwendet habe, über die ich hier geschrieben habe.

Wenn Sie ein video-Element auf der Seite haben, skaliert diese jQuery-Resize-Funktion das Video so, dass es den gesamten Browserfenster ausfüllt.

Durch Ändern der browserHeight- und browserWidth-Variablen könnten Sie das Video so skalieren, dass es in ein DIV passt (stellen Sie sicher, dass Sie dieses DIV auf overflow:hidden setzen).

Diese Funktion passt sich auch dynamisch an die Browserfenstergröße an.

var sxsw = {

    full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) {

        // Neue Höhe und Breite berechnen...
        var initW = imgWidth;
        var initH = imgHeight;
        var ratio = initH / initW;

        imgWidth = boxWidth;
        imgHeight = boxWidth * ratio;

        // Wenn das Video nicht die richtige Höhe hat, dann passen Sie es an...
        if(imgHeight < boxHeight){
            imgHeight = boxHeight;
            imgWidth = imgHeight / ratio;
        }

        // Neues Größe für das Video zurückgeben
        return {
            width: imgWidth,
            height: imgHeight
        };

    },

    init: function() {
        var browserHeight = Math.round(jQuery(window).height());
        var browserWidth = Math.round(jQuery(window).width());
        var videoHeight = jQuery('video').height();
        var videoWidth = jQuery('video').width();

        var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

        jQuery('video')
            .width(new_size.width)
            .height(new_size.height);  
    }

};
jQuery(document).ready(function($) {       

    /*
     * Vollbild-Hintergrund
     */

    sxsw.init();

    $(window).resize(function() {

        var browserHeight = Math.round($(window).height());
        var browserWidth = Math.round($(window).width());
        var videoHeight = $('.wd-thumb-list li a').eq(0).attr('data-wd-height');
        var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width');

        var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight);

        $('video')
            .width(new_size.width)
            .height(new_size.height);        
    });

});

Answer 4

Eine schnelle und schmutzige Lösung nur mit CSS:

video
{
    width: 100%;
    height: auto;
    max-height: 100%;
}

wie auf: http://web.archive.org/web/20171013204829/www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos

Answer 5

Ich benutze ExtJS 5, um Videos anzuzeigen, der folgende Code funktioniert!

```

var w = Ext.widget('window',{
    renderTo: Ext.getBody(),
    x : 10,
    y : 10,
    width: 480,
    height: 670,
    maximizable: true,
    html: ''
})
w.show()

```