<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>
- 发布:2021-10-27 17:03
- 更新:2021-10-27 17:03
- 阅读:717
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: mac os big sur 11.0.1
HBuilderX类型: 正式
HBuilderX版本号: 3.2.9
手机系统: iOS
手机系统版本号: iOS 14
手机厂商: 苹果
手机机型: iphone11
页面类型: nvue
打包方式: 离线
项目创建方式: HBuilderX
示例代码:
操作步骤:
在video 组件调用play()处于加载中的时候调用pause()
在video 组件调用play()处于加载中的时候调用pause()
预期结果:
停止加载视频,或者加载完后不播放
停止加载视频,或者加载完后不播放
实际结果:
视频加载完后依旧会播放,pause没有生效
视频加载完后依旧会播放,pause没有生效
bug描述:
关于Video 的一个问题:在video 加载一个比较大的网络视频的时候,会loading相对比较长的时间,在这个过程中调用了pause(),之后视频加载完还会播放,这个时候用户可能等不了进入了其他页面。