uni-app video组件加载结束后再从头开始加载会有停顿

uni-app video组件加载结束后再从头开始加载会有停顿

开发环境 版本号 项目创建方式
Windows 10 HBuilderX 
### 操作步骤：
目前任意video加载一个视频设置loop与自动播放

### 预期结果：
播放至结尾能直接从头开始播放

### 实际结果：
播放至结尾会出现绿色的转圈加载动画，停顿个零点几或者几秒钟才进行从头播放

### bug描述：
我想要的是像抖音和快手那种做loop循环播放时播放结束到从头开始的衔接完全不存在停顿的那种，因为很多时候做套路视频都是循环的结尾即能连接视频的开头，如果结尾出现停顿，就达不到效果了。虽然增加了视频缓存至本地，但video组件loop循环播放时播放结束到从头开始播放的过程中，会有零点几秒甚至是几秒的停顿，导致很多场景实现不了。

更多关于uni-app video组件加载结束后再从头开始加载会有停顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

收到，我尝试复现一下

更多关于uni-app video组件加载结束后再从头开始加载会有停顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的，感谢

uni-app video组件循环播放停顿问题分析

这个问题确实会影响视频循环播放的流畅体验。以下是可能的原因和解决方案：

原因分析

  1. 视频缓冲机制：uni-app的video组件在循环播放时，默认会重新请求视频资源
  2. 平台差异：不同平台(Android/iOS)对video组件的实现方式不同
  3. 缓存策略：视频资源未被有效缓存导致每次循环都需要重新加载

解决方案

  1. 使用原生方案：
<video 
  src="video.mp4" 
  loop 
  autoplay 
  :controls="false"
  :show-play-btn="false"
  :show-center-play-btn="false"
  :enable-progress-gesture="false"
  :enable-play-gesture="true"
  :show-fullscreen-btn="false"
></video>
  1. 尝试预加载：
// 提前创建video实例并预加载
const videoContext = uni.createVideoContext('myVideo');
videoContext.play();
  1. 使用自定义循环：
// 监听视频结束事件，手动seek到开头
videoContext.onEnded(() => {
  videoContext.seek(0);
  videoContext.play();
});
回到顶部