uni-app video组件设置跳转到几秒钟播放后视频播放卡顿

uni-app video组件设置跳转到几秒钟播放后视频播放卡顿

开发环境 版本号 项目创建方式
Windows windows10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.16

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：mi8

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：




操作步骤：
- 任意写一个video组件就会复现

预期结果：
- 不卡顿

实际结果：
- 播放两秒卡几分钟

bug描述：
- 在video组件上配置了开始播放时间位置后非常卡顿，

更多关于uni-app video组件设置跳转到几秒钟播放后视频播放卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

收到，这边先排查下

更多关于uni-app video组件设置跳转到几秒钟播放后视频播放卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好请问一下多会能好 有没有暂时替代品

问题分析：

根据您的描述，在 video 组件设置 initial-time 后出现严重卡顿，这通常与视频的关键帧（I帧） 和解码器缓冲机制有关。当您指定一个非起始点的播放时间时，播放器需要定位到该时间点附近的关键帧开始解码播放。如果该时间点附近没有关键帧，或者视频编码格式与设备硬解兼容性不佳，就会导致解码器需要缓冲大量数据，从而引起长时间卡顿。

主要原因：

  1. 关键帧间隔过长：视频在编码时，如果关键帧间隔（GOP）设置较大（例如10秒一个关键帧），而您指定的 initial-time 恰好落在两个关键帧之间，播放器需要从上一个关键帧开始解码直到目标时间点，这个过程会消耗大量资源和时间。
  2. 硬解兼容性问题：部分视频编码格式（如H.264 High Profile）在某些Android设备上硬解支持不完善，尤其是在非起始点定位时容易触发软解，导致性能下降。
  3. 云端打包的默认播放器限制：uni-app在Android端默认使用系统原生播放器（如ExoPlayer），其对 initial-time 的处理可能因系统版本或厂商定制存在差异。

解决方案：

  1. 优化视频编码：

    • 使用视频处理工具（如FFmpeg）重新编码视频，缩短关键帧间隔（例如设置为2-3秒一个关键帧）。
    • 命令示例：ffmpeg -i input.mp4 -g 60 -c:v libx264 -profile:v baseline output.mp4（-g 60 表示每60帧一个关键帧，按30fps视频计算即2秒一个关键帧）。
    • 尽量使用兼容性更好的编码配置，如H.264 Baseline Profile。

  2. 调整播放策略：

    • 如果业务允许，可尝试先让视频从0秒开始播放，再通过 videoContext.seek() 跳转到目标时间。部分设备对 seek 方法的处理比 initial-time 更优化。
    • 示例代码：
      <video ref="videoRef" :src="src" controls @loadedmetadata="handleLoaded"></video>
<script>
export default {
  methods: {
    handleLoaded() {
      this.$refs.videoRef.seek(50); // 加载完成后跳转
    }
  }
}
</script>
回到顶部