如何将视频设置为网页背景
程序员文章站
2022-03-26 15:28:05
有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。 第一步:准备工作 工欲善其事必先利其器,我们首先需要准备一个视频 第二步:html中引入视频 这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用 ......
有时候为一个网页添加一个动画效果的背景,会让网页增加一定的韵味,让网页看起来与众不同。
第一步:准备工作
工欲善其事必先利其器,我们首先需要准备一个视频
第二步:html中引入视频
这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈
<div class="videocontainer"> <video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop=""> <source src="__PUBLIC__/video/loginbg.mp4" type="video/mp4"> </video> </div>
第三步: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
<script> var video= document.getElementById('v1'); video.playbackRate = 0.5; </script>
好嘞,快去设置你的酷炫背景吧
推荐阅读
-
edius视频怎么输出为wma格式? edius视频输出格式的设置方法
-
格式工厂视频画面怎么设置为4:3比例? 格式工厂修改视频比例的教程
-
电脑中如何将傲游浏览器设置为默认浏览器?设置傲游云浏览器为默认浏览器的方法介绍
-
如何将ASP.NET MVC所有参数均自动设置为默认
-
电脑中如何将傲游浏览器设置为默认浏览器?设置傲游云浏览器为默认浏览器的方法介绍
-
edius视频怎么输出为wma格式? edius视频输出格式的设置方法
-
格式工厂视频画面怎么设置为4:3比例? 格式工厂修改视频比例的教程
-
如何将ASP.NET MVC所有参数均自动设置为默认
-
如何将winrar设置为默认压缩
-
毕业论文排版时如何将文档页面大小设置为16开默认为A4