HTML5中将video设置为背景的方法
主要用到了video标签,css样式,原理是先将video标签利用position:fixed;使video标签脱离文档流,在将他的z-index设置为最低的,比如-9999。再插入的内容自然就覆盖在视频上面了。
1.首先,将video插入到网页中,宽度设置为100%,其余的设置按照H5标准根据需求来设置。比如进入网页自动播放(autoplay)、循环播放(loop) 、静音(muted)等。代码如下:
<video width="100%" autoplay="autoplay" loop="loop" muted="muted">
<source src="video/video.mp4" type="video/mp4"></source>
</video>
2.css设置video样式,代码如下:
video{
position: fixed;
z-index: -9999;
-webkit-filter: grayscale(100%);
}
3.然后就可以在video背景区域添加想要的布局了,
html代码如下:
<div>
我是video背景
</div>
css代码如下:
div{
width:500px;
height: 300px;
font-size: 8em;
color: yellow;
}
4.如果想要调整video的播放速度,可以使用playbackRate属性来实现,代码如下:
<script>
var video= document.querySelector('video');
video.playbackRate = 0.5;
</script>
完整代码如下图:
HTML5中将video设置为背景的方法的更多相关文章
- VC设置视图背景颜色方法
视图的背景一般来说是白色的,在缺省情况下,它和系统定义的颜色COLOR_WINDOW是一致的.设计者一般会希望自己的程序可以让用户轻松地改变窗口背景颜色,或是用漂亮的图片来充填背景.我们可以用Wind ...
- Windows7只能设置纯色背景解决方法
解决设置设置纯色图片,不能设置其他背景图片的方法. 比如这样的. 首先找到这个目录 C:\Users\(这个位置填写你的电脑用户名)\AppData\Roaming\Microsoft\Windows ...
- DevExpress中设置PanelControl背景的方法
首先当然是设置BackColor的颜色,但是设置完之后往往是没有反映的,这就Dev的好处带来的不好,然后我们需要自己定义两个属性 1.设置LookAndFeel下的style为Flat或UtralFl ...
- vs code 设置工作区背景图片方法
1.扩展--安装background 2.文件--首选项--设置--在settings.josn中编辑--右侧用户设置添加 "background.useFront": false ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- MyEclipse设置字体和背景的方法
可以根据自己喜好设置MyEclipse工作空间中的字体和背景颜色. 1.选择菜单Window→Preferences. 2.设置字体的方法.选择General→Appearance→Colors an ...
- (转载)Recyclerview | Intent与Bundle在传值上的区别 | 设置布局背景为白色的三种方法
用Recyclerview实现列表分组.下拉刷新以及上拉加载更多 http://www.jianshu.com/p/be62ce21ea57 Intent与Bundle在传值上的区别http://b ...
随机推荐
- JavaScript运行原理解析
原文:1.http://blog.csdn.net/liaodehong/article/details/50488098 2.Stack的三种含义 (阮一峰) 3. http://lib.csdn. ...
- ural1553 Caves and Tunnels
Caves and Tunnels Time limit: 3.0 secondMemory limit: 64 MB After landing on Mars surface, scientist ...
- centos7中yum安装ntfs-3g
CentOS默认源里没有ntfs3g,想要添加ntfs支持,无非是自己下载编译安装或者加源yum安装. 新安装了一个CentOS7,用的是添加aliyun的epel源来yum安装的方式,简单易行. 1 ...
- CentOS x 64 MooseFS 学习
一.MFS 简介.... MooseFS(Moose File System,mfs)是一种分布式文件系统,它将数据分布在网络中的 不同服务器上,支持FUSE,客户端可以作为一个 普通的Unix 文件 ...
- CodeForces 626C Block Towers
构造AC的.左右两边都先不用6的倍数,然后哪边数字大那一边往回退一下,然后再比较哪边数字大.......直到结束 #include<cstdio> #include<cstring& ...
- JavaScript 事件模型 事件处理机制
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
- POJ 3991 Seinfeld
首先进行一次括号匹配,把正确匹配的全部删去. 删去之后剩下的状态肯定是 L个连续右括号+R个连续左括号. 如果L是偶数,答案是L/2+R/2: 否则答案是 (L-1)/2+(R-1)/2+2: #in ...
- 扩展对EasyUI的校验规则
var myReg = RegExp(/[(\*)(\|)(\\)(\:)(\")(\/)(\<)(\>)(\?)]+/); $.extend($.fn.validatebox. ...
- 在GitHub上创建上传下载开源项目代码
1.注册GitHub帐号,创建GitHub项目代码仓库 1.1.注册GitHub帐号 在使GitHub之前,需要先登录其官网注册一个免费使用的账号.登录 https://github.com/join ...
- Apache Bench安装与使用
一.Apache Bench简介 ApacheBench 是 Apache 服务器自带的一个web压力测试工具,简称ab.ab又是一个命令行工具,对发起负载的本机要求很低,根据ab命令可以创建很多的并 ...