vue项目使用easyplayer播放m3u8直播推流

官网

青犀视频

代码库 / 示例 / demo

EasyPlayer

示例效果:

vue项目使用easyplayer播放m3u8直播推流_第1张图片

项目背景如图 

后端给了m3u8的直播地址  协议是 hls / flv

市面上很多第三方热门播放库都可以完成该多屏播放方式 如Video.js

问题在于 分多屏时 会存在性能问题  并且关闭播放器后 即便删除Dom或调用停止等方法 F12网络还在不断的请求分片

故采用该库 Easyplayer

该库使用方便 性能较好 文档清晰 几乎0上手成本

1. 安装

npm install @easydarwin/easyplayer --save

2.引入(非常重要!)

官方文档:

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包里面这仨文件 如图

vue项目使用easyplayer播放m3u8直播推流_第2张图片

然后把这仨文件复制粘贴到public目录下 如图

vue项目使用easyplayer播放m3u8直播推流_第3张图片

ok  引入最后一步  打开 public 目录下的 index.html

把刚刚的仨文件引入进去 (实际上只引入第一个js文件也可以运行)



3.使用

 过于简单基础  故不写备注

逻辑简而言之

引入并注册组件

v-for循环playList地址  有几个地址循环几个播放器出来  分4屏 playList放四个url就行了

注意:

  1. 需保证  ref 和 data-index 的唯一性 这俩我代码里使用了for循环的下标
  2. 切换分屏播放或切换设备播放时 把playList清空后重新赋值播放地址
  3. 播放有误的话或者playList地址有变动  则不会再取流  也就是说关闭之后就不会再取流了  甚至不需要做停止或销毁DOM的操作 非常方便
  4. 官方demo多看 提供的有播放事件 如果取流过程中出现问题 捕获错误的回调中可以重新初始化播放器  人性化嗷 点个赞

 

你可能感兴趣的:(vue.js,前端,javascript)