如何将视频设置为网页背景
2018-06-24 02:19:27来源:未知 阅读 ()
第一步:准备工作
工欲善其事必先利其器,我们首先需要准备一个视频
第二步: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>
好嘞,快去设置你的酷炫背景吧
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 如果是自学WEB前端的话,该如何才能找到一份7K实习生工作呢 2020-06-04
- 前端如何学习? 2020-06-04
- 如何成为一名优秀的web前端工程师 2020-06-02
- 零基础小白转行如何入门学习web前端 2020-06-01
- 如何在博客园添加自己的头像 2020-05-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash