비디오가 재생 될 때 화면 밝기 조절 효과가 번진다

사용자가 비디오 재생을 누를 때 배경이 어두워 지도록 내 페이지를 설정했습니다. 일시 정지를 누르면 디밍 효과가 꺼집니다. 나는 전환 전환 효과를 추가하려고하는데 전환 효과가 켜지거나 꺼질 때 조금 부드럽게 처리됩니다. 지금까지 내가하지 않은 것이 제대로 작동하지 않기 때문에 전환 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

사용 fadeIn() 대신 쇼() 및 페이드 아웃() 대신 숨기기(). 또한 CSS에서 display : none을 제거하고 기본 불투명도를 0으로 설정해야합니다.

이 link도 도움이 될 수 있습니다.

출처

2016-07-25 20:49:05

감사합니다.이 부분이 어디까지 왔는지는 알지만 기사에서는 '가시성'속성을 적용해야하는 위치를 표시하지 않습니다. 추천 한 변경 사항을 적용했지만 아무 일도 일어나지 않습니다. – user3786102

비디오가 재생 될 때 화면 밝기 조절 효과가 번진다

답변

관련 문제