将视频作为H5页面背景

最近接到一个应用场景:将.FLV格式视频文件作为页面背景。
网上直接查将.FLV格式文件作为页面背景方法不太明确,突然想到了用H5的新标签video,于是找到了将视频作为H5页面的方法:
(1)首先新建一个带video标签的H5页面,将video标签的source里写上视频链接地址(先放入,MP4格式的demo文件)。

 
 
     
      demo
 

 
    


页面在chrome浏览器下看是一个静态画面,给video加上autoplay自动播放属性属性,加上循环播放的属性loop,以及不需要声音属性muted,这样视频就安放好了。

(2)这个时候video并没有铺满整个屏幕,在body里添加样式margin:0 autol时视频横向铺满整个页面;接下来给video添加样式,让它作为页面背景。


其中z-index: -99来设置video的层级,-webkit-filter:grayscale(100%)来设置视频的灰色调属性,百分比越低灰度值越高。

(3)测试完上面的OK后,确定video属性可以将视频作为H5页面背景,然后查了一下video标签可以播放的视频格式,目前,

通过做上面的需求,又将video标签属性的方方面面总结了一下:
1、浏览器支持:
IE9浏览器及以上、Chrome浏览器4及以上、FF浏览器3.5及以上、safari4.0浏览器及以上、opera浏览器
10.5及以上;

2、

3、video的可选属性

 Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性, 以及一个内部使用的标签。Video标签内除了可以包含标签外,还可以包含当指定的视频都不能 播放时,返回的内容

(1) src属性和poster属性:video属性的width,height属性就是来设置视频的宽高属性,src属性就是用来引入视频的路径,poster是用来指定一张图片,作为视频的封面。


(2) preload属性
此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。

None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。
Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据
(包括尺寸,第一帧,曲目列表,持续时间等等)。
Auto:全部预加载

(3) controls属性
controls="controls"表明需要不需要有控制栏,控制栏须包括播放暂停控制,播放进度控制,音量控制等等。


(4) loop属性
一目了然,loop属性用于指定视频是否循环播放,同样是一个布尔属性。


(5) autoplay属性
Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。

(6) source标签
Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。就是防止一个浏览器不能播放一种格式文件的时候,可以播放相同文件下其它格式文件。
此标签包含src、type、media三个属性。

src属性:用于指定媒体的地址,和video标签的一样。
Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。你想到