html5添加背景(Html5实现首页动态视频背景的示例代码)
类别:Web前端 浏览量:1609
时间:2021-10-01 01:36:46 html5添加背景
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标签外部添加,然后我们的效果图就是这样的(由于博客对图片大小有限制,所以截屏时间没有很长):
是不是用H5实现这种动态视频背景效果很简单?赶紧一起来试试吧!!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- html5复制修改(HTML5实现无刷新修改URL的方法)
- html5video怎么优化(html5 移动端视频video的android兼容去除播放控件、全屏)
- html5基本标签详解(HTML5 通过Vedio标签实现视频循环播放的示例代码)
- html5 data属性
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- html5的优点是什么
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- html5视频播放代码详解(HTML5基于flash实现播放RTMP协议视频的示例代码)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- html5循环及条件指令(html5实现滑块功能之type="range"属性)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- html为什么视频不能自动播放(html5中嵌入视频自动播放的问题解决)
- html5背景怎么变色(HTML5 背景的显示区域实现)
- HTML5离线缓存
- 制作共用的头部和底部html5界面(html5移动端价格输入键盘的实现)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
- 2019年外媒秋季新番动画角色CP排行榜,桐人和爱丽丝落榜(2019年外媒秋季新番动画角色CP排行榜)
- 新一小兰领衔 盘点动漫中的那些 远距离恋爱情侣(盘点动漫中的那些)
- 大事件 合肥四中火了(大事件合肥四中火了)
- 翼龙贷组织出借人调研 感受鄱阳 借 来的致富路(翼龙贷组织出借人调研)
热门推荐
- 写出好代码的几个建议
- sqlserver2000显示无服务器(SQL SERVER 2000 9003错误的解决方法只适用于SQL2000)
- 如何估算项目的开发时间
- css透明输入框(纯CSS实现气泡对话框尖角处理方案)
- 视图平滑动画(菜单栏 “三” 变形为“X”css3过渡动画)
- sqlserver日志被删除(sql server日志处理不当造成的隐患详解)
- mysql服务器端安装步骤(windows下jsp+mysql网站环境配置方法)
- pythonselenium自动化教程(python使用selenium实现批量文件下载)
- php100种算法(php实现的生成排列算法示例)
- php cookie(php更新cookie内容的详细方法)