uni-app app上video组件循环播放时 ios端卡顿非常明显

uni-app app上video组件循环播放时 ios端卡顿非常明显

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC操作系统版本 windows10
HBuilderX类型 正式
HBuilderX版本 3.1.22
手机系统 iOS
手机系统版本 iOS 12.4
手机厂商 苹果
手机机型 6/7/X
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<video class="video" :style="{height: height + 'px',width: width + 'px'}" id="myVideo" :poster="actdetail.cover"  
src="https://ocular-pro.oss-cn-beijing.aliyuncs.com/file/20210728/uplload/92D71CE532E541389F6BE2736D4A58F8.mp4" :show-fullscreen-btn="false" :show-center-play-btn="false" :loop="true" :page-gesture="false" :autoplay="true"  
enable-progress-gesture="true" :enable-play-gesture="true" :show-loading="false" :controls="true" :muted="false"
show-play-btn="false" danmu-btn @pause="pausevideo" @play="play" :http-cache="true" @ended="endedvideo" :play-strategy="0" @click="handClick()">
    </video>

操作步骤：

<video class="video" :style="{height: height + 'px',width: width + 'px'}" id="myVideo" :poster="actdetail.cover"  
src="https://ocular-pro.oss-cn-beijing.aliyuncs.com/file/20210728/uplload/92D71CE532E541389F6BE2736D4A58F8.mp4" :show-fullscreen-btn="false" :show-center-play-btn="false" :loop="true" :page-gesture="false" :autoplay="true"  
enable-progress-gesture="true" :enable-play-gesture="true" :show-loading="false" :controls="true" :muted="false"
show-play-btn="false" danmu-btn @pause="pausevideo" @play="play" :http-cache="true" @ended="endedvideo" :play-strategy="0" @click="handClick()">
    </video>

预期结果：

  • 用组件自带循环播放 安卓和苹果循环切换过度效果一样好

实际结果：

  • 安卓机型过度良好，苹果手机卡顿明显 体验很差

bug描述：

（uniapp nvue页面 MP4视频格式 横全屏播放）video组件循环（loop：true）播放视频ios端切换卡顿明显，很明显看到画面卡顿很久 过度效果很差，在安卓手机上就好很多 过度的可以忽略不计，麻烦给解决方案是什么原因？ 怎么去解决这个比较好？？安卓和苹果效果差距很大？？急急急！！！ 下面贴上组件代码 可以调试看下 就只看当前组件播放循环效果（把网络途径换到下载到本地播放 还是一样效果）


更多关于uni-app app上video组件循环播放时 ios端卡顿非常明显的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

官方都没人管吗

更多关于uni-app app上video组件循环播放时 ios端卡顿非常明显的实战教程也可以访问 https://www.itying.com/category-93-b0.html


官方demo上下滑动切换视频 ios 都有问题，最后结尾处会卡一下，再进行下一次循环，安卓这边没事。 还有m3u8 视频只能播放一次，无法循环播放。

iOS端video组件循环播放卡顿，主要与iOS系统对视频播放器的处理机制有关。iOS的<video>播放器在循环播放时，每次播放结束会完全销毁并重新初始化播放器实例，导致明显的切换卡顿。而安卓系统通常采用更平滑的循环机制。

针对此问题，可以尝试以下解决方案：

  1. 避免使用loop属性，改为通过[@ended](/user/ended)事件手动控制循环： 监听视频结束事件，通过seek操作重置播放位置并重新播放，减少播放器重建开销。
    <video ref="videoRef" [@ended](/user/ended)="handleVideoEnd" ... ></video>

    handleVideoEnd() {
  this.$refs.videoRef.seek(0);
  this.$refs.videoRef.play();
}
回到顶部