Html5实现首页动态视频背景的示例代码


Posted in HTML / CSS onSeptember 25, 2019

话不多说,先看效果图:

Html5实现首页动态视频背景的示例代码

炫酷吗?你想实现这种动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景;

首先网上找一段清晰的视频下载下来,最好是MP4格式的;

下载好了之后我们新建一个html文件来写代码:

html代码:

<video id="v1" autoplay loop muted>
              <source src="./video2.mp4" type="video/mp4"  />
        </video>

一个video标签包裹着,source代表来源文件,autoplay属性是自动播放,loop代表循环播放,muted代表无声播放;

如果不加入autoplay属性是无法自动播放的,页面将会黑屏展示;

css代码:

*{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/
            /*filter: blur(15px); //背景模糊设置 */
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%); //背景灰度设置*/  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        }

css代码主要是进行定位和放大达到全屏播放的效果,主要是对video进行宽高之类的设置,还有别忘了要给z-index给个值,让放置在底部,只要小于0都可以,没有影响;

就这样我们的动态视频背景就完成了,如果想设置播放速度,我们可以添加js代码(video标签加上id=“v1”属性):

var video= document.getElementById('v1');
            video.playbackRate = 1.5;

那么如果我们想要添加内容到页面上怎么办呢?

<video id="v1" autoplay loop muted>
              <source src="./video2.mp4" type="video/mp4"  />
        </video>    
        <h1 style="color:white">123465</h1>

是的,在video标签外部添加,然后我们的效果图就是这样的(由于博客对图片大小有限制,所以截屏时间没有很长):

Html5实现首页动态视频背景的示例代码 

是不是用H5实现这种动态视频背景效果很简单?赶紧一起来试试吧!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3新增颜色表示方式分享
Apr 15 HTML / CSS
纯CSS3发光分享按钮的实现教程
Sep 06 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
html5/css3响应式页面开发总结
Oct 16 HTML / CSS
Html5+JS实现手机摇一摇功能
Apr 24 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 HTML / CSS
CSS+HTML 实现顶部导航栏功能
Aug 30 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 #HTML / CSS
使用Html5中的cavas画一面国旗
Sep 25 #HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 #HTML / CSS
html svg生成环形进度条的实现方法
Sep 23 #HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 #HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 #HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 #HTML / CSS
You might like
php实现文件管理与基础功能操作
2017/03/21 PHP
js 单引号 传递方法
2009/06/22 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[01:16]DOTA2小知识课堂 Ep.03 芒果树无伤肉山
2019/12/05 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Django 使用logging打印日志的实例
2018/04/28 Python
Python下简易的单例模式详解
2019/04/08 Python
python中的数据结构比较
2019/05/13 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
美国宠物商店:Wag.com
2016/10/25 全球购物
村官工作鉴定评语
2014/01/27 职场文书
商超业务员岗位职责
2014/03/12 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
支行行长岗位职责
2015/02/15 职场文书
爱心募捐通知范文
2015/04/27 职场文书
刑事附带民事代理词
2015/05/25 职场文书
企业宣传语大全
2015/07/13 职场文书
公开致歉信
2019/06/24 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书