在Chrome中为<video>标签添加边框半径

Question

在Chrome中为<video>标签添加边框半径

5

我看到这个问题已经出现了几次，但没有清晰的解决方案。

我正在加载一个简单的视频

<video src="" controls></video>

在我的页面上，视频可以跨浏览器正常播放（由于这不是相关问题的所有格式设置，因此不显示所有格式设置）。然后我对视频标签应用了 border-radius。除了Chrome之外，这有效。我甚至可以打开控制台并查看应用于视频标记的 border-radius，但它没有呈现出圆角边框。有人熟悉这个问题吗？我读到这是Chrome的一个bug，但我不确定它是否已经解决或者是否可能存在一些解决方法？

- Aaron

可能是HTML5视频圆角的重复问题。 - tckmn

是的，正如我在问题中所述：我已经看到这个问题出现了几次，没有任何明确的解决方法。而你提供的链接已经有一年多了，解决方案是一个浏览器的 bug。我特别问一下是否有人知道它是否已经得到解决。 - Aaron

然后在其中一个重复问题上添加赏金，说明您想知道它是否已经解决。 - tckmn

你的视频需要响应式吗？如果不需要，并且你也不需要将视频与可点击的按钮等进行叠加，那么你可以将它与一个透明的图像进行覆盖。但是这里有很多条件限制。另一种选择是给视频加上一些内边距和美观的背景颜色，让其呈现圆角状，从而创建出一个漂亮的外框。 - ralph.m

谢谢，是的，我需要对视频进行控制和交互，所以覆盖层不起作用。我看过填充技巧，一开始觉得有点糟糕，但现在看起来更有吸引力了。太遗憾了，Chrome似乎已经知道这个问题很长时间了。 - Aaron

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- A.M.K · Accepted Answer

我不确定，但我认为“使用SVG”是指以下内容：

这个想法是创建一个HTML叠加元素，它的宽度和高度与视频相同，在其中设置多个SVG背景（border-radius在任何背景颜色中），并使其“鼠标不可见”（pointer-events: none）：

演示：http://jsfiddle.net/pe3QS/3/

CSS（减去SVG）：

#video-container {
    position: relative;
}

#overlay {
    position: absolute;
    width: 320px;
    height: 240px;
    left: 0;
    top: 0;
    pointer-events: none;
    background-image: url('data:image/svg+xml...');
    background-position: top right, top left, bottom left, bottom right;
    background-repeat: no-repeat;
}

HTML:

<div id="video-container">
    <video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
    <div id="overlay"></div>
</div>

您也可以使用伪元素（不在video元素上，它不会显示）：

演示：http://jsfiddle.net/pe3QS/2/ CSS:

#video-container:after {
    position: absolute;
    width: 320px;
    height: 240px;
    content: " ";
.....

HTML:

<div id="video-container">
    <video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>

< p >SVG很容易修改，只需更改每个SVG的fill属性即可。

这也可以通过JS完成。