video 视频在加载的时候无法正确关闭，会一直等待直到加载完成才会执行后续操作

[monkeying-boy]

发行方式

App

具体平台

Android 12

开发环境

Windows

项目创建方式

HBuilderX

依赖版本

hbuilderx@4.56

问题描述

在 vue 文件中使用vue2 写法，使用了uni-popup 组件 嵌套 video 组件，其业务需求为点击按钮以弹窗的形式将视频展示出来，关闭弹窗即关闭视频。
问题是：如果在弱网环境下视频正在加载中是无法关闭弹窗，即使点击了关闭按钮

重现步骤

重现代码如下，直接把当前代码放在 app 项目中运行即可，需要模拟器将网络限制一下模拟弱网环境 更容易复现问题 :http-cache="false" 是为了方便重复测试

复现步骤如下：

1. 将以下 vue 文件放在项目中运行到模拟器
2. 进入到该页面
3. 点击显示自定义弹窗按钮
4. 点击 video 的播放图标后立即点击关闭按钮

<template>
  <view>
    <button @click="showCustomPopup = true">显示自定义弹窗</button>

    <!-- 自定义弹窗层 -->
    <view
      v-if="showCustomPopup"
      class="custom-popup-mask"
    >
      <view class="custom-popup-content">
        <video
          :src="videoUrl"
          controls
          style="width: 80vw; height: 50vh;"
          id="myVideo"
          :http-cache="false"
        ></video>
        <button @click="closeCustomPopup">关闭</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showCustomPopup: false,
      videoUrl: 'http://www.w3school.com.cn/i/movie.mp4',
    };
  },
  methods: {
    closeCustomPopup() {
      uni.showToast({
        title: '点击关闭',
        icon: 'none'
      })
      const videoContext = uni.createVideoContext('myVideo', this);
      videoContext.stop();

      this.showCustomPopup = false;
    }
  },
};
</script>

<style lang="css" scoped>
.custom-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.custom-popup-content {
  background: white;
  padding: 20rpx;
  border-radius: 10rpx;
}
</style>

期望行为

希望视频在加载中也能正常关闭而不是一直卡顿直到视频加载后才能关闭

实际行为

视频在加载中会一直无法关闭知道视频加载成功后才能正常关闭

截图或录屏

No response

[Otto-J]

问题已复现，弱网情况下会遇到。

[niefz]

问题已复现，弱网情况下会遇到。

同问题，有什么解决方案吗？