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用video标签流式加载的实现)
- html5背景怎么变色(HTML5 背景的显示区域实现)
- html5基本标签详解(HTML5 通过Vedio标签实现视频循环播放的示例代码)
- html5 页面向上滑动(html5手机键盘弹出收起的处理)
- html5加入图片(HTML5 图片预加载的示例代码)
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- html5新增全局属性(HTML5自定义属性的问题分析)
- php 处理html表单(PHP使用HTML5 FormData对象提交表单操作示例)
- html5的表单怎么写(HTML5新增form控件和表单属性实例代码详解)
- html5做app流程(Html5嵌入钉钉的实现示例)
- 微信小程序canvas缩放(微信小程序之html5 canvas绘图并保存到系统相册)
- html5 canvas绘图(使用html5 canvas绘制圆环动效)
- html5长按动画效果(HTML5实现移动端弹幕动画效果)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- html5功能讲解(Html5定位终极解决方案)
- html5页面传值表(html5的pushstate以及监听浏览器返回事件的实现)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
- 小米音乐可绑定QQ音乐, QQ音乐 真的会消失在小米的设备上吗(小米音乐可绑定QQ音乐)
- 小米Watch S1评测 或许能成为小米冲击高端可穿戴设备的里程碑(小米WatchS1评测或许能成为小米冲击高端可穿戴设备的里程碑)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
热门推荐
- dedecms中如何设置推荐文章(实现dedecms友情链接分栏目调用的方法图)
- php 实例代码解析(PHP反射学习入门示例)
- docker常用命令详解(docker常用命令总结推荐)
- css设置3d效果代码(CSS 制作波浪效果的思路)
- windows服务器安装宝塔面板(云服务器无法安装宝塔面板及软件解决方案)
- docker 部署springboot项目(Spring Boot Docker打包工具小结)
- sql server 2014配置文件路径(SQL Server 2012 FileTable 新特性详解)
- javascript设置鼠标(JavaScript实现鼠标控制自由移动的窗口)
- http服务器使用教程(HTTP与HTTP协作的Web服务器访问流程图解)
- sqlserver安装使用教程(SQL Server 2019下载与安装教程自定义安装)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9