如果视频文件过大加载时间过长可以添加视频的封面
关于浏览器适配 video 可以给视频额外加一个背景图片或背景色

html:

<div class=”videocontainer” >

         <video class=”fullscreenvideo” src=”https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/9177d79224b5679e279379728d9dfa54_preview.mp4”  autoplay ></video>

</div>

css:

.videocontainer{   

    position: fixed;   

    width: 100%;   

    height: 100%;   

    overflow: hidden;   

    z-index: -100; 

}

.videocontainer:before{   

    content: “”;   

    position: absolute;   

    width: 100%;   

    height: 100%;   

    display: block;   

    z-index: -1;   

    top: 0;   

    left: 0;   

}

.fullscreenvideo {   

    position: absolute;   

    top: 50%;   

    left: 50%;   

    min-width: 100%;   

    min-height: 100%;   

    width: auto;   

    height: auto;   

    z-index: -100;   

    -webkit-transform: translateX(-50%) translateY(-50%);   

    transform: translateX(-50%) translateY(-50%);   

    -webkit-transition: 1s opacity;   

    transition: 1s opacity;

}

转载请注明：我的经验分享 » css将视频设置为pc端全屏背景