本文介绍了如何利用HTML5技术将视频作为网页背景，包括考虑的要素如自动播放、静音、适应屏幕大小，以及不同浏览器的兼容性。通过video标签和CSS控制，实现了视频全屏并提供了背景图片备选方案。此外，还展示了如何添加控制按钮来暂停/播放背景视频。
一些门户网站采用视频作为网页背景，具有很好的展示效果，而随着HTML5技术的发展和浏览器支持程序的提升，采用视频作为网页背景也变得越来越容易。
技术分析
CSS里的background-image属性只能使用图片、SVG、颜色或渐变色。但从技术讲，我们是可以伪造出一种效果，让视频以背景的角色出现在其它HTML元素后面。这其中的难点是视频要填充整个浏览器页面，而且要响应浏览器窗口大小的变化。
视频作为网页背景，需要考虑一下这几个问题：
作为背景的视频应该设置为自动播放(set to autoplay)，而默认状态下应该是关闭声音(视频里面最好不含声音)。
背景视频应该有个替代图片，当浏览器不支持这种HTML5技术、视频格式时用图片替代。
视频长度很重要(12-30秒之间)。
视频的体积应很小，尽量的压缩。同时，它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能，应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。
视频格式
当前，video 元素支持三种视频格式：
Format
IE
Firefox
Opera
Chrome
Safari
Ogg
No
3.5+
10.5+
5.0+
No
MPEG4
9.0+
No
No
5.0+
3.0+
WebM
No
4.0+
最低0.47元/天 解锁文章
扫一扫
2122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
