对某个视频的顶部一个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/）;但是，它并不适用于背景中的视频，但只有当我将静止图像作为背景时才适用。

有关如何通过在后台运行视频来实现此效果的任何想法？

Answer 1

给DIV一个RGBA背景

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

惹我已经设置为65％，以达到你想要的效果的百分比。

Answer 2

通常我不会默认为它，但希望是疗效确切（模糊）的情况下 - 我想说的阻力最小的路径将是在div的背景图像。

如果使用一个css过滤器（它不是很兼容）不能给你想要的东西，背景图像可能比尝试以插件的形式包含额外的依赖关系（blurjs等）

Answer 3

如果你想完全控制，你想在覆盖使用<canvas>。

然后，建立一个​​循环，快照的视频，并呈现在画布上。这是您可以将各种逻辑应用于画布的地方，如模糊，反射，去饱和等。

您本质上会做与this HTML5 Rocks tutorial描述的相同的事情，但您会多次每一秒。这就是requestAnimationFrame循环变得有价值的地方。

但是，因为它只是一个模糊的背景下，这可能是正确的，以减少循环的频率，从而提高性能。

Answer 4

这是一个js小提琴，有点怪异的解决方案。它播放相同的视频两次，一个在另一个之上。加载视频时小提琴有点古怪，所以有一些病人。出于某种原因，它有助于让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中的解决方案并非完全同步（坦率地说，这有点随意），但我还没有能够测试爆米花是否能够在那里发挥作用。

Answer 5

您可以使用镜像背景视频内容的<canvas>，对其应用一些CSS过滤器，最后将此画布包装在<div>中，以仅显示需要在框中显示的部分视频... 我在这里做一个例子： http://codepen.io/Tont/pen/HnLdj/

Answer 6

试试这个

*{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>

Answer 7

请尝试以下 -

<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（日期选择器）在图像

Answer 8

检查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); 
}