将视频作为H5页面背景

最近接到一个应用场景：将.FLV格式视频文件作为页面背景。 网上直接查将.FLV格式文件作为页面背景方法不太明确，突然想到了用H5的新标签video,于是找到了将视频作为H5页面的方法： （1）首先新建一个带video标签的H5页面,将video标签的source里写上视频链接地址(先放入，MP4格式的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>元素支持三种视频格式：MP4、WebM、Ogg。那把.flv格式转成.mp4格式的文件就可以搞定了需求了。 通过做上面的需求，又将video标签属性的方方面面总结了一下： 1、浏览器支持： IE9浏览器及以上、Chrome浏览器4及以上、FF浏览器3.5及以上、safari4.0浏览器及以上、opera浏览器 10.5及以上； 2、<video>元素支持三种视频格式： MP4、WebM、Ogg。但是似乎各个浏览器对MP4格式的支持性最好。 MP4格式 MIME-type=video/mp4 WebM格式MIME-type=video/WebM Ogg格式MIME-type=video/Ogg 3、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，表示支持所有媒介。你想到<style>标签的media属性了么？

新建一个带vedio标签的页面，被给vedio的source加上视频连接

在浏览器中打开，发现一片漆黑，因为视频没有被打开。要给video加上autoplay的属性。

如果不需要声音，就加上muted

还可以加上循环播放的loop

video并没有完全撑满浏览器，在body下加上margin:0

接下来给video加上样式，使之没有scroll，又能撑满全屏

打来浏览器就能看到恰到好处的背景视频了

在页面中加上文字，会发现该文字并没有显示在页面上，需要调低video的z-index值，这里直接置为-9999。效果如图

还可以用-filter属性，来控制video的色调，比如加上-webkit-filter:grayscale(100%)，这样页面中的视频就会显示为灰色调

此属性也使用于图片

还可以利用video的playbackRate属性来控制video的播放速度，如果要让背景视频以慢速播放的话可以加上下面的javascript

<script>

var

video=

document.getElementById('v1')

video.playbackRate

=

0.5

</script>

---