7***@qq.com
7***@qq.com
  • 发布:2021-12-20 10:57
  • 更新:2021-12-22 14:15
  • 阅读:1140

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

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10

HBuilderX类型: 正式

HBuilderX版本号: 3.3.2

手机系统: 全部

页面类型: vue

vue版本: vue2

打包方式: 离线

项目创建方式: HBuilderX

测试过的手机:

iphone12pro vivox27

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

操作步骤:

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

预期结果:

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

实际结果:

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

bug描述:

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

2021-12-20 10:57 负责人:DCloud_Android_DQQ 分享
已邀请:

最佳回复

7***@qq.com

7***@qq.com (作者)

同步的解决方法:

<video id="myVideo" @error="playError" :src="currentPlayUrl"></video>  
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()  
        })  
    }
DCloud_Android_DQQ

DCloud_Android_DQQ

我试试

DCloud_Android_DQQ

DCloud_Android_DQQ

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

  • 7***@qq.com (作者)

    不是直播吗? 所以正常的理解再次开始的时候应该是从21秒开始吧,比方说你正在看一场足球直播,中间接了个电话5分钟,当你回来时候,应该看到的是最新的直播 跳过中间这一段内容, 而不是一直看到的是缓存内容,

    这样会导致直播互动体验很差,因为每个人看到的时间都不一样。不知道这样说你能否理解

    2021-12-20 14:29

  • DCloud_Android_DQQ

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

    2021-12-20 14:41

DCloud_Android_DQQ

DCloud_Android_DQQ

这个问题应该你手动处理一下。在onshow onHide 里面手动调用一下开启,关闭接口。

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

  • 7***@qq.com (作者)

    第一点:onshow onHide 如何调用 开启和关闭接口? 开启和关闭接口是指什么?我在文档中貌似并没有找到

    “为了保证流媒体的平滑和系统性能。主流的方案都是遵从流媒体协议本身的缓冲规则” 缓冲我认同

    但是当系统原因打断时才进行同步与缓冲并不冲突。


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


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

    2021-12-20 19:52

  • DCloud_Android_DQQ

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

    2021-12-20 19:58

  • DCloud_Android_DQQ

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

    2021-12-20 19:59

  • 7***@qq.com (作者)

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

    2021-12-21 12:04

  • 7***@qq.com (作者)

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

    2021-12-21 12:07

  • 搬砖添瓦

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

    2023-05-04 11:22

7***@qq.com

7***@qq.com (作者)

不知道为什么又没有效果了 每次更新在链接后面拼接一个时间戳就好了 心累

<video id="myVideo" @error="playError" :src="currentPlayUrl"></video>    
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()    
        })    
    }

该问题目前已经被锁定, 无法添加新回复