前端网页/html播放mp4、avi、flv等视频,兼容ie7/7+ 调用flash/windows media player播放视频

1,077次阅读
没有评论

废话不多说,先总结下亲测の几种方法:

  1. video标签法(最常用,兼容现代浏览器、ie9/9+;支持格式:MP4、ogg、webm)
  2. flash(兼容大多数浏览器、ie7/7+,逐渐被淘汰,chrome目前已经默认禁用flash;支持格式:MP4、flv、其他没测)
  3. 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;
        }

附:

  1. ckplayer:开源播放器(html5/flash播放方案,支持常见格式包括flv,兼容ie9/9+,兼容性方面做の比那些什么videojs、flvjs好太多了) https://gitee.com/niandeng/ckplayer
1
facingscreen
版权声明:本站原创文章,由 facingscreen2022-08-12发表,共计1869字。
转载说明:本文为搜栈网原创文章,除特殊说明外皆由CC-4.0协议发布,转载请注明出处,如有帮助欢迎打赏。
评论(没有评论)
验证码