长春网站制作优势吉网传媒,wordpress 文章目录,政务服务中心 网站建设,百度排名优化工具官网
青犀视频
代码库 / 示例 / demo
EasyPlayer 示例效果#xff1a; 项目背景如图 后端给了m3u8的直播地址 协议是 hls / flv 市面上很多第三方热门播放库都可以完成该多屏播放方式 如Video.js 问题在于 分多屏时 会存在性能问题 并且关闭播放器后 即便删除Dom或调用停…官网
青犀视频
代码库 / 示例 / demo
EasyPlayer 示例效果 项目背景如图 后端给了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包里面这仨文件 如图 然后把这仨文件复制粘贴到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/easyplayerexport default {components: {EasyPlayer,}data(){// 播放链接地址playList: [url1, url2, url3, url4],}},
/script div v-for(item, index) in playList :keyindexeasy-player:refplayer index:data-indexindex:mutedfalse:video-urlitem/
/div
