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;
}
学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

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标签外部添加，然后我们的效果图就是这样的（由于博客对图片大小有限制，所以截屏时间没有很长）

HTML5实现首页动态视频背景相关推荐

web前端入门到实战：HTML5实现首页动态视频背景
你想实现动态视频作为背景的首页吗?来,一起来学习,本文将带你一起实现H5动态视频背景: 首先网上找一段清晰的视频下载下来,最好是MP4格式的:下载好了之后我们新建一个html文件来写代码: html代 ...
HTML5实现动态视频背景
HTML5实现动态视频背景 html代码 <video id="v1" autoplay loop muted ><source src="https: ...
Android进阶——巧借自定义VideoView实现Activity的动态视频背景
引言话说这个Activity 动态背景我第一次是在一个菠菜App上看到的,当时感觉逼格很高,最近正好用到项目中,而且好像好久没有写关于UI这些"有趣"的文章啦,这篇文章就简单小结 ...
HTML5光晕线条网页背景动画js特效
下载地址 HTML5光晕线条网页背景动画特效,基于Canvas实现适合作为动态网页背景. dd:
html5视频作为页面背景,使用视频作为网页背景的技术探讨
使用视频作为网页背景是件很酷的事情,但也是件困难的事情.CSS里的background-image属性只能使用图片.SVG.颜色或渐变色.但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在 ...
html5显示字幕信息,HTML5 Placeholder实现input背景文字提示效果
本文作者html5tricks,转载请注明出处这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但in ...
HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...
html5 烟雾,jQuery烟雾背景发生器（HTML5 Canvas插件waterpipe.js
插件描述:waterpipe.js是一个创建烟雾弥漫的背景,有多种效果可选择,自定义参数效果还是挺酷的哦! 使用方法 1.包括jQuery和waterpipe.js 2.创建画布元素内包装 Your ...
html5背景文字,HTML5 Placeholder实现input背景文字提示效果
这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需 ...

HTML5实现首页动态视频背景

HTML5实现首页动态视频背景相关推荐

最新文章

热门文章