vue项目使用easyplayer播放m3u8直播推流
官网
青犀视频
代码库 / 示例 / demo
EasyPlayer
示例效果：
项目背景如图
后端给了m3u8的直播地址 协议是 hls / flv
市面上很多第三方热门播放库都可以完成该多屏播放方式 如Video.js
问题在于 分多屏时 会存在性能问题 并且关闭播放器后 即便删除Dom或调用停止等方法 F12网络还在不断的请求分片
故采用该库 Easyplayer
该库使用方便 性能较好 文档清晰 几乎0上手成本
1. 安装
npm install @easydarwin/easyplayer --save2.引入（非常重要！）
官方文档：
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到 静态文件 根目录
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录
也就是根据以上路径 找到node_modules包里面这仨文件 如图
然后把这仨文件复制粘贴到public目录下 如图
ok 引入最后一步 打开 public 目录下的 index.html
把刚刚的仨文件引入进去 （实际上只引入第一个js文件也可以运行）
<script src="./static/js/EasyPlayer-lib.min.js"></script>
<script src="./static/js/crossdomain.xml"></script>
<script src="./static/js/EasyPlayer.wasm"></script>3.使用
过于简单基础 故不写备注
逻辑简而言之
引入并注册组件
v-for循环playList地址 有几个地址循环几个播放器出来 分4屏 playList放四个url就行了
注意：
- 需保证 ref 和 data-index 的唯一性 这俩我代码里使用了for循环的下标
- 切换分屏播放或切换设备播放时 把playList清空后重新赋值播放地址
- 播放有误的话或者playList地址有变动 则不会再取流 也就是说关闭之后就不会再取流了 甚至不需要做停止或销毁DOM的操作 非常方便
- 官方demo多看 提供的有播放事件 如果取流过程中出现问题 捕获错误的回调中可以重新初始化播放器 人性化嗷 点个赞
<script>// 引入并注册组件 import EasyPlayer from '@easydarwin/easyplayer'export default {components: {EasyPlayer,}data(){// 播放链接地址playList: ['url1', 'url2', 'url3', 'url4'],}},
</script> <div v-for="(item, index) in playList" :key="index"><easy-player:ref="'player' + index":data-index="index":muted="false":video-url="item"/>
</div>