如何利用h5将视频设置为背景
我们常常有着将视频作为网页背景的需要,但是在设置时也经常差强人意,今天设置了一下,可以基本达到要求了,可能有些小细节做的不是太好,希望指出来,一起进步
第一步:准备工作
工欲善其事必先利其器,我们首先需要准备一个视频,我准备了一个这样的视频,如图:
是不是很美,当然了,,没我美哈
第二步:引入视频
这里我们需要用到了video/标签,然后在source里面写视频的路径,autoplay用来使其自动播放,muted用来使其静音,loop为循环播放,依照个人意愿愿意加就加,不加拉倒哈
<video id="v1" autoplay muted loop style="width: 100%">
<source src="mp4/loading.mp4">
</video>
第三步:调节视频,使其适应屏幕
以上的步骤还不能满足我们的需求,这个时候我们会发现有滚动条,而且视频会遮挡我们要显示的内容,可这远远不是我们想要的结果啊,不怕,有我呢
video{
position: fixed;
right:0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -9999;
/*灰色调*/
/*-webkit-filter:grayscale(100%)*/ }
这样就OK了,-webkit-filter:grayscale(100%)为调节会色调的,同样适用于img
第四步:视频播放速度
可以利用video的playbackRate属性来控制video的播放速度,如果要让背景视频以慢速播放的话可以加上下面的javascript
<script>
var video= document.getElementById('v1');
video.playbackRate = 0.5;
</script>
好嘞,快去设置你的酷炫背景吧
如何利用h5将视频设置为背景的更多相关文章
- 利用API设置桌面背景
实现效果: 知识运用: API函数SystemParametersInfo 实现代码: [DllImport("user32.dll", EntryPoint = "Sy ...
- 利用FFmpeg生成视频缩略图 2.1.6
利用FFmpeg生成视频缩略图 1.下载FFmpeg文件包,解压包里的\bin\下的文件解压到 D:\ffmpeg\ 目录下. 下载地址 http://ffmpeg.zeranoe.com/build ...
- 导航栏视图设置 tabbleView 是设置总背景图
//导航栏视图设置 tabbleView 是设置总背景图 //默认的时白色半透明(有点灰的感觉), UIBarStyleBlack,UIBarStyleBlackTranslucent ,UIBarS ...
- Android设置布局背景为白色的三种方法
一.在xml文件里可以直接设置: android:background="#ffffff" 其他颜色可以看这里;http://blog.csdn.net/yanzi1225627/ ...
- 基于C#利用ffmpeg提取视频帧
利用ffmepg提取视频帧实际上是利用C#调用ffmepg命令行进行处理对应的视频,然后输出出视频帧 GetPicFromVideo("); static public string Get ...
- C# 利用 OpenCV 进行视频捕获 (笔记)
原文:C# 利用 OpenCV 进行视频捕获 (笔记) 简介 这个项目是关于如何从网络摄像头或者视频文件(*.AVI)中捕获视频的,这个项目是用C#和OPENCV编写的. 这将有助于那些喜欢C#和Op ...
- 利用H5缓存机制实现点击按钮第一次与之后再点击分别跳转不同页面
昨天碰到这样一个需求,要求点击按钮第一次跳转到a页面,之后再点击它就跳转到b页面.这个问题我首先就想到了利用H5的缓存sessionstorage来实现,SessionStorage用于本地存储一个会 ...
- Windows 7个性化配置,关闭Win7动画效果,设置窗口背景为“ 豆绿色”
减少眼睛疲劳配色(豆绿色): RGB:, , ,颜色名称:#C7EDCC 1.任务栏设置 2.关闭Win7动画效果 控制面板 -> 轻松访问 -> 优化视频显示 3.去掉窗口阴影 右键单击 ...
- 在IE6下使用filter设置png背景
今天帮别人解决问题学会了一个在IE6下使用filter设置png背景,具体css写法如下: .login_form_wrap { width: 778px; height: 360px; backgr ...
随机推荐
- VBA学习笔记(6)--抽取第一列中叫“虹虹”的个人信息
说明(2017.3.25): 1. 知识点为dim arr2(1 to 1000, 1 to 4)先定义一个足够大的二维数组,不然后面需要transpose转置成一维数组. '抽取列表中叫“虹虹”的所 ...
- MyEclipse9.0激活步骤
MyEclipse 9.0的激活机制 1.破解公钥(确保MyEclipse没有开启,否则失败!) 解压破解包中的myeclipse9_keygen_activator.zip,复制publicKe ...
- 基于jQuery在线问卷答题系统代码
分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- .net安装部署“Error 1001 在初始化安装时发生异常” 的解决方法
状况描述:打包安装后,如果删除安装目录中的某个文件,这时从桌面快捷方式启动软件系统会自动运行修复程序,此时因为路径问题会报出“错误 1001 在初始化安装时发生异常xxx”的异常.(前提是你的安装部署 ...
- 如何设置Windows server 2008 R2登陆密码?
我第一次用该系统,登陆系统需要设置新密码,科沃怎么设置新密码都是新密码不符合条件,不允许我创建,该怎么办? 答案: 至少6个字符,要包括大小写.符号.数字这四组字符中的三组.如12abAB是有效密码, ...
- 【C#】Event事件的订阅和发布
学习笔记:学习了委托和事件的用法.事件是一种特殊的委托,记录下事件从订阅到发布的流程. 学习资料源于视频:http://www.maiziedu.com/course/510-6891/ 新建一个De ...
- C语言 · 求指数
算法训练 5-2求指数 时间限制:1.0s 内存限制:256.0MB 问题描述 已知n和m,打印n^1,n^2,...,n^m.要求用静态变量实现.n^m表示n的m次方.已知n和m, ...
- kafka_zookeeper_配置文件配置
server.properties配置如下: broker.id=0 num.network.threads=2 num.io.threads=8 socket.send.buffer.bytes=1 ...
- Hbase 学习(二)各种filter
各种filter 今天的主题是Filter,hbase客户端查询的时候,自定义查询filter. 直接上例子吧,不多说别的了,第一个例子是RowFilter的. Scan scan = new Sca ...
- Windows消息目录
Windows消息目录1. WM_NULL=$0000:2. WM_CREATE=$0001: 应用程序创建一个窗口3. WM_DESTROY=$0002: 一个窗口被销毁4. WM_MOVE=$00 ...