Question

我设置了页面，因此当用户按下视频时，它会使背景变暗。当他们按下暂停时，它将关闭调光效果。我试图添加一个轻松的过渡效果，这样当打开和关闭效果时它会更加平滑。我不知道在哪里添加过渡css，因为到目前为止我似乎没有做到这一点。

HTML

Case: 0
1
Case: 1
2

JAVASCRIPT

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

CSS

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

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

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

Answer 1

使用fadeIn（）代替show（）和fadeOut（）而不是hide（）。此外，您必须从CSS中删除display：none并将默认不透明度设置为0。

此link也可能有所帮助。

播放视频时，缓和屏幕的过渡效果

1 个答案: