话不多说, 先看效果图:
image
炫酷吗? 你想实现这种动态视频作为背景的首页吗? 来, 一起来学习, 本文将带你一起实现 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 标签外部添加, 然后我们的效果图就是这样的 (由于博客对图片大小有限制, 所以截屏时间没有很长):
image
是不是用 H5 实现这种动态视频背景效果很简单? 赶紧一起来试试吧!!!
来源: http://www.jianshu.com/p/07f96ffbd514