05/26
2017
现代浏览器都支持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 →
使用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背景图,修改文字颜色等看情况,需要的话再改。
用视频做为页面背景
12/10
2014
代码如下:
<video src="/f/Eternal Feather.mp4" poster="PreviewImgSrc" controls="controls" width="720" height="461"> 您的浏览器不支持 video 标签。 </video>
需要注意的是,video标签目前支持良好的格式只有mp4(h264编码)、ogg、WebM格式。
Read More →