视频播放页面
视频播放页面用于全屏播放聊天中的小视频消息。页面本身不重新拉取消息,而是根据路由参数从 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>
页面触发流程
message/messageType/message-sight.vue展示视频缩略图和播放按钮。- 用户点击缩略图后,组件从
conversationStore.openedConversation.key获取当前会话标识,并先停止正在播放的语音消息。 - 组件通过
uni.navigateTo打开视频播放页面,同时传入messageKey和conversationKey。 - 页面在
onLoad中调用messageStore.getMessages(conversationKey),根据消息标识定位视频消息。 - 页面使用消息的
content.duration设置时长,优先使用content.sightUrl作为播放地址;没有远端地址时使用localTmpPath。 - 页面挂载后通过
uni.createVideoContext('messageVideo')自动播放,关闭或卸载页面时暂停播放。
视频组件触发播放前会调用 AudioManager.getInstance().stopAudio(),避免语音消息和视频同时播放。播放器发生错误时,页面显示“视频播放失败”提示。