web-dev-qa-db-fra.com

Modes de vidéo HTML5?

J'essaie de créer un fond HTML plein écran, ce qui est assez simple. Mais parce que la vidéo HTML5 est redimensionnée pour s'adapter au conteneur tout en conservant les proportions, je ne peux pas obtenir l'effet souhaité.

Existe-t-il différents modes d'échelle pour la vidéo HTML5? Je voudrais évoluer pour remplir et recadrer.

C'est l'effet souhaité réalisé en Flash: http://www.caviarcontent.com/

Si vous redimensionnez la fenêtre, vous la verrez redimensionner et redimensionner. Vous n'obtiendrez jamais de barres noires.

Merci pour l'aide!

videohtml5fullscreenscale
12
Drew Baker

Je l'ai compris en utilisant la même fonction j'ai écrit à propos de ici .

Si vous avez un élément sur la page, cette fonction de redimensionnement jQuery redimensionnera la vidéo pour qu’elle soit à fond écran de la fenêtre du navigateur. 

En modifiant les variables browserHeight et browserWidth, vous pouvez redimensionner la vidéo pour l’adapter à un DIV (assurez-vous de définir le dépassement de ce DIV: masqué).

Cette fonction sera également redimensionnée dynamiquement avec la fenêtre du navigateur.

    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

Une autre façon de procéder avec CSS consiste à utiliser la propriété object-fit. Cela fonctionne sur des éléments vidéo ou img

video {
    object-fit: cover;
}

http://caniuse.com/object-fit

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

Ceci n’est compatible que dans Chrome 31+, mais il s’agit de la solution CSS la plus simple et constitue une recommandation candidate.

41
Michael

Vous pouvez le faire uniquement avec CSS:

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

Évidemment, utilisez les préfixes de fournisseur appropriés pour la propriété de transformation

Bonus: pour ce faire avec une image, vous pouvez utiliser "background-size: cover;" pour recadrer l'image dans l'espace souhaité:

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

J'utilise ExtJS 5 pour montrer une vidéo, le code suivant fonctionne!

`` `

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