ios系统正式包 uni-app nvue页面video标签销毁时应用崩溃

ios系统正式包 uni-app nvue页面video标签销毁时应用崩溃

示例代码：

<template>  
  <view class="pageBox">  
    <video  
      src="https://partyanimals.cn/media/videos/1.mp4"  
      autoplay  
      style="width: 750rpx; height: 1000rpx"  
      v-if="show"  
    > </video>  
    <button style="width: 750rpx; height: 100rpx" @click="show = false">  
      隐藏视频  
    </button>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      show: true,  
    };  
  },  
  methods: {},  
};  
</script>  

<style scoped>  
.pageBox {  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  background-color: #010101;  
  flex: 1;  
}  
</style>

操作步骤：

  • 在nvue页面创建一个视频标签，点击按钮v-if隐藏或者返回页面时应用崩溃

预期结果：

  • 应用能够正常运行，nvue页面视频播放销毁时正常使用

实际结果：

  • nvue页面视频销毁，应用崩溃

bug描述：

  • ios系统安装正式包，nvue页面video标签销毁或返回页面时，应用崩溃，（9月30日打的包正常，十一之后发现的问题）
项目创建方式 开发环境 版本号
HBuilderX Windows 11 家庭中文版 4.76
iOS iOS 18
vue2

更多关于ios系统正式包 uni-app nvue页面video标签销毁时应用崩溃的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于ios系统正式包 uni-app nvue页面video标签销毁时应用崩溃的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的iOS 18系统兼容性问题，主要出现在使用nvue页面的video组件时。当视频组件被销毁（通过v-if切换或页面返回）时，iOS 18系统底层处理视频资源释放存在异常，导致应用崩溃。

解决方案：

  1. 临时规避方案：在销毁video组件前，先暂停视频播放并清空src属性：
// 在隐藏视频前执行
const videoContext = uni.createVideoContext('videoId')
videoContext.pause()
this.videoSrc = '' // 清空视频源
setTimeout(() => {
  this.show = false
}, 100)
  1. 组件优化：给video组件添加id属性，并在销毁前确保视频完全停止：
<video
  id="videoPlayer"
  :src="videoSrc"
  autoplay
  style="width: 750rpx; height: 1000rpx"
  v-if="show"
></video>
回到顶部