在运行在背景的视频上方使一个div半透明。

Question

我正在使用以下代码在我的主页背景中播放视频：

 <video autoplay poster="videos/test.png" id="bgvid" muted>
        <source src="videos/test.webm" type="video/webm">
        <source src="videos/test.ogv" type="video/ogv">
        <source src="videos/test.mp4" type="video/mp4">
 </video>

我有一个div覆盖在它上面，我想让它半透明并模糊背后的视频（与下图中的效果相同）。

我在搜索如何实现这个效果时找到了一些建议使用CSS滤镜，比如模糊(blur(5px))。我试过了，但是没有获得类似以上图片的效果。

然后我发现一个非常酷的库叫做blur.js(http://blurjs.com/); 但是，它不能在视频背景中工作，只能在我有静态图像作为背景时才能使用。

有什么想法在视频背景下实现这种效果吗？

- firewall

Answer 1

您可以使用一个<canvas>元素来镜像背景视频的内容，在其上应用一些CSS过滤器，最后将此画布包裹在一个<div>中，以仅显示您需要在框中显示的视频部分...

这里有一个示例：http://codepen.io/Tont/pen/HnLdj/

---

编辑：现在有一种更简单的方法 -> https://dev59.com/EIPba4cB1Zd3GeqPwsb8#58952257

- thetont

Answer 2

试试这个

*{box-sizing:border-box;padding:0;margin:0}
main{position:relative;width:100vw;height:100vh}
.container{color:white;padding:20px;text-align:center}
#videoContainer{position:relative;width:100%;height:320px;overflow:hidden}
#videoCaption{height: 100%;
z-index: 1;
width: 100%;
background: rgba(194, 194, 194, 0.9);
position: absolute;
top: 0;
left: 0;}
#bgvid{position:relative;top:0;left:0;max-height:100%;width:100%;z-index:0}

Markup: 

   

<main class="container">
    <section id="videoContainer">
        <video  poster="videos/test.png" id="bgvid" autoplay muted> 
            <source src="videos/test.webm" type="video/webm">
            <source src="videos/test.ogv" type="video/ogv">
            <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
        </video>
        <article id="videoCaption">
            <div class="container">
                <p>awesome freelancers at the right price</p>
            </div>
        </article>
    </section>
</main>

- Gildas.Tambo

Answer 3

通常情况下我不会首选这个方法，但是如果想要达到模糊的效果，我认为最简单的方法是将背景图像设置为div。如果使用css滤镜（兼容性不太好）无法实现你想要的效果，那么背景图像比尝试包含额外的插件（如blurjs等）更加节省资源。

- richie

---

谢谢，但我的问题是如何在视频播放的同时使div模糊/半透明...如果我要在背景中放置一张图片，我肯定只会使用css的filter:blur效果。 - firewall

我是指覆盖层div / 文本容器。您应该能够直接在您作为背景的视频上使用重复的.png文件。 - richie

我同意这里的观点。进入像paint.net或Photoshop这样的软件，创建一个带有模糊、深色填充和透明度的图层可能是最好的选择。您只需将其重复作为背景，图像中的alpha通道将通过具有此单个重复像素的div显示视频。 - Morklympious

Answer 4

这里有一个带有一些hacky解决方案的js-fiddle。它会同时播放两个相同的视频，一个在另一个上面。这个fiddle在加载视频时有点古怪，所以需要一些耐心。由于某种原因，最好打开Chrome devtools并禁用缓存：

http://jsfiddle.net/wgxqkeb3/5/

<video class="video2" id="video2" preload="auto" loop="loop">
    <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
    <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">   
</video>
<div class="container">
    <p>Blurry video box</p>
    <div class="video-container">
        <div class="bg"></div>
        <video class="video1" id="video1" preload="auto" loop="loop">
            <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
            <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"> 
        </video>
    </div>
</div>

难点在于同步两个视频的播放。可能以上的解决方案结合popcorn.js之类的东西可以实现你想要的。在 jsfiddle 中的解决方案没有完美同步（坦率地说有点随机），但我还没有测试 popocorn 能否在那里发挥作用。

- Johan Persson

Answer 5

尝试以下内容 -

<div id="vid_container">
    <div id="vid_over"></div>
    <video autoplay poster="videos/test.png" id="bgvid" muted>
        <source src="videos/test.webm" type="video/webm">
        <source src="videos/test.ogv" type="video/ogv">
        <source src="videos/test.mp4" type="video/mp4">
    </video>
</div>

---

#vid_container {
width:XXpx;
height:XXpx;
float:left;
}

#bgvid{
    float:left;
}

#vid_over {
    position:absolute;
    float:left;
    width:XXpx; //width of your video div
    min-height:XXpx; //height of your video div
    background-color:#000;
    opacity:0.4 //adjust opacity here, 1 for opaque
    z-index:300000;
    }

这有点棘手，我以前尝试过类似的 div（日期选择器）放在图片上，但没有通过视频来实现。

- masmrdrr

Answer 6

检查CSS演示 http://jsfiddle.net/4qeykcjk/3/ HTML代码

<div class="col-xs-12">
    <div id="mover-form" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div id="video_bg_addon">
            <video id="myVideo" poster="http://easyhtml5video.com/images/happyfit2.jpg" autoplay="true" src="http://easyhtml5video.com/images/happyfit2.mp4" ><source src="http://easyhtml5video.com/images/happyfit2.mp4"><source src="http://easyhtml5video.com/images/happyfit2.webm"><source src="http://easyhtml5video.com/images/happyfit2.ogg"></video>
        </div>

        <div class="container">
            <div class="col-xs-12 col-sm-10  col-md-10  col-lg-10" id="form-area">
                <form class="col-xs-12 col-sm-12 col-md-12 col-lg-12" role="form" action="">
                    <div class="col-xs-12 col-sm-6  col-md-6  col-lg-6">
                        <div class="form-group">
                            <input type="text" class="form-control" id="source-mover" name="source-mover" placeholder="Where are you moving from?">
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6  col-lg-6 form-desc-mover">
                        <div class="form-group">
                            <input type="text" class="form-control" id="destination-mover" name="destination-mover" placeholder="Where are you moving to?">
                        </div>
                    </div>
                    <div class="col-xs-12 search-btn-block">
                        <div class="col-xs-12 col-sm-6  text-center">
                            <input type="submit" class="btn btn-primary" name="submit" id="request-quote" value="Search">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

CSS 代码

#mover-form {
z-index: -10;
background-image: url('http://easyhtml5video.com/images/happyfit2.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: #fff;
height: 500px;
padding-top: 0px;
}


#video_bg_addon{
    position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-image: url(http://easyhtml5video.com/images/happyfit2.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
video{
    margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 0%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
visibility: visible;
width: 1288px;
height: auto;
}

#mover-form #form-area {
float: none;
margin: 25% auto 0px auto;
}
#form-area form {
padding: 30px 15px;
background-color: rgba(0,0,0,0.5);
}

- Abhijith A C

Answer 7

如果您想要完全控制，您需要在覆盖层中使用<canvas>。

然后，设置一个requestAnimationFrame循环，对视频进行快照并在画布上呈现。这是您可以对画布应用各种逻辑的地方，例如模糊、反射、去饱和等。

实质上，您将执行this HTML5 Rocks tutorial所描述的相同操作，但您将每秒执行多次。这就是requestAnimationFrame循环变得有价值的地方。

但是，由于它只是一个模糊的背景，因此降低循环频率以提高性能可能是可行的。

- jeffjenx

Answer 8

由于我的另一个答案现在有点过时（虽然仍然有效），我在这里发布一种新的、更简单的方法。

背景上的模糊效果可以很容易地通过backdrop-filter属性实现。 例如：

backdrop-filter: blur(15px);

这里是一个演示此属性的代码片段：

html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
  font-family:arial, helvetica;
  font-size:14px;
  line-height:1.4em;
  color:#fff;
}

video {
 position: fixed;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 object-fit: fill;
}

div.wrap{
  position: fixed;
  display: flex;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
  margin: auto;
  height: 60vh;
  width: 60vw;
  align-items: center;
  background: rgba(0,0,0,.5);
 -webkit-backdrop-filter: blur(15px);
 backdrop-filter: blur(15px);
}

p { padding: 2em; }

<video id="video1" autoplay="true" loop poster="http://placehold.it/500x500">
    <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4">
  
    <source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
</video>


<div class="wrap">
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

浏览器支持相当不错：根据 caniuse.com 的数据，大多数现代浏览器都支持它。https://caniuse.com/#search=backdrop-fil

- thetont

Answer 9

给 div 设置一个 rgba 背景

.nameOfDiv {
 background-color:rgba(0,0,0,0.65);
}

调整我设定的百分之六十五，以达到你想要的效果。

- user2684452

---

我之前尝试过，现在又尝试了一遍。它只改变了div的不透明度（使其更透明），但特殊的模糊效果仍未应用；但还是谢谢你的答案。 - firewall