视频背景
有一些官方网站为了弘扬他们的企业文化,往往会拍一些记录短片。如果能把这些记录短片放在公司的官方网站上,既能体现公司的企业文化又能给网站提供更加绚丽的视觉享受
预览效果接下来请看下我制作的一个demo:
预览效果:视频全屏背景案例 下载源码:http://chengqige.com/bg/video/index.rar
大家可以下载源码进行阅读,关键的部分我都做了详细的注释
核心代码展示css部分
* { margin: 0; padding: 0; } .video-box { position: relative; height: 100vh; background-color: #C1CFF7; /*进行视频裁剪*/ overflow: hidden; } .video-box .video-background { position: absolute; left: 50%; top: 50%; /*保证视频内容始终居中*/ transform: translate(-50%, -50%); width: 100%; height: 100%; /*保证视频充满屏幕*/ object-fit: cover; min-height: 800px; }html部分:
<div class="video-box"> <video class="video-background" preload="auto" loop playsinline autoplay src="https://lf3-cdn-tos.bytescm.com/obj/eden-cn/lmeh7pfuho/campus/campus_intro_20200522.mp4" tabindex="-1" muted="muted"></video> </div>上述css+html代码可以完美的运行出效果,关于object-fill属性大家可以百度一下可以学到不同的属性值
核心模块解读关键点1:如何使视频铺满屏幕
其实使得视频铺满屏幕,原则上来讲是不可能实现的任务。因为video组件我们不能像图片一样对视频进行拉伸,所以直接设置宽高是行不通的。
小实验:(验证直接设置宽高对video无效)
<!--设置video组件宽300px、高度300px,但是video播放视频的区域并非为正方形--> <video width="300" height="300" loop playsinline autoplay src="https://lf3-cdn-tos.bytescm.com/obj/eden-cn/lmeh7pfuho/campus/campus_intro_20200522.mp4" tabindex="-1" muted="muted"></video>实验效果:正方形
原因:视频流不可扭曲拉伸,若同时对视频设置宽高以宽度为基准
其实这个问题在css2.0之前只能依靠js去解决,但是现在css3有新的属性值:object-fill:cover 这个属性值能够让我们的视频充满屏幕,并且不变形
实验代码:
* { margin: 0; padding: 0; } video { width: 100%; height: 100vh; object-fit:cover; } div{ background:red; height:100vh } <video src="https://lf3-cdn-tos.bytescm.com/obj/eden-cn/lmeh7pfuho/campus/campus_intro_20200522.mp4" muted="muted" autoplay="autoplay"></video> <div></div>显示效果:
我们发现有一条白色的细缝,这个细缝导致拥有垂直滚动条
解决方案: 对video标签设置display:block 细缝完美解决!
如果有溢出的问题,我们可以使用overflow-hidden就可以解决问题
关键点2:如何使视频适配手机
接下来展示不同设备我的适配效果:
大屏幕:
平板电脑: 手机:
那么如何实现适配呢?
玄机在这里
.video-box .video-background { position: absolute; left: 50%; top: 50%; /*保证视频内容始终居中*/ transform: translate(-50%, -50%); width:100%; height: 100vh; object-fill:cover; min-height: 800px; }我们保证视频是居中的,也就是说屏幕再小我们只显示居中的部分,两边裁剪掉
以上就是所有技术关键之处
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #视频做背景css