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> & ...
随机推荐
- 【操作日志】如何在一个SpringBoot+Mybatis的项目中设计一个自定义ChangeLog记录?
设计一个业务改动信息时的自定义记录,例如新增.修改.删除数据等.并且记录的规则可以通过配置的方式控制.大家需要根据各自业务场景参考,欢迎讨论.伪代码如下: 实体类: @TableName(" ...
- MySQL之常用函数介绍
一:函数的简介 函数可以把我们经常使用的代码封装起来,需要的时候直接调用即可.这样既提高了代码效率,又提高了可维护性.在SQL中我们也可以使用函数对检索出来的数据进行函数操作.使用这些函数,可以极大地 ...
- 使用ptrace将标准输出重定位到文件
首先使用PTRACE_SYSCALL获取到系统调用号,如果是write则将文件描述符从标准输出变为我们打开的文件 #include <stdio.h> #include <fcntl ...
- 手把手实践丨基于STM32+华为云设计的智慧烟感系统
摘要:当前基于STM32和华为云,设计了一种智慧烟感系统,该系统可以检测烟雾,同时将检测到的数据上传到云端进行处理和分析. 本文分享自华为云社区<基于STM32+华为云设计的智慧烟感系统> ...
- shell学习总结
shell教程 第一个shell脚本 打开文本编辑器(可以使用 vi/vim 命令来创建文件), 新建一个文件 test.sh,扩展名为 sh(sh代表shell) #!/bin/bash echo ...
- uniapp主题切换功能的第二种实现方式(scss变量+require)
在上一篇 "uniapp主题切换功能的第一种实现方式(scss变量+vuex)" 中介绍了第一种如何切换主题,但我们总结出一些不好的地方,例如扩展性不强,维护起来也困难等等,那么接 ...
- 揭秘Spring依赖注入和SpEL表达式
摘要:在本文中,我们深入探讨了Spring框架中的属性注入技术,包括setter注入.构造器注入.注解式属性注入,以及使用SpEL表达式进行属性注入. 本文分享自华为云社区<Spring高手之路 ...
- uni-app简单通用Request网络请求 支持请求成功 失败回调
uni-app简单通用Request网络请求 支持请求成功 失败回调; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12794 ...
- PostgreSQL 12 文档: 部分 V. 服务器编程
部分 V. 服务器编程 这部分关于使用用户定义的函数.数据类型.触发器等扩展服务器功能.这些是高级主题,读者应该在理解了有关PostgreSQL的所有其他用户文档之后才阅读这些主题.这一部分的后面一些 ...
- Net 编译器平台--- Roslyn Scripting APIs
引言 上一篇中.Net 编译器平台 --- Roslyn,介绍了Roslyn的各项功能,包括公开API,使用语法,使用语义,使用工作区等功能. 那么回到上一篇中提到的问题,实现类似这样的功能(以下代码 ...