我试图使我的HTML5视频具有透明的左上角和左下角圆角,就像使用边框半径时的行为一样。不幸的是,在Chrome中,由于某种原因,border-radius在HTML video标签上不起作用,但在IE10和Firefox中却起作用。
经过几次尝试实现这一目标后,我偶然发现了以下答案:https : //stackoverflow.com/a/16470150/1115367但是我很快发现,它会在圆角处填充颜色,而不是使其透明。
如何在不降低视频性能的情况下使边界半径适用于Google Chrome浏览器中的HTML5视频?
如有必要,我愿意使用javascript / jQuery。
引用另一篇文章:
有在WebKit的一些突出的错误,用它做演唱会剪辑的内容与边界半径,
这样的一个或这一个专门关于视频元素。
如果您将边框半径应用于环绕视频的元素,并添加-webkit-mask-image
,则可以在Chrome中完成。这是一个遮罩透明png并剪辑视频角落的演示:
演示(透明背景):http : //jsfiddle.net/pe3QS/24/
更新:我将HTML / CSS更改为仅使用一个包装元素,并且它至少在IE9 +,FF和Chrome上有效。
CSS:
div.outer {
float: left;
height: 240px;
}
div.outer video {
width: 320px;
height: 100%;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
border-radius: 32px 0 32px 0;
}
HTML:
<div class="outer">
<video src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句