css - FireFox 中 html5 视频的灰色背景

标签 css html firefox html5-video

<分区>

我正在向网页添加 html5 视频

 <video  width="610" height="571" controls="controls" poster="image.jpg">    

这个视频的背景在 FireFox 中是灰色的,但是我在视频标签中添加了 poster 属性以插入图像,但灰色背景仍然包裹着海报图像并在其周围显示灰色框架背景

我尝试了 background-color:transparent !important;视频标签的规则,但没有任何改变 如何在 FireFox 中更改 html5 视频标签的背景颜色?

最佳答案

此处已回答:https://stackoverflow.com/a/30591117/550454通过 intika

Solution :

CSS

.brightness{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter

id=\'brightness\'>#brightness"); /* Firefox 3.5+ / -webkit-filter:brightness(108.5%); / Chrome 19+ & Safari 6+ */ }

HTML

<div class="brightness">
<video src="http://www.botlibre.com/media/a786628.mp4">
</video>
</div>

https://jsfiddle.net/27L5nvg4/1/


Solution Demonstration

> 
>     .brightness{
>         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter
> id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0
> 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness");
> /* Firefox 3.5+ */
>         -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
>     }
> 
> 
> 
>     <div class="brightness">
>     <video src="http://www.botlibre.com/media/a786628.mp4">
>     </video>
>     </div>
> 
> 


Problem Demonstration

> 
> 
> 
>     <div class="brightness">
>     <video src="http://www.botlibre.com/media/a786628.mp4">
>     </video>
>     </div>
> 
> 


关于css - FireFox 中 html5 视频的灰色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17229884/

相关文章:

javascript - 这个 jQuery "on-mouse-over-scroll-the-image"插件是什么?

javascript - 使用 JavaScript 将值从 HTML 传递到 XSLT

javascript - 检查 Firefox 版本 59 中是否启用了 Flash

css - Sass Selector Sequence 不会继承 `:hover` 到一个 id。

html - 简单 css 模板上的填充和边距问题

javascript - 如何自定义 jquery select2 插件 - 选择框的 jQuery 替代品

html - 从 Matlab 获取网页 html 和 css 代码

javascript - 用标签替换单选按钮?

Firefox "Bad request"由损坏的谷歌跟踪 cookie 引起

javascript - 跨域 XHR 到 https 地址 (SSL) 在 Firefox 中失败(在 Chrome 中工作)