css3让MP4视频背景透明

需求：入场动画有一种云雾拨开的效果，再呈现主页面

效果图

视频背景透明.gif

张鑫旭的博客《如何让MP4 video视频背景色变成透明？》中提到mix-blend-mode混合模式中有一种混合模式名为滤色，单词是screen，其有一个很有意思的特性表现，那就是黑色和其它元素进行混合的时候表现为透明。

云雾原视频

云雾.gif

实现思路：
1.将云雾视频背景透明
2.加一层背景遮罩
3.监听视频播放，当播放到指定时间后隐藏遮罩和视频，呈现主页面

具体代码：
html

<div class="main">
      <p class="title">感谢观看！</p>
    </div>
    <div class="mask js-mask"></div>
      <!--入场动画-->
    <video class="video js-video" width="100%" height="100%" muted autoplay>
        <source src="video/video.mp4" type="video/mp4">
        您的浏览器不支持Video标签。
    </video>
</div>

css

.main{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: url("../img/bg.jpg") center no-repeat;
    background-size: 100% 100%;
}
.title{
    margin-top: 400px;
    text-align: center;
    font-size: 60px;
    font-weight: bold;
    color: rgba(85, 184, 226, 0.91);
}
.mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../img/bg2.jpg") center no-repeat;
    background-size: 100% 100%;
    z-index: 9;
}
.mask._hide{
    display: none;
}
.video{
    position: absolute;
    mix-blend-mode: screen;
    object-fit: fill;
    z-index: 99;
}
.video._hide{
    display: none;
}

js

var  bShow = true,//判断播放第一次大于指定时间
     jqMask = $('.js-mask'),
     jqVideo = $('.js-video');

//初始化播放视频
var fInitVideo = function(){
    jqVideo.on('timeupdate', fHideMask);//隐藏遮罩层
    jqVideo.on('ended', fCloseVideo);//视频播放结束隐藏
};

//隐藏遮罩层
var fHideMask = function(){
    var nTime = jqVideo[0].currentTime;//用秒数来显示当前播放进度
    if(nTime >= 0.5 && bShow){//当视频播放到固定位置隐藏遮罩层
        bShow = false;
        jqMask.addClass('_hide');
    }
};

//视频播放结束隐藏
var fCloseVideo = function(){
    jqVideo.addClass('_hide');
};

/** ==================== **/
fInitVideo();//初始化播放视频

好记性不如烂笔头，总结和记录工作学习中的点点滴滴，如有不对之处还请指教。

参考
[1] 如何让MP4 video视频背景色变成透明？