如何让视频做成网页背景
来源：尚品中国|
类型：网站百科|
时间：2014-05-31
使用视频作为网页背景是件很酷的事情，但也是件困难的事情。CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从网站制作技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。
观看演示1
视频作为网页背景的限制因素
在动手编码实现前，视频作为网页背景的有些问题我们要先考虑清楚：
■并不是因为技术上可行你就可以任意使用：作为背景的视频内容必须能增强页面内容的感染力，而不是因为漂亮或技术上很酷就使用它。
■作为背景的视频应该设置为自动播放，而默认状态下应该是关闭声音；事实上，视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
■背景视频应该有个替代图片，当浏览器不支持这种HTML5技术、视频格式时用图片替代。在等待背景视频加载的过程中也应该使用背景图片占位。而对于一些手机移动设备不支持视频自动播放，也应该使用图片替代。
■视频长度很重要：太短了会明显感到重复播放(背景视频通常情况是重复播放的)，太长就变成了情节叙事，如果这样，这段视频应该单独放到页面上播放。我建议视频的长度应该是12-30秒之间。
■带宽是个大问题。视频的体积应很小，尽量的压缩。同时，它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能，应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。背景视频最好小于5M，如果你小于500K，那是更好。
对上面说的这些情况心里要有数，下面我们来看看技术实现上的细节。
CSS代码
使用HTML5里播放视频的代码方法视频：
注意：这里摆放视频格式的顺序很重要，因为有些版本的谷歌浏览器里，如果.webm格式的视频放在了其他视频后面，视频将无法播放。
我们使用视频的第一帧图像作为视频的封面图片，这样，当背景视频一旦加载完成，我们可以看到很流畅的从图片过度到背景视频播放。
让视频扩展到全屏的方法：
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;
}
一些老式的浏览器无法播放这种格式的视频，但它们仍然识别
视频作为网页背景的限制因素
在动手编码实现前，视频作为网页背景的有些问题我们要先考虑清楚：
■并不是因为技术上可行你就可以任意使用：作为背景的视频内容必须能增强页面内容的感染力，而不是因为漂亮或技术上很酷就使用它。
■作为背景的视频应该设置为自动播放，而默认状态下应该是关闭声音；事实上，视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
■背景视频应该有个替代图片，当浏览器不支持这种HTML5技术、视频格式时用图片替代。在等待背景视频加载的过程中也应该使用背景图片占位。而对于一些手机移动设备不支持视频自动播放，也应该使用图片替代。
■视频长度很重要：太短了会明显感到重复播放(背景视频通常情况是重复播放的)，太长就变成了情节叙事，如果这样，这段视频应该单独放到页面上播放。我建议视频的长度应该是12-30秒之间。
■带宽是个大问题。视频的体积应很小，尽量的压缩。同时，它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能，应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。背景视频最好小于5M，如果你小于500K，那是更好。
对上面说的这些情况心里要有数，下面我们来看看技术实现上的细节。
CSS代码
使用HTML5里播放视频的代码方法视频：
注意：这里摆放视频格式的顺序很重要，因为有些版本的谷歌浏览器里，如果.webm格式的视频放在了其他视频后面，视频将无法播放。
我们使用视频的第一帧图像作为视频的封面图片，这样，当背景视频一旦加载完成，我们可以看到很流畅的从图片过度到背景视频播放。
让视频扩展到全屏的方法：
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;
}
一些老式的浏览器无法播放这种格式的视频，但它们仍然识别
来源声明：本文章系尚品中国编辑原创或采编整理，如需转载请注明来自尚品中国。以上内容部分(包含图片、文字)来源于网络，如有侵权，请及时与本站联系（010-60259772）。
TAG标签：
推荐新闻
更多行业-
餐饮微信小程序市场的热门趋势介绍
随着社会经济快速发展，人们对美食的需求也越来越高。餐饮业作为服务行业之...
2023-04-21 -
[北京网站制作]大运会WiFi全城通 网络建站潮流所趋
大运会WiFi全城通 网络建站潮流所趋第26届世界大学生运动会正在深圳...
2011-10-24 -
企业建站_你思考过这些问题吗
以上的问题都值得认真考虑一下，企业在准备建站之前。决定做网络营销或电子...
2012-06-22 -
建立网站的费用很低的原因
建立网站的费用很低, 制定《网站建设方案》,B2B领域方面。而网络的出...
2012-09-06 -
seo网站优化之原创、伪原创和采集内容对SEO的价值
北京网站建设公司尚品中国：一个完整的站点需要丰富的内容才能够撑起正常运...
2012-03-30 -
网站建设合理的网站结构设置也对后期的优化有利？
网站本身的结构可以影响网站的权重分布和网站优化的结果。只有合理的网站结...
2020-10-27
如果您的网站可以增加转化次数并提高客户满意度，该怎么办？
预约专业咨询顾问沟通！
Copyright © 2024 恒久尚品 版权所有 | 京ICP备09066521号
| 公安机关备案号:11011502003910
免责声明
诚信企业
尚品专注高端网站建设，系统平台开发，微信小程序及APP开发服务
尚品专注高端网站建设，系统平台开发，微信小程序及APP开发服务
免责声明
非常感谢您访问我们的网站。在您使用本网站之前，请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络，涉及到的部分文章和图片版权属于原作者，本站转载仅供大家学习和交流，切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规，当本声明与国家法律法规冲突时，以国家法律法规为准。
4、如果侵害了您的合法权益，请您及时与我们,我们会在第一时间删除相关内容!
联系方式：010-60259772
电子邮件：394588593@qq.com
