使用视频做网页背景

使用简短的视频来替换以往的静态图片,可以使信息展现的更为丰富,也能给人们留下比较深刻的印象。

展示效果:Demogithub_link

 

注意考虑因素:
1) 视频应该设置为autoplay,但默认情况下应设为静音,或者不应该包括声音  2) 视频应该显示是回落至浏览器不支持 HTML5 的静态背景图像的图像占位符。占位符图像也将在移动设备上使用背景,因为大多数的手机和平板电脑都不支持autoplay  3) 长度需要注意:太短视频能感觉到重复(像大多数这类的视频将设置为循环播放),时间太长而成为叙事归本身,因此值得要一个单独的设计元素。建议大约12-30秒的时长。  4) 可访问性是很重要:在视频上放置任何文本应在高对比度。用户应当能够轻松访问到 UI 控件以暂停视频;理想情况下,视频播放所要经过只有一次。 5) 带宽是一个大问题视频需要较小,而且尽可能有效地压缩。同时,它需要在不同的设备和他们相关的屏幕之间进行缩放。尽量保持视频大小小于 5 MB,理想情况下500KB左右为佳。 

一、使用HTML5代码插入视频

<video autoplay loop poster="images/moon.jpg" id="moon"> <!--id保持一致-->
<source src="images/moon.webm" type="video/webm">
<source src="images/moon.mp4" type="video/mp4"> </video>

 二、全屏视频代码,引入CSS中

video#moon { /*id保持一致*/
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

注意:

对于不支持 HTML5 的浏览器,使用判断:

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

 之后还需将 video 标签插入到CSS中,来声明 video 是元素:

video { display: block; }

三、对于移动端的优化

特别是 iOS系统的设备,会拒绝HTML5视频的播放,需要用图片缩放来处理

将以下代码插入至CSS:

@media screen and (max-device-width: 800px) {
    html {
         background: url(moon.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

这样就完成视频做网页背景的任务了!

copyrights Watermark

发表评论

电子邮件地址不会被公开。