【问题标题】:Gray background for html5 video in FireFox [duplicate]FireFox中html5视频的灰色背景[重复]
【发布时间】:2013-06-21 07:29:47
【问题描述】:

我正在向网页添加一个 html5 视频

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

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

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

【问题讨论】:

    标签: css html firefox html5-video


    【解决方案1】:

    这是在这里回答的:https://stackoverflow.com/a/30591117/550454intika

    解决方案:

    CSS

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

    id=\'亮度\'>#brightness"); /* Firefox 3.5+ / -webkit-filter:亮度(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/


    解决方案演示

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

    问题演示

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

    【讨论】:

    • 如果问题是如此相同以至于相同的答案适用于两者,请考虑将问题标记为重复。
    • 除了链接之外,您至少应该注明代码的实际作者(按用户名)。见How to reference material written by others
    猜你喜欢
    • 2013-06-03
    • 2011-05-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多