现代浏览器都支持html5的video标签,在网页中插入视频和播放视频都变得非常简单。但是要兼容IE8的话则比较麻烦,因为IE8不支持video标签,还得使用flash播放器来播放视频。难道因为IE8的拖累,我就只能使用flash播放器了吗?
当然不是,理想的解决方案是在现代浏览器上使用原生video标签,在低版本IE浏览器上使用flash播放器。html5media就是这样一个视频解决方案,我们只需要写标准的video标签就行了。在低版本IE浏览器里,html5media会自动调用flowplayer这个flash播放器进行处理,非常的方便。
使用步骤:
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>
这样就完成了。
Read More →
<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背景图,修改文字颜色等看情况,需要的话再改。
代码如下:
<video src="/f/Eternal Feather.mp4" poster="PreviewImgSrc" controls="controls" width="720" height="461"> 您的浏览器不支持 video 标签。 </video>
需要注意的是,video标签目前支持良好的格式只有mp4(h264编码)、ogg、WebM格式。
Read More →