将边框半径添加到< video>标记 [英] Add a Border Radius to <video> tag in Chrome

问题描述

我看到这个问题弹出几次，没有任何明确的解决方法。

/ p>

I'm loading a simple video

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

在我的网页上。视频的工作和播放很好的跨浏览器（不显示此问题的所有格式设置，因为它不相关）。

Onto my page. The video works and plays well cross-browser (not showing all the format setup for this question since it isn't relevant).

然后，我对视频标记应用了border-radius。这个工作，除了在Chrome。
我甚至可以拉起控制台，看到应用于视频标签的border-radius，但它不会呈现边框半径。

I've then applied a border-radius to the video tag. This works, except in Chrome. I can even pull up the console and see the border-radius applied to the video tag, but it isn't rendering the border radius.

是任何人熟悉这个问题？我已经读过这是Chrome中的一个错误，但我不知道是否已经解决了，还是可能有解决方法？

Is anyone familiar with this issue? I've read it's a bug in Chrome, but I'm not sure if it's been resolved or if there might be a workaround?

推荐答案

我不确定，但我认为这是使用SVG的含义：

I'm not sure but I think that this is what's meant by "using SVG":

这个想法是创建一个HTML覆盖元素宽度和高度作为视频，设置多个SVG背景（ border-radius '的任何背景颜色是），并使其鼠标不可见（ pointer-events：none ）：

The idea is to create a HTML overlay element that is the same width and height as the video, set multiple SVG backgrounds on it (border-radius's in whatever the background color is) and make it "mouse-invisible" (pointer-events: none):

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

CSS（减去SVG的）：

CSS (minus the SVG's):

#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>

您还可以使用psuedo-element（不是 video 元素，不会显示）：

You could also use a psuedo-element (not on the video element, it would'nt display):

演示： 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>

SVG很容易修改，只需更改 fill 属性。

The SVG's are pretty simple to modify, just change the fill attribute on each of them.

这可能也可以通过JS来完成。

This could probably also be done via JS.

这篇关于将边框半径添加到< video>标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！