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

942次阅读

没有评论

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

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;
        }