對某個視頻的頂部一個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); 
}