Saber 酱的抱枕

Fly me to the moon

05/26
2017
学习

使用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>

这样就完成了。
Read More →

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

12/5
2015
学习

用视频做为页面背景

<video id="homevideo" autoplay="" loop="">
    <source id="video_s" src="/f/nico.flv" type="video/mp4">
</video>
<style>
	#homevideo{position: absolute;top: 0;left: 0;z-index: -999;width: auto;height: 100%;}
</style>

以前见过,现在自己做了个。查看效果

没什么技术含量,不过视频需要绝对定位,所以就要注意父元素有没有定位属性。其他的css修改,例如去掉body背景图,修改文字颜色等看情况,需要的话再改。

用视频做为页面背景