uni-app app-plus使用video组件直播拉流 播放http-flv rtsp rtmp直播时出现缓存问题

uni-app app-plus使用video组件直播拉流 播放http-flv rtsp rtmp直播时出现缓存问题

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX

测试过的手机

  • iphone12pro
  • vivox27

示例代码：

<video :autoplay="true" src="https://pull-f5.flive.douyincdn.com/media/stream-110040569438535817_sd.flv"></video>

操作步骤：

  • 使用上述代码进行直播播放，直播链接有可能会失效，如果失效，还请复现时在抖音里找一个直播链接，查找步骤：1、找到一个抖音直播间打开F12进入然后在network中使用 size排序（详见附件图片）

预期结果：

  • 预期结果： 直播时被系统中断后 恢复直播时不应继续播放缓存内容 应拉取最新直播流。

实际结果：

  • 直播时 系统中断后 恢复直播时仍然从暂停处开始播放导致延迟很长， 每个人看到的内容会相差很久

bug描述：

  • 在直播页面锁屏后会暂停并继续缓存，待开屏后会从锁屏瞬间继续播放 导致延迟“锁屏到开屏之间”的时间一样。（所有的系统中断表现都一致，例如 电话介入等等）

更多关于uni-app app-plus使用video组件直播拉流 播放http-flv rtsp rtmp直播时出现缓存问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

16 回复

同步的解决方法： <video id=“myVideo” @error=“playError” :src=“currentPlayUrl”>
onHide() {
// 停止播放
if (this.videoContext) {
console.log(‘停止播放’);
this.currentPlayUrl = “”
}
}

onShow() {
this.currentPlayUrl = “https://pull-flv-f26.douyincdn.com/third/stream-110062027428331629.flv”
this.$nextTick(() => {
this.videoContext = uni.createVideoContext(‘myVideo’, this)
this.videoContext.play()
})
}

更多关于uni-app app-plus使用video组件直播拉流 播放http-flv rtsp rtmp直播时出现缓存问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我试试

没明白什么意思。 我在10s的时候 锁屏了。然后等待10s后 再次打开播放界面。 这个时候从11s开始播放。不对吗

不是直播吗？ 所以正常的理解再次开始的时候应该是从21秒开始吧，比方说你正在看一场足球直播，中间接了个电话5分钟，当你回来时候，应该看到的是最新的直播 跳过中间这一段内容， 而不是一直看到的是缓存内容， 这样会导致直播互动体验很差，因为每个人看到的时间都不一样。不知道这样说你能否理解

回复 7***@qq.com: 我明白你说的意思了。我们确认一下。稍后回复你

这个问题应该你手动处理一下。在onshow onHide 里面手动调用一下开启，关闭接口。
对于推流组件来说，你所说的每次都拉取最新的也不是最好的解决方案， 为了保证流媒体的平滑和系统性能。主流的方案都是遵从流媒体协议本身的缓冲规则。 你可以参考一下 虎牙直播，播放的时候长了各个客户端也会有延迟。他们提供了手动同步按钮，供用户手动共同。

第一点：onshow onHide 如何调用 开启和关闭接口？ 开启和关闭接口是指什么？我在文档中貌似并没有找到 “为了保证流媒体的平滑和系统性能。主流的方案都是遵从流媒体协议本身的缓冲规则” 缓冲我认同 但是当系统原因打断时才进行同步与缓冲并不冲突。

我试过在onHide v-if=“false”、 onShow、v-if=“true” 进行重新创建 video操作,但是这样会导致用户进入直播间后需要等待5秒左右才会有声音. 查找官方文档页面没有同步的一些方法。

还有一个优化的点是能否提供一个类似与 live-player组件 background-mute属性，可以让开发者有能选择后台播放的能力

回复 7***@qq.com: 1 start,stop. 这一点可以参考一下 qq群里其他开发者的用法。 他们一般都是这样处理的。

回复 7***@qq.com: 第二点 没太看明白。 什么叫后台播放？

回复 DCloud_Android_DQQ: 你可以在手机上打开抖音直播间，然后锁屏

回复 DCloud_Android_DQQ: 没有start方法，且stop之后就播放不了了。 我试了链接赋值为空并在show时重新createVideoContext，并play.是好使的，已经贴出了。感谢你的回复

播放实时视频 延迟有点长 这个可以做优化吗

不知道为什么又没有效果了 每次更新在链接后面拼接一个时间戳就好了 心累 <video id=“myVideo” @error=“playError” :src=“currentPlayUrl”>
onHide() {
// 停止播放
if (this.videoContext) {
console.log(‘停止播放’);
this.currentPlayUrl = “”
}
}

onShow() {
this.currentPlayUrl = “https://pull-flv-f26.douyincdn.com/third/stream-110062027428331629.flv” +?random=${Date.now()}
this.$nextTick(() => {
this.videoContext = uni.createVideoContext(‘myVideo’, this)
this.videoContext.play()
})
}

在uni-app的app-plus平台使用video组件播放HTTP-FLV等直播流时，遇到锁屏或电话中断后恢复播放产生缓存延迟的问题，这通常与视频播放器的缓冲机制有关。

video组件在iOS和Android上底层使用原生播放器，默认会缓存一定数据以保证流畅播放。当应用进入后台（如锁屏、来电），播放器可能暂停但仍在缓存流数据，恢复时从缓冲点继续播放，导致与直播源产生延迟。

解决思路：

  1. 监听应用状态变化：通过uni.onAppShow、uni.onAppHide监听应用前后台切换，在进入后台时销毁video实例，回到前台时重新创建并加载最新流地址。
  2. 禁用播放器缓存：尝试在video标签中添加controls、autoplay属性，并设置playsinline，但原生播放器对直播流的缓存控制有限。
  3. 使用直播专用方案：对于低延迟直播，建议使用原生插件或WebView嵌入专业直播SDK（如腾讯云、阿里云播放器），它们支持实时清空缓冲、追帧等能力。
  4. 流地址动态更新：每次恢复播放时，为src添加时间戳参数强制拉取新流，例如：
    <video :src="liveUrl + '?t=' + timestamp"></video>
    在恢复播放前更新timestamp为当前时间。

示例代码调整：

export default {
  data() {
    return {
      liveUrl: 'https://pull-f5.flive.douyincdn.com/media/stream-xxx.flv',
      timestamp: Date.now()
    }
  },
  onShow() {
    // 应用回到前台时更新流地址
    this.timestamp = Date.now();
  },
  onHide() {
    // 可在此暂停播放或记录状态
  }
}
回到顶部