提问人：simi 提问时间：11/11/2023 更新时间：11/11/2023 访问量：86
HTML 视频标签：圆角像素化
HTML video tag: rounded corners are pixelated
问：
我正在尝试显示一个带有圆角的视频，但在底角，它被像素化了（如随附的屏幕截图所示）。
这是我尝试过的 HTML 代码：
<div class="container1">
<video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1" onclick="controlsChangeVideo1()"></video>
</div>
这就是 CSS：
.container1 {
margin-left: 50px;
margin-right: 425px;
margin-top: 50px;
border-radius: 20px;
overflow: hidden;
}
答：
3赞
Meet Mendapara
11/11/2023
#1
您可以尝试此代码以获得更精确的结果。
[HTML全文] `
<div class="container1">
<div class="video-container">
<video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1" onclick="controlsChangeVideo1"></video>
</div>
</div>
`
CSS的 `
.container1 {
margin-left: 50px;
margin-right: 425px;
margin-top: 50px;
}
.video-container {
border-radius: 20px;
overflow: hidden;
}
.video1 {
display: block;
width: 100%;
height: auto;
border-radius: 20px; /* Adjust this value as needed */
}
`
评论
1赞
SyndRain
11/11/2023
#2
这是因为容器的大小实际上与视频的大小不匹配。要使容器与视频播放器的大小相匹配，您可以使用 .min-content
此外，圆角实际上没有“像素化”。如果使容器的边框可见，您会注意到视频下方有一个额外的空间。这样做的原因是默认为 display，导致基于 .删除此空间的建议方法是 制作视频 .videoinlineline-heightdisplay:block
.container1 {
margin-left: 50px;
margin-right: 425px;
margin-top: 50px;
border-radius: 20px;
overflow: hidden;
width: min-content;
height: min-content;
}
video {
display: block;
}
评论