HTML视频背景(动态背景)
网页动态背景一般是用视频实现的,能增添网页的感染力,我觉得很好看,也不难,不妨学一下。
先加入下面一串代码:
1 <style>
2 video{
3 height: 100%;
4 width: 100%;
5 position: absolute;
6 right: 0px;
7 bottom: 0px;
8 z-index:-1;
9 }
10 </style>
z-index的值只要小于0就行,毕竟视频是要作为背景的。
下面代码是引入素材:
1 <body>
2 <video src="./example.mp4" <!--素材路径-->
3 style="width: 100%;height: 100%;object-fit:cover;position:absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video>
4 </body>
介绍一下<video>可选属性:
| 属性 | 值 | 描述 |
| autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
| muted | muted | 如果出现该属性,视频的音频输出为静音。 |
| poster | URL | 规定视频正在下载时显示的图像,直到用户点击播放按钮。 |
| preload | auto metadata none |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 |
| src | URL | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
下面是完整代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <style>
4 video{
5 height: 100%;
6 width: 100%;
7 position: absolute;
8 right: 0px;
9 bottom: 0px;
10 z-index:-1;
11 }
12 </style>
13 <head>
14 <meta charset="UTF-8">
15 <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 <title>动态背景</title>
17 </head>
18 <body>
19 <video src="./example.mp4" <!--素材背景-->
20 style="width: 100%;height: 100%;object-fit:cover;position:absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video>
21 <p><li style="text-align: left;font-family: KaiTi;font-size: larger;color: rgba(0, 255, 42, 0.984);">夏天的飞鸟,飞到我窗前唱歌,又飞去了。
22 <br>秋天的黄叶,它们没有什么可唱,只叹息一声,飞落在那里。<br>Stray birds of summer come to my window to sing and fly away.
23 </body>
24 </html>
展示实际效果:

具体学习HTML建议到菜鸟教程:HTML 教程 | 菜鸟教程 (runoob.com)
HTML视频背景(动态背景)的更多相关文章
- JavaScript之动态背景登陆表单
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- duilib修复ActiveXUI控件bug,以支持flash透明动态背景
转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...
- 桌面应用开发之WPF动态背景
因为项目需要,在WPF开发的桌面应用中,登陆页面需使用动态背景.由于没有前端开发人员,所以由半吊子的后端开发人员根据效果图写前端xaml.去掉页面上边框,抽离动态背景设置代码: <Windo ...
- 基于CSS3动态背景登录框代码
基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- [Canvas]动态背景
欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8&q ...
- 如何利用h5将视频设置为背景
我们常常有着将视频作为网页背景的需要,但是在设置时也经常差强人意,今天设置了一下,可以基本达到要求了,可能有些小细节做的不是太好,希望指出来,一起进步 第一步:准备工作 工欲善其事必先利其器,我们首先 ...
- css3 动态背景
动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.当中的80% 20%为 ...
- 查找索引/ie滤镜/动态背景/属性attr和prop
1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...
- WEB前端动态背景集
本资源是我在源代码网站上发现的,内附几十种背景动态特效,我单独提取出来精品背景特效在此分享,文件里有20多种精品动态效果,本人觉得可用作于个人博客主页背景,登陆页面背景等,有20多个背景特效,非常漂亮 ...
- HTML5将<video>视频设置为页面动态背景
<!DOCTYPE html><html><head> <title>Operation Aborted Example</title> & ...
随机推荐
- ODOO13之二 Odoo 13开发之开发环境准备
在更深入了解 Odoo 开发之前,我们应配置好开发环境并学习相关的基础管理任务.本文中,我们将学习创建 Odoo 应用所需用到的工具和环境配置.这里采用 Ubuntu 系统来作为开发服务器实例的主机, ...
- GitHub 私有仓库完全免费且不限制协作人数
GitHub is now free for teams GitHub CEO Nat Friedman 在 2020.04.14 宣布已面向全体 GitHub 用户和团队提供不限制协作人数的私有仓库 ...
- 10.1. Java性能调优
Java性能调优是一个复杂且重要的主题,它涉及到了JVM.垃圾收集器.内存管理.多线程.代码优化等多个方面.在本节中,我们将对Java性能调优的基本概念和方法进行简要介绍. 10.1.1. 理解性能指 ...
- vue2中v-if 或者 v-show 使用数组中的值判断不生效
知识点来源:博客园==> 外号蓝大胖// 对象this.$set(obj, key, value)/vue.set(obj, key, value)// 数组this.$set(arr, ind ...
- 【HMS Core】华为帐号服务,获取Access Token报错{sub_error:20152,error_description:invalid code,error:1101}
[问题描述] 华为账号服务,接口获取Access Token报错:{sub_error:20152,error_description:invalid code,error:1101} [问题分析 ...
- 1.4 编写简易ShellCode弹窗
在前面的章节中相信读者已经学会了使用Metasploit工具生成自己的ShellCode代码片段了,本章将继续深入探索关于ShellCode的相关知识体系,ShellCode 通常是指一个原始的可执行 ...
- AWVS——自动化检测发现漏洞
AWVS简介 *AWVS作为一个工具,不可能把所有漏洞扫描出来,仅仅是作为一个渗透网站时的辅助工具 自动化Web漏洞扫描工具(基于漏洞匹配方法,通过网络爬虫测试网站安全) AWVS通过SQL注入攻击. ...
- Java 新的选择,Solon v2.3.7 发布
Solon 是什么开源项目? 一个,Java 新的生态型应用开发框架.它从零开始构建,有自己的标准规范与开放生态(历时五年,已有全球第二级别的生态规模).与其他框架相比,它解决了两个重要的痛点:启动慢 ...
- HCL实验:1.两台PC通过交换机ping通
实验整体的拓扑图 进行交换机配置 配置好PC的ip netmask gatework 接口管理为启用状态 开启SW1 连接的端口 (一般来说是默认打开的,但有时候会自动关闭,很烦,所以最好加上这步) ...
- CMU15-445 Project4 Concurrency Control心得
一.概述 过瘾!过瘾!过瘾!P4 真过瘾!写 P3 的博客时我说过"感觉自己在数据库方面真正成长了",但写完 P4 之后最大的感受就是,我终于理解了 andy 在第一课说过的&qu ...