緩解視頻播放時調光屏幕的過渡效果

我設置了我的頁面，因此當用戶按下視頻播放時，它會調暗背景。當他們按下暫停時，它將關閉調光效果。我試圖添加一個緩動過渡效果，以便在打開和關閉效果時稍微平滑一些。我不知道在哪裏添加轉換CSS，因爲我目前爲止似乎沒有工作。緩解視頻播放時調光屏幕的過渡效果

HTML

<div id="overlay"></div> 

<div class="col-md-6"> 
    <div id="introRight"> 
     <video poster="img/WhoWeAre.jpg" preload="auto" controls> 
     <source src="video/WhoWeAre_HI.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
     <source src="video/WhoWeAre_HI.ogv" type='video/ogg; codecs="theora, vorbis"'> 
     <source src="video/WhoWeAre_HI.webm" type='video/webm; codecs="vp8, vorbis"'> 
     </video> 
    </div> <!-- end introRight --> 
</div>

JAVASCRIPT

<script> 
$("video").on('play',function(){ 
    $("#overlay").show(); 
}); 

$("video").on('pause',function(){ 
    $("#overlay").hide(); 
}); 

$("video").on('ended',function(){ 
    $("#overlay").hide(); 
}); 
</script>

CSS

#overlay { 
    display:none; 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    opacity:0.8; 
    background-color: #282828; 
    z-index: 20; 

    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
} 


video { 
    width: 100% !important; 
    height: auto !important; 
    margin: 0 auto; 
    margin-top: 50px; 
    z-index: 999; 
    position: relative; 

    -webkit-box-shadow: 3px 3px 11px 0 rgba(50, 50, 50, 0.75); 
    -moz-box-shadow: 3px 3px 11px 0 rgba(50, 50, 50, 0.75); 
    box-shadow:   3px 3px 11px 0 rgba(50, 50, 50, 0.75); 
}

來源

2016-07-25 user3786102

使用淡入（），而不是秀（）和淡出（），而不是隱藏（）。此外，您必須從CSS中刪除display：none，並將默認不透明度設置爲0.

link也可能有所幫助。

來源

2016-07-25 20:49:05

謝謝我看到這是領先的，但文章沒有告訴我應該在哪裏應用'可見性'屬性。我已經做出了您推薦的更改，但現在沒有任何反應。 – user3786102

緩解視頻播放時調光屏幕的過渡效果

回答

相關問題