HTML5全视频背景注意事项

HTML 5 视频标签:
http://www.w3school.com.cn/html5/html_5_video.asp

在动手编码实现前,视频作为网页背景的有些问题我们要先考虑清楚:

  • 并不是因为技术上可行你就可以任意使用:作为背景的视频内容必须能增强页面内容的感染力,而不是因为漂亮或技术上很酷就使用它。
  • 作为背景的视频应该设置为自动播放,而默认状态下应该是关闭声音;事实上,视频里面最好不含声音。(你可以在页面上放置一个控制声音的按钮。)
  • 背景视频应该有个替代图片,当浏览器不支持这种html5技术、视频格式时用图片替代。在等待背景视频加载的过程中也应该使用背景图片占位。而对于一些手机移动设备不支持视频自动播放,也应该使用图片替代。
  • 视频长度很重要:太短了会明显感到重复播放(背景视频通常情况是重复播放的),太长就变成了情节叙事,如果这样,这段视频应该单独放到页面上播放。我建议视频的长度应该是12-30秒之间。
  • 带宽是个大问题。视频的体积应很小,尽量的压缩。同时,它需要在不同尺寸设备上自动的适应屏幕大小。如果有可能,应该使用JavaScript控制对不同的屏幕大小加载不同分辨率的背景视频。背景视频最好小于5M,如果你小于500K,那是更好。
  • 尽量把视频素材压缩,即使高清的背景视频看上去极具诱惑力,但是加载缓慢给人的糟糕体验还是让你觉得会得不偿失的。建议使用1080/720p分辨率,750-1250数据数率,每秒24-25帧的素材
  • 与前景要有鲜明的对比。让用户能轻松的阅读网页的内容,不要让文本与背景难以分辨。

HTML5通过video元素来添加视频,video支持三种视频格式,分别是ogg、mpeg4、webM。但是IE直到IE9才支持MPEG4.

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  • MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

使用HTML5里播放视频的代码方法视频:


<video autoplay loop poster="polina.jpg" id="bgvid">
  <source src="polina.webm" type="video/webm">
  <source src="polina.mp4" type="video/mp4">
</video>

注意:
这里摆放视频格式的顺序很重要,因为有些版本的谷歌浏览器里,如果.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; 
  z-index: -999;
  /*加滤镜*/  
  /*-webkit-filter: grayscale(100%);*/  
  /*filter:grayscale(100%);*/  
}

一些老式的浏览器无法播放这种格式的视频,但它们仍然识别<video>标记(除了IE8/6)。对于这些浏览器,我们使用了background-image来弥补它们的不支持,使用的图片就是视频的封面图片。

注意:
IE8不仅不能识别<video>标记,它对所有的HTML5标记都不能识别,这是一个问题,对于IE8,我们至少要让替代的背景图片能显示出来。为了达到这个目的,我们需要两件事情:一行JavaScript代码,一个CSS条件判断注释语句。


<!--[if lt IE 9]>
<script>
  document.createElement('video');
</script>
<![endif]-->

在你的CSS代码里做如下的声明,让IE知道<video>是一个block元素:


video { display: block; }

有了这句代码,IE8至少能识别<video>标记,可以正确的显示背景图片。

1.本文由杨琼博客整理发布,部分文章来自网络,如有侵犯权益,请联络博主,资源失效和内容勘误欢迎留言.

2.转载请注明本文地址:http://www.iyangqiong.com/web/606.html

3.订阅更新:您可以通过 RSS订阅本站

【推荐!必备网址导航】http://longmiao.wang/

分享到:
顶部 评论 底部