uni-app iOS上uni.createVideoContext执行seek后一直处于加载状态，播放严重卡顿

uni-app iOS上uni.createVideoContext执行seek后一直处于加载状态，播放严重卡顿

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 14.4.1
HBuilderX类型 正式
HBuilderX版本号 4.08
手机系统 iOS
手机系统版本号 iOS 16
手机厂商 苹果
手机机型 iphone11、iphoneXR
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
<video id="myVideo" :src="xxx" style="width: 100%; height: 500rpx" controls :enable-progress-gesture="false" >  
</template>  

<script>  
export default {  
  data(){  
    return {  
     xxx:"xxxx.mp4",  
    }  
 },  

onLoad(){  
async onLoad(o) {  
            this.videoContext = uni.createVideoContext("myVideo");  

                        // 请求视频  
            this.$ajax("xxxxx", {}).then((res) => {  
                this.xxx = res.data  
            });  

                         // 设置跳进度  
            setTimeout(() => {  
                this.videoContext.seek(12);  
            }, 1000)  
        },  
}  
</script>

操作步骤：

setTimeout(() => {  
  this.videoContext.seek(12);  
}, 1000)

预期结果：

seek后视频流畅播放

实际结果：

seek后视频处于加载中，播放一两秒就开始加载，严重卡顿

bug描述：

iOS上播放大小为为400M的视频，当执行seek使视频进度跳到某个时间点，再次播放后卡顿严重，一直显示加载


更多关于uni-app iOS上uni.createVideoContext执行seek后一直处于加载状态，播放严重卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app iOS上uni.createVideoContext执行seek后一直处于加载状态，播放严重卡顿的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 UniApp 中使用 uni.createVideoContext 执行 seek 操作后，视频一直处于加载状态或播放严重卡顿，可能是由于以下原因导致的：

1. 视频格式或编码问题

iOS 对视频格式和编码的支持有限，如果视频的编码格式不兼容（例如使用了 iOS 不支持的编码格式），可能会导致 seek 操作后视频无法正常加载或播放卡顿。

解决方法：

  • 确保视频使用 iOS 支持的格式（如 H.264 编码的 MP4 文件）。
  • 使用工具（如 FFmpeg）重新编码视频，确保兼容性。
ffmpeg -i input.mp4 -vcodec libx264 -acodec aac output.mp4

2. 视频资源加载问题

如果视频资源较大或网络环境较差，执行 seek 操作后，iOS 可能需要重新加载视频数据，导致长时间处于加载状态。

解决方法：

  • 优化视频资源大小，使用合适的码率和分辨率。
  • 提供视频的预加载功能，确保视频数据已经加载到本地后再执行 seek 操作。
  • 使用分片播放（如 HLS 格式）来优化视频加载。

3. UniApp 或 iOS 的 Bug

UniApp 的 uni.createVideoContext 在某些 iOS 版本或机型上可能存在 Bug，导致 seek 操作异常。

解决方法：

  • 更新 UniApp SDK 到最新版本，确保使用的是最新的修复版本。
  • 检查是否有相关的 Issue 或 Bug 报告，参考官方社区的解决方案。
  • 在 seek 操作后，尝试手动调用 play 方法，强制继续播放。
const videoContext = uni.createVideoContext('myVideo');
videoContext.seek(10); // 跳转到第10秒
setTimeout(() => {
    videoContext.play(); // 强制继续播放
}, 500);

4. iOS 视频播放器限制

iOS 的原生视频播放器对某些操作（如 seek）的支持可能存在限制，尤其是在视频未完全加载时。

解决方法：

  • 确保视频已经加载到足够的数据后再执行 seek 操作。
  • 监听视频的 loadeddata 或 canplay 事件，确保视频已经准备好。
videoContext.on('loadeddata', () => {
    console.log('视频数据已加载');
    videoContext.seek(10);
});

5. UniApp 的兼容性问题

UniApp 的 uni.createVideoContext 在不同平台（iOS、Android）上的实现可能不一致，导致 iOS 上出现异常。

解决方法：

  • 使用条件编译，针对 iOS 平台单独处理视频播放逻辑。
  • 测试其他视频播放插件或原生开发，确认是否为 UniApp 的兼容性问题。
// #ifdef APP-PLUS
// iOS 特殊处理
// #endif
回到顶部