webentwicklung-frage-antwort-db.com.de

HTML5-Video-Skalierungsmodi?

Ich versuche, einen HTML-Hintergrund im Vollbildmodus zu erstellen, was recht einfach ist. Aber da die Größe von HTML5-Videos so angepasst wird, dass sie in den Container passen, während das Seitenverhältnis beibehalten wird, kann ich den gewünschten Effekt nicht erzielen.

Gibt es verschiedene Skalierungsmodi für HTML5-Videos? Ich würde gerne skalieren, um zu füllen und zu beschneiden.

Dies ist der gewünschte Effekt in Flash: http://www.caviarcontent.com/

Wenn Sie die Größe des Fensters ändern, wird es skaliert und beschnitten. Sie werden nie schwarze Balken bekommen.

Danke für die Hilfe!

12
Drew Baker

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

Wenn Sie ein Element auf der Seite haben, wird das Video mit dieser jQuery-Größenänderungsfunktion so skaliert, dass der gesamte Inhalt des Browserfensters eingeblendet wird. 

Durch Ändern der browserHeight- und browserWidth-Variablen können Sie das Video für ein DIV skalieren lassen (stellen Sie sicher, dass das DIV auf Überlauf gesetzt ist: ausgeblendet).

Diese Funktion ändert sich auch dynamisch mit dem Browserfenster.

    var sxsw = {

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

        // Calculate new height and width...
        var initW = imgWidth;
        var initH = imgHeight;
        var ratio = initH / initW;

        imgWidth = boxWidth;
        imgHeight = boxWidth * ratio;

        // If the video is not the right height, then make it so...     
        if(imgHeight < boxHeight){
            imgHeight = boxHeight;
            imgWidth = imgHeight / ratio;
        }

        //  Return new size for video
        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($) {       

    /*
     * Full bleed background
     */

    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);        
    });

});
13
Drew Baker

Eine andere Möglichkeit, dies mit CSS zu tun, besteht in der Verwendung der object-fit-Eigenschaft. Dies funktioniert für Video- oder Img-Elemente

video {
    object-fit: cover;
}

http://caniuse.com/object-fit

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

Dies ist nur in Chrome 31+ kompatibel, jedoch die einfachste CSS-Lösung und eine Kandidatenempfehlung.

41
Michael

Das geht nur mit CSS:

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

Verwenden Sie offensichtlich die entsprechenden Herstellerpräfixe für die transform -Eigenschaft

Bonus: Um dies mit einem Bild zu tun, können Sie "background-size: cover;" um das Bild in den gewünschten Bereich zu schneiden:

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

Ich verwende 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: '<video style="width: 100%;height: auto;max-height: 100%;" controls playsinline autoplay muted loop><source src="'+url+'" type="video/mp4"></video>'
})
w.show()

`` `

0
Zhouxing Fang