跳到主要内容

视频播放页面

视频播放页面用于全屏播放聊天中的小视频消息。页面本身不重新拉取消息,而是根据路由参数从 messageStore 的当前内存消息列表中定位视频消息。

配置页面路由

页面入口为 RCUIKit/pages/chat/video-play.vue。在应用的 pages.json 中注册以下路由:

JSON
{
"path": "RCUIKit/pages/chat/video-play",
"style": {
"navigationStyle": "custom"
}
}

Demo 源码通过条件编译为抖音小程序使用标题为“视频”的原生导航栏;H5 和微信小程序由页面内的 nav-bar.vue 提供关闭按钮。不同平台的导航栏行为可在页面模板和 pages.json 中分别调整。

路由参数

参数必填说明
conversationKey当前打开会话的 key,用于调用 messageStore.getMessages()
messageKey视频消息标识;页面会依次与消息的 messageUId、字符串形式的 messageId 比较

页面由视频消息组件生成跳转地址,不建议业务代码手动拼接参数:

text
/RCUIKit/pages/chat/video-play?messageKey=<消息标识>&conversationKey=<会话 key>

页面触发流程

  1. message/messageType/message-sight.vue 展示视频缩略图和播放按钮。
  2. 用户点击缩略图后,组件从 conversationStore.openedConversation.key 获取当前会话标识,并先停止正在播放的语音消息。
  3. 组件通过 uni.navigateTo 打开视频播放页面,同时传入 messageKeyconversationKey
  4. 页面在 onLoad 中调用 messageStore.getMessages(conversationKey),根据消息标识定位视频消息。
  5. 页面使用消息的 content.duration 设置时长,优先使用 content.sightUrl 作为播放地址;没有远端地址时使用 localTmpPath
  6. 页面挂载后通过 uni.createVideoContext('messageVideo') 自动播放,关闭或卸载页面时暂停播放。

视频组件触发播放前会调用 AudioManager.getInstance().stopAudio(),避免语音消息和视频同时播放。播放器发生错误时,页面显示“视频播放失败”提示。

Store 和 API 依赖

依赖用途
conversationStore.openedConversation生成跳转所需的当前会话 key
messageStore.getMessages(conversationKey)从 Store 内存缓存中取得当前会话的消息列表
IKitMessage.content.duration设置视频时长
IKitMessage.content.sightUrl / localTmpPath提供远端或本地视频播放地址
uni.createVideoContext()创建播放器上下文并控制播放、暂停

该页面没有直接调用 IMLib 查询或下载接口。消息必须已存在于 messageStore 缓存中,媒体上传完成后,Store 会把小视频消息的远端地址维护在 content.sightUrl

修改页面

修改目标源码位置
全屏播放器、关闭按钮、加载和错误提示RCUIKit/pages/chat/video-play.vue
视频缩略图、播放按钮、跳转参数RCUIKit/pages/chat/message/messageType/message-sight.vue
播放视频前停止语音的逻辑RCUIKit/pages/chat/message/manager/audio-manager.ts
公共导航栏和关闭图标RCUIKit/components/nav-bar.vueRCUIKit/components/rc-icon.vue
全局颜色和字号变量RCUIKit/styles/_variables.scss
注意

不要直接打开视频播放路由。路由参数缺失、会话消息尚未进入缓存,或 messageKey 无法匹配消息时,当前页面无法取得可播放的视频数据。自定义入口时,应先确认 messageStore.getMessages(conversationKey) 中存在目标消息。