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 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
- html5添加视频为背景自动播放
客户想做个打开官网自动播放一段视频,楼主使用了video标签,即下面的代码:: 于是我在video标签上添加了属性 autoplay=“autoplay” loop=“loop” 然而通过地址栏进去的 ...
- HT For Web 拓扑图背景设置
HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择: divBackground:通过css设置graphView对应的div背景 Painter:通过graphV ...
- iOS html5使用缓存并及时更新方案总结
最近一段时间研究了一下H5在iOS移动端表现时使用缓存并可及时更新方案,总结如下: 一.使用Webview自带缓存机制 当我们使用webview加载html资源时的,本质上就是一个向服务器索取资源的h ...
- html视频背景
视频作为网页背景的限制因素 在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚: 并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很 ...
- 10大炫酷的HTML5文字动画特效欣赏
文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...
- 提供免费可商用的优秀背景视频素材——COVERR
现在经常看到很多网站都是贴近更现代化的设计,首页都会放置跟网站内容相关的视频短片作为背景,不用按下播放按钮,就有动态显示效果,跟以往静态图片相较下更动态.更有活力,对网站的视觉体验有一定的提升作用.但 ...
- Java 给Word不同页面设置不同背景
Word文档中,可直接通过[设计]-[页面颜色]页面颜色,通过Java代码可参考如下设置方法: 1. 设置单一颜色背景 doc.getBackground().setType(BackgroundTy ...
- asp.net Lodop实现批量打印
1.列表(前台) <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="w_stu ...
随机推荐
- TCP与UDP的主要特点
UDP主要特点: (1)UDP是无连接的,即发送数据之前不需要建立连接(当然,发送数据结束时也没有连接可以释放),因此减少了开销和发送数据之前的时延. (2)UDP使用尽最大努力交付,即不保证可靠交付 ...
- 简单架构:反射实现抽象工厂+IDAL接口完全独立DAL
一.普通架构中存在的问题 StudentDB数据库,包含一张StudentInfoTB表,结构如下: s_id int primary key identity(1,1), s_name Nvarch ...
- Ansible实践总结
Ansible playbook 根据条件动态设置变量 首先新建 inventory,主机列表如下: node-01 ansible_host=192.168.64.30 node-02 ansibl ...
- pip安装ansible的过程
我的python环境已经搭好了pip,可以用pip直接安装. 1.首先要安装基础环境: 1)yum install gcc glibc-devel zlib-devel rpm-build opens ...
- Leetcode之二分法专题-875. 爱吃香蕉的珂珂(Koko Eating Bananas)
Leetcode之二分法专题-875. 爱吃香蕉的珂珂(Koko Eating Bananas) 珂珂喜欢吃香蕉.这里有 N 堆香蕉,第 i 堆中有 piles[i] 根香蕉.警卫已经离开了,将在 H ...
- asio kcp源码分析
asio kcp代码走读 (1)kcp_client_wrap类 a 提供方法接口如下: send_msg kcp_client_.send_msg(msg); stop //等待工作线程退出 set ...
- SCRUM的五个价值观
转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-8 承诺 – 愿意对目标做出承诺 专注– 把你的心思 ...
- cesium页面小控件的隐藏
cesium页面小控件的隐藏 1 创建一个Viewer var viewer = new Cesium.Viewer('cesiumContainer');//cesiumContainer为di ...
- XML的相关基础知识分享
XML和Json是两种最常用的在网络中数据传输的数据序列化格式,随着时代的变迁,XML序列化用于网络传输也逐渐被Json取代,前几天,单位系统集成开发对接接口时,发现大部分都用的WebService技 ...
- 3、pytest中文文档--编写断言
目录 编写断言 使用assert编写断言 编写触发期望异常的断言 特殊数据结构比较时的优化 为失败断言添加自定义的说明 关于断言自省的细节 复写缓存文件 去使能断言自省 编写断言 使用assert编写 ...