Html视频标签：圆角像素化

发布于11月11日

我试图显示一个圆角的视频，但在底部的角落，它是像素化的(如所附的截图).

这是我try 过的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;
}

推荐答案

您可以try 此代码以获得更准确的结果.

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 */
}

说