使用视频作为网页背景技术探讨
使用视频作为网页背景是一件很酷的事情，但同时也是一件很难堪的事情，因为一旦处理不好，无论是技术上抑或是美观上都会适得其反的。从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。
视频作为网页背景的一些细节
- 作为背景的视频内容必须能增强页面内容的感染力
- 作为背景的视频应该设置为自动播放，而默认状态下应该是关闭声音
- 背景视频应该有个替代图片，当浏览器不支持这种HTML技术、视频格式时用图片替代
- 建议视频的长度应该是12-45秒之间
- 考虑到视频加载需要时间，视频的体积应该很小，尽量的压缩
一个简单实例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>使用视频作为网页背景</title>
<style type="text/css">
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.mp4" type="video/mp4">
</video>
</body>
</html>
相关推荐
实例021： 设置一幅图片作为按钮来使用 38 实例022： 实现QQ空间中的显示照片 效果 40 第2章 控件开发实例集锦 44 实例023： 显示在文本框中输入的信息 44 实例024： 使用RadioGroup控件实现选 项选择功能 46 实例...
实例239 随机变化的网页背景 369 8.5 选择头像 370 实例240 在列表中选择图片 370 实例241 在弹出的新窗口中选择图片 372 8.6 在页面中播放图片 374 实例242 幻灯片式播放图片 374 实例243 无间断的图片循环滚动效果...
实例008 带背景的工具栏 实例009 带图标的工具栏 实例010 带下拉菜单的工具栏 实例011 可调整按钮位置的工具栏 实例012 浮动工具栏 实例013 根据表中数据动态生成工具栏 实例014 具有提示功能的工具栏 1.4 ...
Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 3...
Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 3...
实例008 带背景的工具栏 实例009 带图标的工具栏 实例010 带下拉菜单的工具栏 实例011 可调整按钮位置的工具栏 实例012 浮动工具栏 实例013 根据表中数据动态生成工具栏 实例014 具有提示功能的工具栏 1.4 ...
cc实例263 简单嵌套查询 cc实例264 复杂嵌套查询 9.11 子查询 cc实例265 用子查询作派生的表 cc实例266 把子查询作为表达式 cc实例267 在UPDATE语句中应用子查询 9.12 联合语句UNION cc实例268 使用...
cc实例240 控件作为字段.c操作符和内容进行查询 cc实例241 巧妙获取年龄 cc实例242 格式化金额 cc实例243 如何随机显示记录 9.3 查询前若干名数据 cc实例244 查询前10名数据 cc实例...
cc实例240 控件作为字段.c操作符和内容进行查询 cc实例241 巧妙获取年龄 cc实例242 格式化金额 cc实例243 如何随机显示记录 9.3 查询前若干名数据 cc实例244 查询前10名数据 cc实例...
Tcp服务端与客户端的JAVA实例源代码，一个简单的Java TCP服务器端程序，别外还有一个客户端的程序，两者互相配合可以开发出超多的网络程序，这是最基础的部分。 递归遍历矩阵 1个目标文件，简单！ 多人聊天室 3...