Saber 酱的抱枕

现代浏览器都支持html5的video标签，在网页中插入视频和播放视频都变得非常简单。但是要兼容IE8的话则比较麻烦，因为IE8不支持video标签，还得使用flash播放器来播放视频。难道因为IE8的拖累，我就只能使用flash播放器了吗？

当然不是，理想的解决方案是在现代浏览器上使用原生video标签，在低版本IE浏览器上使用flash播放器。html5media就是这样一个视频解决方案，我们只需要写标准的video标签就行了。在低版本IE浏览器里，html5media会自动调用flowplayer这个flash播放器进行处理，非常的方便。

html5media github地址

使用步骤：

1.下载html5media的压缩包，然后找到dist→api文件夹，把要使用的api文件夹复制到项目文件夹里。

2.在网页上引用html5media的js文件：

<!--[if lt IE 9]>
<script src="path/html5media.min.js"></script>
<![endif]-->

这样，在IE8及更低版本的浏览器里，就会引入html5media的js文件了。

再次提醒：要复制使用的api的整个文件夹，包括里面的几个swf文件，不然IE8里就歇菜了。

3.设置video标签。

<video src="/f/nico.flv"  width="720" height="405" poster="/f/nico_poster.jpg" controls preload="meta"></video>

这样就完成了。

效果对比：

chrome里的video播放器效果：

IE8里的flowplayer播放器效果：

其实还有点不算问题的问题，就是html5media不能同步video里的预读取元数据的属性（preload="meta"）。

上面video标签里我手动指定了封面图，但其实现代浏览器读取视频元数据之后，会自动显示视频第一帧作为封面图.如果video标签没有设置高度，还会自动设置合适的高度，此外还会显示视频时长。

但IE8里的flowplayer没有按preload设置去读取元数据，所以我们要手动设置封面图（video标签的poster属性）和高度（video标签的height），不然IE8里这两项就等于没设置。

使用html5media视频解决方案支援IE8的视频播放