web-dev-qa-db-fra.com

Extrait vidéo HTML 5

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 à l'intérieur de l'élément vidéo, proportionnellement.

merci

videohtml5
50
TD540

J'ai testé en utilisant object-fit: remplissez CSS

Fonctionne bien.

video {
  object-fit: fill;
}

Depuis MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ):

La propriété CSS d'ajustement d'objet spécifie comment le contenu d'un élément remplacé doit être ajusté à 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'objet concret de l'objet est la largeur et la hauteur utilisées par l'élément.

78
Leo Yu

De la spécification pour <video> :

Le contenu vidéo doit être restitué à l'intérieur de la zone de lecture de l'élément de sorte que le contenu vidéo soit affiché centré dans la zone de lecture à la plus grande taille possible qui s'adapte complètement à l'intérieur, avec le rapport d'aspect du contenu vidéo préservé. Ainsi, si le rapport hauteur/largeur de la zone de lecture ne correspond pas au rapport hauteur/largeur de la vidéo, la vidéo sera affichée en boîte aux lettres ou en colonnes. 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 aucune disposition pour étirer la vidéo au lieu de la mettre en boîte aux lettres. Cela est probablement dû au fait que l'étirement donne une très mauvaise expérience utilisateur, et la plupart du temps n'est pas ce qui est prévu. Les images sont étirées pour s'adapter 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 dans la spécification de la hauteur et de la largeur.

Vous pouvez obtenir un effet étiré en utilisant transformations CSS , 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 de fournisseur tel que -webkit- ou -moz-. Voici un exemple:

<!DOCTYPE html>
<style>
video { 
  -webkit-transform: scaleX(2); 
  -moz-transform: scaleX(2);
}
</style>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>
38
Brian Campbell

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 */
 });
10
prussian blue

Il y a aussi la propriété CSS adaptée à l'objet , qui vous donnera probablement ce dont vous avez besoin.

Soit dit en passant, je pense que cette demande est destinée à Comment puis-je adapter la lecture vidéo HTML 5 au cadre au lieu de maintenir le rapport d'aspect? .

8
Silvia

Cela ne changera pas la proportion de votre vidéo, mais supprimera les vilains espaces "vides" en haut et en bas ou sur les côtés de votre visionneuse de vidéos SI votre navigateur ne prend pas en charge le object-fit:cover style.

Disons que vous avez un visualiseur intégré de 500x281 (un redimensionnement correct de 1280x720). Mais parfois, vous pouvez obtenir une vidéo qui n'est pas correctement proportionnée à exactement 16: 9, disons 1278x720 ou 320x176 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:

<style>
#vidcontent {
  width:500;
  height:281;
  border:2px solid #F00;
  object-fit:cover; /* for those who do support it */
}
</style>

<video id="vidcontent" width="500" height="281" autoplay controls loop>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

rendra une vidéo avec des lignes noires ou blanches en haut et en bas selon la façon dont votre navigateur gère object-fit. Ajoutez le code JavaScript suivant pour un redimensionnement à la hauteur du conteneur vidéo en faisant disparaître ces lignes en forçant votre conteneur vidéo à correspondre à la vidéo, au moins verticalement.

<script type="text/javascript">
  vidContent = document.getElementById('vidcontent');
  vidContent.addEventListener("loadedmetadata", function(e) {
    var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight;
    vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px";
  }, false);
</script>

Nous divisons la largeur actuelle du conteneur par la largeur déterminée du flux vidéo, puis nous multiplions par la hauteur déterminée du flux vidéo. Cela se traduit par ce que la hauteur du conteneur doit être pour forcer un ajustement aussi propre que possible.

Il est important que la hauteur et la largeur de la vidéo soient définies comme attributs dans le HTML en plus de la définition CSS.

3
TadLewis