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

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

  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文件要确保能用 网上好多都不能用,我就被这货坑了。

这里给一个: 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好太多了) 

ckplayer: ckplayer是一款用于在网页端播放视频的软件,支持mp4点播,,flv点播和直播,m3u8的点播和直播,ts直播,支持移动端,PC端icon-default.png?t=N7T8https://gitee.com/niandeng/ckplayer

【小沐学C++】C++ 实现视频文件播放(Windows Media Player、MFC、C#)_c++本地多个文件连续播放-优快云博客icon-default.png?t=N7T8https://blog.youkuaiyun.com/hhy321/article/details/126475979

Vue3本身是一个前端框架,主要用于构建用户界面,它并不直接提供处理视频文件或播放功能的内置模块。然而,你可以结合其他库如Vuetify、Element Plus或者Quasar等UI组件库,它们可能会包含视频组件,支持播放各种格式的视频,包括AVI。 要在Vue3项目中播放AVI格式视频,通常的做法是利用HTML5的`<video>`元素,配合第三方JavaScript库如Video.js、h5-video-player或者html5-video-api。下面是一个简单的步骤: 1. 引入合适的视频播放插件:例如,如果你选择Video.js,你需要安装并引入`video.js`和相应的`video-js-contrib-hls`或`video-js-contrib-html5-source-selector`来支持多种格式。 ```bash npm install video.js video-js-contrib-hls ``` 2. 在模板中创建`<video>`标签,并配置播放源: ```html <template> <div> <video ref="myVideo" id="myVideoPlayer"> <source :src="videoUrl" type="video/avi" /> </video> </div> </template> ``` 3. 在script部分获取视频元素并设置事件监听: ```javascript <script setup> import { ref } from 'vue'; import VideoJS from 'video.js'; const videoUrl = "path/to/your/video.avi"; const myVideo = ref(null); setup() { const initPlayer = async () => { await VideoJS('myVideo', {}, () => { // 当视频初始化完成,可以开始播放 myVideo.value.play(); }); }; onMounted(() => { initPlayer(); }); onBeforeUnmount(() => { // 可选,释放资源 if (myVideo.value) { myVideo.value.dispose(); } }); } </script> ``` 记得替换`videoUrl`为你实际的AVI视频路径。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

野生猿rang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值