缓解视频播放时调光屏幕的过渡效果

我设置了我的页面，因此当用户按下视频播放时，它会调暗背景。当他们按下暂停时，它将关闭调光效果。我试图添加一个缓动过渡效果，以便在打开和关闭效果时稍微平滑一些。我不知道在哪里添加转换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

缓解视频播放时调光屏幕的过渡效果

回答

相关问题