Pouvez-vous faire une vidéo “étirer” à la largeur et la hauteur de l’élément vidéo? Apparemment, par défaut, la vidéo est mise à l’échelle et ajustée dans l’élément vidéo, proportionnellement.
Merci
J’ai testé en utilisant object-fit: remplissez CSS
Fonctionne bien
video { object-fit: fill; }
De MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ):
La propriété CSS fit-fit spécifie comment le contenu d’un élément remplacé doit être adapté à la boîte établie par sa hauteur et sa largeur utilisées.
Valeur: remplir
Le contenu remplacé est dimensionné pour remplir la zone de contenu de l’élément: la taille de l’object concret de l’object est la largeur et la hauteur utilisées de l’élément.
De la spécification pour :
Le contenu vidéo doit être restitué à l’intérieur de la zone de lecture de l’élément, de manière à ce que le contenu vidéo soit centré dans la zone de lecture à la plus grande taille possible. Ainsi, si le rapport d’aspect de la zone de lecture ne correspond pas au rapport d’aspect de la vidéo, la vidéo sera affichée en format letterbox ou en pilier. Les zones de la zone de lecture de l’élément qui ne contiennent pas la vidéo ne représentent rien.
Il n’y a pas de dispositions pour étirer la vidéo au lieu de la mettre dans une boîte aux lettres. Cela est probablement dû au fait que l’étirement donne une très mauvaise expérience utilisateur et que la plupart du temps, ce n’est pas ce qui est prévu. Les images sont étirées pour s’ajuster par défaut, et à cause de cela, vous voyez beaucoup d’images qui sont fortement déformées en ligne, probablement en raison d’une simple erreur de spécification de la hauteur et de la largeur.
Vous pouvez obtenir un effet étiré en utilisant les transformations CSS 3 , bien que celles-ci ne soient pas encore complètement standardisées ou implémentées dans tous les navigateurs et celles dans lesquelles elles sont implémentées, vous devez utiliser un préfixe fournisseur tel que -webkit-
ou -moz-
. Voici un exemple:
Cela a parfaitement fonctionné pour moi
http://coding.vdhdesign.co.nz/?p=29
$VideoElement = $(_VideoElement); //Cache Jquery reference of this var iOriginalVideoHeight = _VideoElement.videoHeight; var iCurrentVideoHeight = $VideoElement.height(); var iVideoContainerHeight = $VideoElement.parent().height(); var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight; var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale; //Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray $VideoElement.css({ "transform-origin": "0% 0%", "transform":"scaleY(" + iScaleY +")", "-ms-transform-origin" : "0% 0% ", /* IE 9 */ "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */ "-moz-transform-origin" : "0% 0%", /* Firefox */ "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */ "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */ "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */ "-o-transform-origin":"0% 0%", /* Opera */ "-o-transform":"scaleY(" + iScaleY +")" /* Opera */ });
Il y a aussi la propriété CSS object-fit , qui vous donnera probablement ce dont vous avez besoin.
Par ailleurs, je pense que cette demande est réalisée à Comment puis-je rendre la lecture vidéo HTML 5 adaptée à l’image au lieu de conserver les proportions? .
Cela ne changera pas la proportion de votre vidéo, mais éliminera les espaces «non remplis» et laides en haut et en bas ou sur les côtés de votre visualiseur vidéo SI votre navigateur ne supporte pas le style de object-fit:cover
.
Disons que vous avez un visualiseur de page qui est 500×281 (un redimensionnement correct à partir de 1280×720). Mais parfois, vous pouvez obtenir une vidéo qui n’est pas correctement proportionnée à 16: 9, disons 1278×720 ou 320×176, comme dans le cas de la vidéo «Buck Bunny» sur le site du W3C. Ce serait bien si la vidéo remplissait complètement le conteneur et que vous ne deviez pas créer un nouveau conteneur pour chaque vidéo mal proportionnée.
Étant donné un fragment de code comme:
rendra une vidéo avec des lignes noires ou blanches en haut et en bas, en fonction de la manière dont votre navigateur gère l’ object-fit
. Ajoutez le code JavaScript suivant pour un redimensionnement en hauteur à la volée du conteneur vidéo, en faisant disparaître ces lignes en forçant votre conteneur vidéo à correspondre à la vidéo, au moins verticalement.
Nous divisons la largeur actuelle du conteneur par la largeur déterminée du stream vidéo puis multiplions par la hauteur déterminée du stream vidéo. Il en résulte que la hauteur du conteneur doit être aussi propre que possible.
Il est important que la hauteur et la largeur de la vidéo soient définies comme atsortingbuts dans le code HTML en plus de la définition CSS.