Les vidéos peuvent-elles être étirées en HTML5 ?

WBOY
Libérer: 2021-12-21 13:45:09
original
2650 Les gens l'ont consulté

Les vidéos en HTML5 peuvent être étirées. Il vous suffit d'utiliser les attributs style et "object-fit" pour définir la largeur et la hauteur de l'élément vidéo. La syntaxe est "

L'environnement d'exploitation de ce tutoriel : système Windows 10, version HTML5, ordinateur Dell G3.

La vidéo en html5 peut-elle être étirée ?

La vidéo en html5 peut être étirée ?

Si vous souhaitez réaliser un étirement vidéo, vous devez utiliser l'attribut style et l'attribut object-fit. L'attribut

style est utilisé pour définir le style de l'élément et l'attribut object-fit est utilisé pour spécifier comment le contenu de l'élément doit s'adapter à la hauteur et à la largeur du conteneur spécifié.

Lorsque la valeur de l'attribut object-fit est fill, la proportion d'origine n'est pas garantie et le contenu est étiré pour remplir tout le conteneur de contenu.

Ensuite, vous pouvez utiliser les attributs width et height pour définir la largeur et la hauteur de l'élément.

L'exemple est le suivant :

<html>
<body>
<video src="/i/movie.ogg" controls="controls" style="object-fit:fill;width:400px;height:120px;">
your browser does not support the video tag
</video>
</body>
</html>
Copier après la connexion

Résultat de sortie :

Les vidéos peuvent-elles être étirées en HTML5 ?

Tutoriel recommandé : "Tutoriel vidéo html"

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal