更改 html5 视频元素的背景颜色答案

【问题标题】：Change background-color of html5 video element更改 html5 视频元素的背景颜色
【发布时间】：2013-11-27 07:13:28
【问题描述】：

我有以下网站： beta.leifsigersen.com

首页上有一部影片，有时需要一段时间才能加载（有时不到一秒钟，有时几秒钟）。在加载电影之前，有黑色背景/边框。我怎样才能改变它的颜色？

我尝试使用视频元素的 CSS，但没有任何运气。

【问题讨论】：

使用 HTML5 视频标签时，请遵循以下解决方案：stackoverflow.com/questions/18726720/…

标签： html css angular ionic-framework html5-video

【解决方案1】：

试试这个 CSS：

.pk_video {
     background-color: red !important; /* or whatever you want */
}

【讨论】：

该网站似乎没有视频元素了。那么，您建议将背景颜色放在哪个元素上？ .pk_video 是视频标签吗？

【解决方案2】：

只需将背景颜色添加到 html 代码本身。例如：

<video width="100%" height="100%" style="background-color: #fff;" src=""></video>

【讨论】：

【解决方案3】：

所以我有这个烦人的白条，我用它摆脱了它。我将它应用于包含 div。

background-color: transparent;

交替使用

 background-color: rgba(0, 0, 0, 0);

希望有帮助

【讨论】：

我认为你的意思是 rgba(0,0,0,0); ?

【解决方案4】：

我使用过这样的覆盖内容：Ionic/Angular

.html

<video autoplay muted loop playsinline preload="auto" onloadedmetadata="this.muted = true">
  <source [src]="video" type="video/mp4" />
</video>

<div class="overlay-content"></div>

.scss

 video {
     object-fit: cover;
     width: 100vw;
     height: 60vh;
     top: 0;
     left: 0;
     opacity: 0.5;
     -webkit-filter: blur(5px);
     -moz-filter: blur(5px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px);
 }

 .overlay-content {
     position: absolute;
     top: 0;
     left: 0;
     background: rgba(6, 56, 82, 0.5);
     width: 100vw;
     height: 60vh;
 }

【讨论】：