miku-wx-player

面向微信小程序的播放器组件包，提供：

• miku-live-player
• miku-video

两个组件的公开属性与事件以原生 live-player / video 为准，便于在现有业务里低成本替换接入。同时组件内部带有日志记录、触发与上报链路，但不会额外污染外部 API。

适用场景

• 希望继续按原生组件方式写属性和事件。
• 希望在 live-player / video 外层补统一日志链路。
• 希望对 live / video 保持一致的接入方式。

安装

npm install miku-wx-player

安装后，在微信开发者工具中执行“构建 npm”。

组件路径

{
  "usingComponents": {
    "miku-live-player": "miku-wx-player/miku-live-player/index",
    "miku-video": "miku-wx-player/miku-video/index"
  }
}

快速开始

miku-live-player

<miku-live-player
  id="livePlayer"
  src="{{liveSrc}}"
  mode="live"
  autoplay
  muted="{{false}}"
  object-fit="contain"
  min-cache="{{1}}"
  max-cache="{{3}}"
  bindstatechange="handleLiveStateChange"
  bindnetstatus="handleLiveNetStatus"
  binderror="handleLiveError"
/>

miku-video

<miku-video
  id="videoPlayer"
  src="{{videoSrc}}"
  controls
  autoplay
  muted="{{false}}"
  object-fit="contain"
  bindloadedmetadata="handleVideoLoadedMetadata"
  bindplay="handleVideoPlay"
  bindtimeupdate="handleVideoTimeUpdate"
  bindwaiting="handleVideoWaiting"
  binderror="handleVideoError"
/>

API 说明

• miku-live-player：
  • 公开属性与事件以原生 live-player 为准。
• miku-video：
  • 公开属性与事件以原生 video 为准。
• 约束：
  • 不额外新增公开属性、事件、实例方法。
  • 日志能力走组件内部实现，对接入层保持透明。

如果你已经在使用原生 live-player / video，通常只需要把组件标签替换为 miku-live-player / miku-video，并保留原有属性、事件名。

和原生的区别

• 属性名、事件名尽量保持和原生 live-player / video 一致，日常接入可以直接按原生组件写。
• 组件内部会额外发起日志相关请求，所以会新增内部 wx.request 请求。
• 如果你只使用属性和事件，接入方式基本就是“把原生标签替换成 miku 组件标签”。
• 如果你还需要调用播放器方法，调用入口和原生有一点区别：由于这里是自定义组件包，不能直接对页面上的组件 id 调 wx.createVideoContext / wx.createLivePlayerContext。

方法怎么用

原生组件的方法能力仍然走 VideoContext / LivePlayerContext，只是拿 context 的方式要先拿到组件实例，再用组件内部的 playerId 创建 context。

miku-video

<miku-video
  id="videoPlayer"
  src="{{videoSrc}}"
  controls
  bindplay="handleVideoPlay"
/>

const videoComp = this.selectComponent('#videoPlayer')
const videoCtx = wx.createVideoContext(videoComp.data.playerId, videoComp)

videoCtx.play()
videoCtx.pause()
videoCtx.seek(10)

miku-live-player

<miku-live-player
  id="livePlayer"
  src="{{liveSrc}}"
  mode="live"
  bindstatechange="handleLiveStateChange"
/>

const liveComp = this.selectComponent('#livePlayer')
const liveCtx = wx.createLivePlayerContext(liveComp.data.playerId, liveComp)

liveCtx.play()
liveCtx.stop()
liveCtx.requestFullScreen()

也就是说：

• context 的创建方式和原生不同
• context 创建完成后，后续 play/pause/stop/seek/requestFullScreen 等方法调用方式和原生一致

request 合法域名

如果你接入了这个 SDK，需要把下面这些请求域名加入小程序后台的 request 合法域名：

• 日志上报：https://pili-sdk-transport.qnsdk.com
• 其他内部请求：https://sdk-release.qnsdk.com