uni-app video组件处于加载中时,调用pause方法不生效
uni-app video组件处于加载中时,调用pause方法不生效
示例代码:
<template>
<view class="container" :style="windowH">
<video class="view-video" id="videoContext" ref="videoContext" :style="windowH"
:src="url" autoplay="false">
</video>
<view class="view-layer">
<button class="btn" @click="onStartEvent">开始测试</button>
<button class="btn" @click="onResetEvent">重置</button>
</view>
</view>
</template>
<script>
const sysInfo = uni.getSystemInfoSync();
export default {
data() {
return {
title: 'Hello',
url:"https://outin-ccb8bf70814811ebb73400163e021072.oss-cn-shenzhen.aliyuncs.com/sv/5765b592-17cbbfc1a69/5765b592-17cbbfc1a69.mp4?Expires=1637833488&OSSAccessKeyId=LTAI4FocoL6tuCdYhuvug6Ee&Signature=Rt31s%2FGy%2F4gj1tI4%2Bmh9sSN0ASM%3D",
}
},
onLoad() {
},
onReady() {
this.videoContext = uni.createVideoContext("videoContext");
},
methods: {
windowH() {
return `height:${sysInfo.windowHeight}px`;
},
onStartEvent(){
console.log("测试");
//设置一个比较大的视频
this.playVideo()
//加载3秒的样子停止视频 并跳到另一个页面
setTimeout(()=>{
this.pauseVideo();
uni.navigateTo({
url:"./page-two"
})
},5000)//如果网络较快减小几秒时间,网络较慢增加一些时间,保证在视频处于加载的时候执行就能复现。我测试的时候100%复现
},
onResetEvent(){
this.stopVideo();
},
playVideo(){
if(this.videoContext){
console.log("播放视频");
this.videoContext.play();
}
},
pauseVideo(){
console.log(this.videoContext);
if(this.videoContext){
console.log("停止播放");
this.videoContext.pause();
}
},
stopVideo(){
if(this.videoContext){
this.videoContext.stop();
}
}
}
}
</script>
<style lang="less">
.container {
display: flex;
flex-direction: column;
width: 750rpx;
background-color: #000000;
justify-content: center;
align-items: center;
}
.view-video{
width: 750rpx;
}
.view-layer{
width: 750rpx;
height: 300rpx;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
.btn{
width: 400rpx;
margin-top: 30rpx;
}
}
</style>
操作步骤:
- 在video 组件调用play()处于加载中的时候调用pause()
预期结果:
- 停止加载视频,或者加载完后不播放
实际结果:
- 视频加载完后依旧会播放,pause没有生效
bug描述:
- 关于Video 的一个问题:在video 加载一个比较大的网络视频的时候,会loading相对比较长的时间,在这个过程中调用了pause(),之后视频加载完还会播放,这个时候用户可能等不了进入了其他页面。
| 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Mac |
| PC开发环境版本 | mac os big sur 11.0.1 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 3.2.9 |
| 手机系统 | iOS |
| 手机系统版本 | iOS 14 |
| 手机厂商 | 苹果 |
| 手机机型 | iphone11 |
| 页面类型 | nvue |
| 打包方式 | 离线 |
| 项目创建方式 | HBuilderX |
更多关于uni-app video组件处于加载中时,调用pause方法不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app video组件处于加载中时,调用pause方法不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的uni-app video组件在iOS平台上的异步执行问题。当视频处于加载状态时,pause()方法调用会被延迟到加载完成后才执行,导致控制失效。
核心问题:iOS原生video组件在缓冲期间,pause命令无法立即中断加载过程。
临时解决方案:
- 使用stop()替代pause():
pauseVideo(){
if(this.videoContext){
console.log("停止播放");
this.videoContext.stop(); // 使用stop强制停止
}
}
- 添加加载状态检测:
data() {
return {
isVideoLoading: false,
// ...其他数据
}
},
methods: {
playVideo(){
if(this.videoContext){
this.isVideoLoading = true;
this.videoContext.play();
}
},
pauseVideo(){
if(this.videoContext && this.isVideoLoading){
this.videoContext.stop();
this.isVideoLoading = false;
}else if(this.videoContext){
this.videoContext.pause();
}
}
}
- 在页面跳转前强制销毁:
setTimeout(()=>{
this.videoContext.stop();
this.videoContext = null; // 清空引用
uni.navigateTo({
url:"./page-two"
})
},5000)

