saber酱的抱枕

哀哉京阿尼

05/26
15:02
学习

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

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

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

html5media github地址

使用步骤:

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

flash flowplayer html5 html5media javascript js video 播放视频 IE8浏览器 兼容性

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播放器效果:

flash flowplayer html5 html5media javascript js video 播放视频 IE8浏览器 兼容性

IE8里的flowplayer播放器效果:

flash flowplayer html5 html5media javascript js video 播放视频 IE8浏览器 兼容性

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

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

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

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

      1. 张乐
        Google Chrome 61Google Chrome 61WindowsWindows

        原生IE8和IE11模拟的IE8都不能正常使用,播放插件可以出来,点击播放按钮没有反应,控制台也没有报错
        不过我的测试环境是一个文件夹里面放置了所有依赖的文件,然后右键用IE打开的.html。一定要在web容器里面去测试这个功能吗?

        回复
      2. 张乐
        Google Chrome 61Google Chrome 61WindowsWindows

        原生IE8和IE11模拟的IE8都是可以出现播放界面,但是点击播放按钮没有任何反应,控制台没有报错。
        不过我测试是直接在一个文件夹里面存放所有依赖文件,然后右键.html以IE打开的。必须在web容器里面测试这个功能吗?

        回复