Comment définir la largeur et la hauteur de la vidéo dans la balise vidéo en HTML5

Le contenu de cet article explique comment définir la largeur et la hauteur de la balise vidéo en HTML5. Il a une certaine valeur de référence. J'espère que cela vous sera utile.

Généralement :

<video width="320" height="240" controls="controls">

Mais parfois, on constate que la hauteur de la vidéo n'a pas changé après l'avoir définie. Nous pouvons définir la largeur et la hauteur de son élément parent. créer la vidéo Remplissez l'élément parent. Ajoutez simplement style="width= 100%; height=100%; object-fit: fill" à la balise vidéo.

syntaxe d'ajustement d'objet

ajustement d'objet: remplissage | couverture | réduction

ajustement d'objet pris Description de la valeur

object-fit convient principalement au remplacement d'éléments, tels que : <video>, <object>, <img>, <input type="image">, <svg>, <svg:image> et <svg:video>, etc. Sa valeur par défaut est fill. La description de la valeur de remplissage d'objet est la suivante :

• fill : Cette valeur est la valeur par défaut de boject-fit, et la taille du contenu de remplacement est définie pour remplir la zone de contenu. de l'élément, c'est-à-dire que le contenu de l'élément s'agrandit pour remplir complètement les dimensions extérieures du conteneur, même si cela rompt son rapport hauteur/largeur intrinsèque.

• contain : remplacez la taille du contenu de l'élément pour conserver le rapport hauteur/largeur afin de remplir le conteneur de contenu de l'élément, et sa taille d'objet spécifique est analysée comme la largeur et la hauteur de un élément contenant. Autrement dit, si vous définissez une hauteur et une largeur explicites sur l'élément de remplacement, cette valeur entraînera la taille du contenu exactement au rapport fixe, mais toujours dans les dimensions de l'élément.

• cover : remplacez la taille du contenu de l'élément pour conserver le rapport hauteur/largeur afin de remplir le conteneur de contenu de l'élément, et sa taille d'objet spécifique est analysée pour couvrir la largeur et la hauteur de l’élément entier. Autrement dit, la taille du contenu de l'élément de remplacement conserve le rapport hauteur/largeur, mais modifie la largeur et la hauteur afin qu'elle recouvre complètement l'élément de contenu.

• aucun : le contenu de l'élément remplacé ne se redimensionne pas pour s'adapter au conteneur de l'élément interne, le contenu ignore complètement toute hauteur et tout poids définis sur l'élément et reste dans l'élément Affiché dans les dimensions.

• réduction : lorsque la taille du contenu est définie sur non ou contain, l'objet spécifique deviendra plus petit.

Articles connexes recommandés :

Analyse du code inter-domaines de postMessage en HTML5

vidéo en html5 ( Analyse des éléments vidéo)

Analyse de l'audio (audio) en html5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!