Comment puis-je adapter la lecture vidéo HTML 5 à l'image au lieu de conserver le format d'image?

Question

J'ai expérimenté avec la lecture vidéo HTML5. Par exemple, j'ai cet objet vidéo intégré sur ma page:

<video width="480" height="380" class="ecard" tabindex="0"> 
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="videos/1156 In your honor we'll be dancing.ogv"></source> 
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="videos/1156 In your honor we'll be dancing.mp4"></source> 
</video> 

Mon problème est l'élément vidéo préserve son rapport d'aspect alors que je préférerais forcer la lecture en fonction de cadre. Est-ce que quelqu'un sait comment faire ceci?

Answer 1

Il n'existe actuellement aucun moyen de le faire, mais avec la propriété d'ajustement d'image CCS3, cela devient possible. Cependant, aucun navigateur ne le supporte encore. Ensuite, vous pouvez l'utiliser pour faire toutes les vidéos étirer la largeur/hauteur:

video { 
    image-fit: fill; 
} 

spec Voir à http://dev.w3.org/csswg/css3-page/#propdef-image-fit

Answer 2

Oui, je ne pense Theres est au moins un moyen de le faire, mais il est assez laid: Mettre à l'échelle l'élément vidéo en utilisant des transformations CSS (ou peut-être SVG). Le problème est que je pense que vous auriez du Javascript pour calculer le ratio d'échelle approprié en fonction de la taille du conteneur. La bonne nouvelle serait que WebKit et Gecko aient supporté CSS Transforms depuis un certain temps et Opera 10.50 le supporte également. Et ils soutiennent tous SVG.

http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms https://developer.mozilla.org/En/CSS/Using_CSS_transforms

Answer 3

Un peu tard maintenant, mais la propriété CSS3-forme objet satisfera à ce besoin. http://dev.w3.org/csswg/css3-images/#object-fit Il est déjà implémenté dans Opera, voir http://my.opera.com/desktopteam/blog/2010/08/03/presto-update.

Answer 4

J'ai essayé d'ajuster l'image, mais j'ai échoué.

puis en cochant ci-dessus réponses, j'utilise-objet en forme CSS:

video { 
    object-fit: fill; 
} 

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

La propriété CSS-forme objet spécifie comment le contenu d'un élément remplacé devrait être ajusté à la boîte établie par sa taille et largeur utilisées.

Valeur de remplissage

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 de l'élément utilisé et la hauteur.

Answer 5

Vous pouvez aussi le faire: Placer l'élément vidéo dans le centre avec left et top de 50%, puis la retraduire avec transform: translate(-50%, -50%);, enfin donner un min-height et min-width de 100%

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

Answer 6

Si vous voulez que la vidéo remplisse tout le cadre ET conserve ses proportions, utilisez ce qui suit:

video 
{ 
    object-fit: cover; 
    height: 100%; 
    width: 100%; 
}