video无法自动播放以及不能根据父元素自适应大小

最新推荐文章于 2025-06-19 09:25:30 发布

sunshine08_07

最新推荐文章于 2025-06-19 09:25:30 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： h5新特性

本文链接：https://blog.youkuaiyun.com/sunshine08_07/article/details/82848940

2 篇文章

订阅专栏

本文介绍了解决HTML video标签中自动播放及视频元素自适应父元素大小的问题。通过添加muted属性实现自动播放，使用object-fit属性使视频内容在保持长宽比的同时填满或覆盖指定区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、video添加了autoplay="autoplay"后还是不能自动播放，查阅资料后，在标签内添加 muted，亲测有效

<video src="video/pic_1536759760%20(1).mp4" muted autoplay="autoplay" style="width: 100%;height: 100%;object-fit: fill"></video>

2、video标签添加的视频写里width="100%;height="100%"后不能根据父元素自适应大小。在样式里添加 style="object-fit: fill"

style="width: 100%;height: 100%;object-fit: fill"

object-fit主要适合于替换元素，比如：<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默认值为fill。object-fill取值的说明如下：

fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。
contain：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为一个包含元素的宽度和高度。也就是说，如果你在替换元素上设置一个明确的高度和宽度，此值将导致内容大小，完全在固定的比例显示，但仍在元素尺寸内显示。
cover：替换元素内容大小保持长宽比例填充元素内容容器，其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说，替换元素内容大小保持长宽比，但改变宽度和高度，以便完全覆盖内容元素。
none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。
scale-down：当内容大小设置了non或contain，将导致具体对象变得更小。