南京网站制作公司

当前位置: 网站首页 - 新闻动态 - 安优观点 -

如何将视频设置为网页背景

发布时间:2024-09-01

来源:

来源 | https://www.cnblogs.com/front-girl/archive/2018/03/23/8628571.html

有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。
第一步:准备工作
工欲善其事必先利其器,我们首先需要准备一个视频
第二步:html中引入视频
这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈。
第三步:css设置,调节视频,使其适应屏幕  
以上的步骤还不能满足我们的需求,这个时候我们会发现有滚动条,而且视频会遮挡我们要显示的内容,可这远远不是我们想要的结果啊,不怕,有我呢。
.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;}
.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; background: rgba(25,29,34,.65);}
第四步:js控制视频播放速度 
可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的JavaScript 
好嘞,快去设置你的酷炫背景吧。

本文完~

策略思维与细节的完美结合,有效帮您减少试错成本

策略思维与细节的完美结合,有效帮您减少试错成本

立即与安优联系,开启网站设计全新体验

立即与安优联系,开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

在线咨询

在线咨询

拨打电话

返回顶部

品质设计 用心服务

  • 12年+定制经验

  • 600+客户选择

  • 高效售后保障

7*24小时服务热线