如果视频文件过大加载时间过长可以添加视频的封面
关于浏览器适配 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端全屏背景