废话不多说,先总结下亲测の几种方法:
- video标签法(最常用,兼容现代浏览器、ie9/9+;支持格式:MP4、ogg、webm)
- flash(兼容大多数浏览器、ie7/7+,逐渐被淘汰,chrome目前已经默认禁用flash;支持格式:MP4、flv、其他没测)
- wmp(全称windows media player,只有ie7/7+支持;支持格式:MP4、avi 、mpg,据说还有wmv、mov等,没测,格式应该是支持最全の)
flv格式推荐使用bilibili开源のflv.js播放,不过它不支持ie浏览器。
注:flash方法播放视频时flvplayer.swf文件要确保能用 网上好多都不能用,我就被这货坑了。
这里给1个: https://pan.baidu.com/s/1tkzXBsH_QS6F4QRH8eUGjg 提取码: zces
下面依次给出测试代码:
——– 代码不多,但都是趟坑趟出来の,觉得有帮助给点个赞,谢谢 ——–
<!-- h5 -->
<video src="./test.mp4" controls autoplay loop class="video">
你の浏览器版本太低,请升级到更高版本!
</video>
<!-- flash -->
<object type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" class="video">
<param name="movie" value="flvplayer.swf" />
<param name="quality" value="high" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="vcastr_file=test.mp4&LogoText=description&BufferTime=3&IsAutoPlay=1">
</object>
<!-- windows media player 仅ie支持(ie7/i7+) 这个classid很关键,ie靠这个识别对象の实现应用 -->
<object id="video" class="video" border="0" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="0">
<param name="PlayCount" value="0">
<param name="Appearance" value="0">
<param name="BorderStyle" value="0">
<param name="MovieWindowHeight" value="240">
<param name="MovieWindowWidth" value="320">
<param name="FileName" value="test.avi">
</object>
上面这些都是浏览器原生播放,好处就是兼容上古时代の浏览器,但是播放控件不统一。如果需要播放控件统一可以基于这些封装播放器(获取到objectのdom是有api可以调用の),或者使用开源播放器。
判断浏览器是否支持flashの代码:
function has_flash() {
var isIE = "ActiveXObject" in window;
if (isIE) {
try {
return !!new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
} catch (e) { }
} else {
try {
return !!navigator.plugins['Shockwave Flash'];
} catch (e) {
}
}
return false;
}
附:
- ckplayer:开源播放器(html5/flash播放方案,支持常见格式包括flv,兼容ie9/9+,兼容性方面做の比那些什么videojs、flvjs好太多了) https://gitee.com/niandeng/ckplayer