video 视频在加载的时候无法正确关闭,会一直等待直到加载完成才会执行后续操作
- Dominant language
- JavaScript
- Stars
- 41.6k
- Forks
- 3.7k
- Avg merge
- 7h 6m
- Merged PRs (30d)
- 6
Description
### 发行方式
App
### 具体平台
Android 12
### 开发环境
Windows
### 项目创建方式
HBuilderX
### 依赖版本
hbuilderx@4.56
### 问题描述
在 vue 文件中使用vue2 写法,使用了uni-popup 组件 嵌套 video 组件,其业务需求为点击按钮以弹窗的形式将视频展示出来,关闭弹窗即关闭视频。
问题是:如果在弱网环境下视频正在加载中是无法关闭弹窗,即使点击了关闭按钮
### 重现步骤
重现代码如下,直接把当前代码放在 app 项目中运行即可,需要模拟器将**网络限制一下**模拟弱网环境 更容易复现问题 ` :http-cache="false"` 是为了方便重复测试
复现步骤如下:
1. 将以下 vue 文件放在项目中运行到模拟器
2. 进入到该页面
3. 点击**显示自定义弹窗**按钮
4. 点击 video 的播放图标后立即点击**关闭**按钮
```vue
显示自定义弹窗
关闭
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;
}
},
};
.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;
}
```
### 期望行为
希望视频在加载中也能正常关闭而不是一直卡顿直到视频加载后才能关闭
### 实际行为
视频在加载中会一直无法关闭知道视频加载成功后才能正常关闭
### 截图或录屏
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.