uni-app video组件播放rtsp格式的视频流时设置自动播放会触发两次@play事件导致拉取到的rtsp流延时很大

uni-app video组件播放rtsp格式的视频流时设置自动播放会触发两次@play事件导致拉取到的rtsp流延时很大

开发环境信息

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 19045.5608
HBuilderX类型 正式
HBuilderX版本号 4.56
手机系统 Android
手机系统版本号 Android 12
手机厂商 矿用安卓平板
手机机型 矿用安卓平板
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码

<video id='video1' class="video" :src="src" autoplay="true" duration="" controls="true" :danmu-list="list" danmu-btn="true" enable-danmu="true" :loop="true" muted="true" initial-time="" direction="-90" show-mute-btn="true" [@play](/user/play)="onstart"  > </video>

操作步骤

  1. hello uniapp运行到本地
  2. 打开媒体组件->video
  3. 视频自动播放

预期结果

触发两次play事件，打印两次，拉取的rtsp视频延时超过1秒

实际结果

触发两次play事件，打印两次，拉取的rtsp视频延时超过1秒

bug描述

uniapp video组件，播放rtsp格式的视频流时，设置自动播放，会触发两次@play事件，导致拉取到的rtsp流延时很大，手动调用组件stop方法，然后再调用play方法，拉取的rtsp流播放延时明显减少，请帮忙查看下这个问题是什么问题，我在官方最新的hello uniapp项目中刚试过，同样的问题没有解决

附件


更多关于uni-app video组件播放rtsp格式的视频流时设置自动播放会触发两次@play事件导致拉取到的rtsp流延时很大的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app video组件播放rtsp格式的视频流时设置自动播放会触发两次@play事件导致拉取到的rtsp流延时很大的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app video组件在Android平台上的兼容性问题。当设置autoplay属性播放RTSP流时，确实会触发两次play事件，导致视频流延迟增大。

解决方案建议：

  1. 移除autoplay属性，改为手动控制播放：
<video id='video1' class="video" :src="src" duration="" controls="true" @play="onstart"></video>
  1. 在mounted生命周期中延迟调用play方法：
mounted() {
  setTimeout(() => {
    this.$refs.video1.play()
  }, 500)
}
  1. 或者在onReady事件中处理：
<video [@ready](/user/ready)="onReady"></video>

methods: {
  onReady() {
    setTimeout(() => {
      this.$refs.video1.play()
    }, 300)
  }
}
回到顶部