制作播放视频关灯效果

网上有个视频插件，但是我觉得不太好用，就自己写了一个，不过各位可以参考参考，地址

制作步骤 ：

1、页面加个遮罩层，默认是隐藏的

<div class="myzzc hide">    
</div>

.myzzc {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: .9;
    z-index: 998;
}

2、设置视频区域position，当然你也可以设置成:fixed，看你自己的需求了

.video-zc {
    position: absolute;
    z-index: 999;
}

3、然后你有一个按钮，就是专门切换关灯和开灯的，方法如：

$(".jp-light").click(function(e) {
        var this$ = $(this);
        if ($('#jp_container_1').hasClass('jp-state-light')) {
            $('#jp_container_1').removeClass('jp-state-light');
            this$.attr('title', '关灯');
            $('.res-content-video').removeClass('video-zc')
            $('.myzzc').addClass('hide');
        } else {
            $('#jp_container_1').addClass('jp-state-light');
            this$.attr('title', '开灯');    
            $('.res-content-video').addClass('video-zc');
            $('.myzzc').removeClass('hide');
        }
    })

4、显示效果：

 

总结： z-index必须配合position才能生效