uniapp接入萤石微信小程序插件

萤石官方提供了一些适用于uniapp / 小程序的方案

如 小程序半屏 hls rtmp 等

都TM有坑 文档写的依托答辩

本文参考了uniapp小程序插件 以及 萤石微信小程序插件接入文档

效果如下

1. 插件申请

登录您的小程序微信公众平台,点击左侧菜单栏,进入设置页,在第三方设置->插件管理->添加插件 中申请ezplayer插件,申请的插件appId为【wxf2b3a0262975d8c2】。

申请后请邮件联系萤石开放平台通过申请,并提供萤石账号、小程序名以及小程序appid

邮件联系方式:open-team@ezvizlife.com,未邮件联系的小程序插件申请将不予通过。

2. 插件引入

打开根目录的 manifest.json 文件 点击源码视图 位置如图 插入以下代码

复制代码
// 萤石小程序插件
"plugins": {
    "ezplayer": {
    "version": "1.0.0",
    "provider": "wxf2b3a0262975d8c2"
    }
}

3. 页面引入

打开根目录的 pages.json 文件 在使用页面的路由内写入以下代码

复制代码
"mp-weixin": {
    "usingComponents": {
    "ezplayer": "plugin://ezplayer/ezplayer"
    }
}

4. 页面使用

直接当标签用就OK了 标签属性 是否必填 参数配置等等问题 参考官方文档

复制代码
<ezplayer 
    id="ezplayer" 
    :accessToken="at.2s5bel782cnsdm748sv5j2ke09p7mpze-54xbxtugfh-0remxt9-gmfxmtml2"
    :url="rtmp://open.ys7.com/BA7248908/1/live" 
    :width="300" 
    :height="260"
    bind:handleError="handleError"
/>

提示

Tips

  1. 多看文档
  2. 播放URL传参较为严格 多一个 / 都不行
  3. 由于此方式调用播放协议为rtmp 故 微信开发者工具中无法播放 请使用真机调试测试
  4. 确定播放格式以及参数无误 且 真机依旧无法播放的情况下 看看控制台是否报错 有可能是未开放预览权限 不要等 handleError 报提示信息 这玩意跟个fw一样不提示
相关推荐
2501_9339072129 分钟前
如何选择宁波小程序服务,保障品质与效率?
科技·微信小程序·小程序
Greg_Zhong32 分钟前
微信小程序中实现气泡提示框、图片css加载动画及容错处理
微信小程序·自定义气泡框·图片css加载动画
万物得其道者成38 分钟前
uni-app CLI:APP 多环境打包(测试/正式)最简配置 + `import.meta.env` 为 `undefined` 的解决
uni-app
吴声子夜歌1 小时前
小程序——引入WeUI组件库
小程序
毕设源码-邱学长1 小时前
【开题答辩全过程】以 基于 uni-app Node.js 的音乐系统设计与实现为例,包含答辩的问题和答案
uni-app
CHU7290351 小时前
一番赏爬塔闯关小程序前端功能玩法设计解析
前端·小程序
大罗辑1 小时前
好用的软考刷题小程序!
小程序·2026软考考试·软考刷题小程序·软考备考小程序·软考考试题库·软考考试内容
qq_316837751 小时前
华为obs 私有桶 音频 使用uniapp 安卓端播放-99的问题
uni-app·音视频
凉辰17 小时前
uniapp实现生成海报功能 (开箱即用)
javascript·vue.js·小程序·uni-app
奶糖 肥晨17 小时前
微信小程序定位功能开发实战:实现自动定位、城市切换与地图导航
微信小程序·小程序