网页中通过css实现视频显示自适应

基本原理是使用媒体查询实现,下面直接上代码
  1. 视频播放的html标签。

<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>

2. 在CSS中设置视频播放器的样式,使视频播放器适应不同屏幕的大小。

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

上述CSS属性可以设置视频播放器的宽度和高度均为100%,并且使用object-fit: cover;属性使视频播放器自适应不同屏幕的大小。

3. 添加媒体查询,根据设备屏幕尺寸自动调整视频播放器的大小和位置。

@media screen and (max-width: 800px) {
video {
width: 60%;
height: 40%;
}

上述媒体查询可以根据设备的最大屏幕尺寸,将视频播放器的宽度调整为60%,高度调整为40%。
其他屏幕尺寸样式可自行设置,通过使用CSS视频显示自适应技术,可以在不同的屏幕上实现相同的视频播放效果,并适应不同设备屏幕尺寸。