uni-app中video组件会引起app崩溃

uni-app中video组件会引起app崩溃

| 开发环境 | 版本号 | 项目创建方式 |
|----------|--------|--------------|
| Windows  | 10     | HBuilderX    |
|          |        |              |

# 示例代码：

无

# 操作步骤：

nvue页面上放一个video组件，然后播放视频，在有网的情况下正常，如果本地网络断开，比如关闭wf，在打开这个视频等待几秒 app卡死不动 在等会自动退出APP，无任何报错。 测试Alpha版3.2.0 3.2.1都一样

# 预期结果：

.

# 实际结果：

.

更多关于uni-app中video组件会引起app崩溃的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

给个示例代码。 我试试

更多关于uni-app中video组件会引起app崩溃的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不好意思才看到，你只需要在nvue页面上随便放一个video组件 然后自定义机座测试播放就行，把手机网络关闭掉 或把wf关掉，或把视频地址故意修改无效地址，只要联不上外网就行，等待几秒，问题肯定会复现，监听错误事件没啥数据，所以我用list中封装类似抖音效果时只要稍有一条视频地址有问题 整个app都会卡死闪退

回复 3***@qq.com: 我试试

我这里 nvue 断网后没有复现问题。 你发一下可以复现问题的示例

<template> <view> 
</view>
</template> <script> export default { data(){ return{ } }, onLoad() { }, methods:{ onPlay(){ console.log('onPlay'); }, onEnded(){ console.log('onEnded'); }, onWaiting(){ console.log('onWaiting'); }, videoError(){ console.log('videoError'); }, ontimeupdate(){ console.log('ontimeupdate'); }, } } </script>

测试流程：手机通过USB链接电脑–》运行自定义机座–》然后打开这页面播放视频–： 前提条件:手机连接的wf，这个时候直接扒开外网线，但是路由器不要断电 扒开网线就行 只要访问不了外网，打开这个页面等待几秒返回在打开等会就自动卡死了，并且手机系统提示应用运行异常

比如用户手机是连接的wf正在看视频，万一运营商突然断网了，用户自然播放不了视频，这个时候结果就是应用卡死退出，最开始我是直接修改视频地址只要无法访问也会出现 刚才在测试 修改地址好像又可以监听到错误事件，所以最粗暴的测试办法就是扒开网线了

这是一个已知的nvue video组件在iOS平台上的严重问题，当网络异常时会导致应用崩溃。根本原因在于底层原生播放器在网络异常时触发了无法处理的异常状态。

临时解决方案：

  1. 使用条件渲染：在video组件外层包裹<view v-if="networkAvailable">，在检测到网络断开时移除video组件。
  2. 监听网络状态：使用uni.onNetworkStatusChange监听网络变化，网络断开时暂停视频并销毁播放器实例。
  3. 使用plus.video替代：考虑使用HTML5+的plus.videoAPI创建播放器，这提供了更底层的控制能力。
  4. 降级到vue页面：如果业务允许，在vue页面中使用video组件表现更稳定。

代码示例：

// 监听网络状态
uni.onNetworkStatusChange((res) => {
  if (!res.isConnected) {
    // 网络断开时暂停视频
    this.videoContext && this.videoContext.pause()
  }
})
回到顶部