uni-app video组件报Bug：在通过事件切换src时，视频暂停，但暂停按钮下方时间未变化，仍为第一个播放视频的时间，且下方控件的播放截止时间为上一个视频的时长

uni-app video组件报Bug：在通过事件切换src时，视频暂停，但暂停按钮下方时间未变化，仍为第一个播放视频的时间，且下方控件的播放截止时间为上一个视频的时长

产品分类：

uniapp/App

PC开发环境

操作系统 版本号
Windows 10

手机系统

系统 版本号 厂商 机型
iOS iOS 15 苹果 xr

页面类型：

vue

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<video v-else id="myVideo" :src="PlayingUrl" http-cache="false" :enable-play-gesture="true" :play-strategy="3" @error="videoErrorCallback" @ended.prevent="videoEndCallback" @play="videoPlay" :show-loading="true"></video>

<p>videoEndCallback事件触发方法：<br>
this.PlayingUrl = this.info.vodUrl</p>

操作步骤：

  • 视频播放结束后，方法指定下一个播放视频路径

预期结果：

  • 视频详细信息应该根据视频内容来设置

实际结果：

  • 视频信息错误

bug描述：

video组件，在通过事件切换src时，视频暂停，暂停按钮下方时间未变化，还是第一个播放视频的时间，下方控件的播放截止时间为上一个视频的时长


更多关于uni-app video组件报Bug：在通过事件切换src时，视频暂停，但暂停按钮下方时间未变化，仍为第一个播放视频的时间，且下方控件的播放截止时间为上一个视频的时长的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

有一个参数叫 autoplay 如果设为true 当你切换src 时 会自动播放 这是显示都是对的
如果不想autoplay 此时再改变 src 的操作逻辑是想做什么？

更多关于uni-app video组件报Bug：在通过事件切换src时，视频暂停，但暂停按钮下方时间未变化，仍为第一个播放视频的时间，且下方控件的播放截止时间为上一个视频的时长的实战教程也可以访问 https://www.itying.com/category-93-b0.html


只能改成这样了，本来是默认不自动播放，然后手动点击的。还有就是现在播放器功能很少，特别是苹果端，后面能不能增加些功能，什么双击暂停，全屏显示标题之类的

回复 y***@chinaraising.com: 双击暂停是有的 全屏显示标题这些 属于定制性的需求的吧 没办法做成通用的

回复 y***@chinaraising.com: 如果有原生能力 可以基于ijkplayer 基础之上 自己拓展一些功能 video标签 也是在ijkplayer 之上做的

这是一个已知的uni-app video组件状态同步问题。当动态切换src时，视频播放器内部状态没有完全重置，导致UI显示与当前视频实际状态不一致。

问题原因：

  1. video组件的播放进度、时长等UI状态没有随src变化而自动重置
  2. 组件内部的状态管理没有及时更新到视图层

解决方案：

  1. 强制重置video组件状态（推荐）：
videoEndCallback() {
  // 先暂停并重置当前视频
  this.$refs.myVideo.pause()
  this.$refs.myVideo.seek(0)
  
  // 切换src
  this.PlayingUrl = this.info.vodUrl
  
  // 使用nextTick确保DOM更新后重新加载
  this.$nextTick(() => {
    this.$refs.myVideo.play()
  })
}
  1. 使用key强制重新渲染：
<video 
  :key="PlayingUrl" 
  id="myVideo" 
  :src="PlayingUrl"
  ...其他属性
></video>

通过key绑定src，当src变化时video组件会完全重新创建，避免状态残留。

  1. 手动更新播放器信息：
videoEndCallback() {
  const videoContext = uni.createVideoContext('myVideo')
  this.PlayingUrl = this.info.vodUrl
  
  this.$nextTick(() => {
    videoContext.seek(0)
    videoContext.play()
  })
}
回到顶部