3***@qq.com
3***@qq.com
  • 发布:2022-08-24 13:47
  • 更新:2023-11-04 09:01
  • 阅读:1875

【报Bug】切换tabbar页面 使用uni.createVideoContext(videoId, this)和pause()无效视频无法暂停播放

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10专业版

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: Android

手机系统版本号: Android 11

手机厂商: OPPO

手机机型: OPPO A9

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
	<view>  
		<video :src="url" :poster="url + '?x-oss-process=video/snapshot,t_1,m_fast'">  
			<cover-view class="cover">video组件</cover-view>  
		</video>  
  
		<video  
			id="myVideo"  
			:src="url"  
			:show-center-play-btn="false"  
			:controls="false"  
			:enable-progress-gesture="false"  
			:show-fullscreen-btn="false"  
			:show-progress="false"  
			:show-loading="false"  
			codec="hardware"  
			:play-strategy="1"  
			:poster="url + '?x-oss-process=video/snapshot,t_1,m_fast'"  
			style="margin-top: 40rpx;"  
		>  
			<cover-image class="logo" @click="clickBtn(5)" src="../../static/logo.png"></cover-image>  
			<cover-view class="cover"></cover-view>  
		</video>  
  
		<view class="btns">  
			<button class="btn" @click="clickBtn(1)" type="primary">播放</button>  
			<button class="btn" @click="clickBtn(2)" type="primary">暂停</button>  
			<button class="btn" @click="clickBtn(3)" type="primary">全屏(竖屏)</button>  
			<button class="btn" @click="clickBtn(4)" type="primary">全屏(横屏)</button>  
			<button class="btn" @click="clickBtn(5)" type="primary">退出全屏</button>  
			<button class="btn" @click="clickBtn(6)" type="default">video</button>  
		</view>  
	</view>  
</template>  
  
<script>  
export default {  
	data() {  
		return {  
			url: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/a876efc0-4f35-11eb-97b7-0dc4655d6e68.mp4',  
			videoContext: ''  
		};  
	},  
	onHide() {  
		let id = `myVideo`;  
		this.videoContext = uni.createVideoContext(id, this);  
		this.videoContext.pause();  
		console.log('onHide');  
	},  
	methods: {  
		clickBtn(i) {  
			let id = `myVideo`;  
			switch (i) {  
				case 1:  
					try {  
						this.videoContext = uni.createVideoContext(id, this);  
						this.videoContext.play();  
					} catch (err) {  
						console.log(err);  
					}  
					break;  
				case 2:  
					this.videoContext = uni.createVideoContext(id, this);  
					this.videoContext.pause();  
					break;  
				case 3:  
					this.videoContext = uni.createVideoContext(id, this);  
					// this.videoContext.requestFullScreen({ direction: -90 });  
					this.videoContext.requestFullScreen({ direction: 0 });  
					break;  
				case 4:  
					this.videoContext = uni.createVideoContext(id, this);  
					this.videoContext.requestFullScreen({ direction: -90 });  
					// this.videoContext.requestFullScreen({ direction: 0 });  
					break;  
				case 5:  
					this.videoContext = uni.createVideoContext(id, this);  
					this.videoContext.exitFullScreen();  
					break;  
				case 6:  
					uni.navigateTo({  
						url: '../video/video'  
					});  
					break;  
			}  
		}  
	}  
};  
</script>  
  
<style scoped>  
.cover {  
	width: 200rpx;  
	height: 200rpx;  
	border-radius: 10rpx;  
	background: orangered;  
}  
.logo {  
	width: 40rpx;  
	height: 40rpx;  
	margin: 80rpx;  
}  
.btns {  
	width: 375px;  
	margin-top: 20rpx;  
}  
.btn {  
	width: 686rpx;  
	margin: 20rpx 32rpx;  
}  
</style>  

操作步骤:

点击video的播放图标视频播放切换tabbar页面,在onHide里面使用uni.createVideoContext(videoId, this)和pause()无效,视频无法暂停播放

预期结果:

视频可以暂停播放

实际结果:

视频无法暂停播放

bug描述:

切换tabbar页面时使用使用uni.createVideoContext(videoId, this)和pause()方法无效,视频无法暂停播放

2022-08-24 13:47 负责人:无 分享
已邀请:
CODE_XU

CODE_XU

这并不是一个 bug,各端展示效果会有所区别,正如你所说的,在 onHide 中去手动暂停是可以实现这种操作的,如果是微信小程序还可以使用 auto-pause-if-navigate 属性达到这种效果

  • 3***@qq.com (作者)

    切换tabbar无法暂停


    2022-08-24 14:36

  • 3***@qq.com (作者)

    只有使用uni,navigateTo()跳转页面才可以手动暂停


    2022-08-24 14:38

  • 3***@qq.com (作者)

    切换tabbar页面无法暂停


    2022-08-24 14:38

3***@qq.com

3***@qq.com (作者)

如果切换到tabber页面 手动暂停无效果

3***@qq.com

3***@qq.com (作者)

vue2没有这个问题

3***@qq.com

3***@qq.com (作者)

切换到tabbar页面,使用uni.createVideoContext(videoId, this)和pause()无法暂停视频播放
vue2.0则可以暂停视频播放

3***@qq.com

3***@qq.com (作者)

vue3.0 切换到tabbar页面,使用uni.createVideoContext(videoId, this)和pause()方法无效

  • CODE_XU

    请提供一个 vue3 的复现 demo


    2022-08-29 11:03

  • 3***@qq.com (作者)

    回复 CODE_XU: 实例已上传


    2022-08-29 13:09

  • 3***@qq.com (作者)

    回复 CODE_XU: 实例地址https://gitee.com/yang-panpanpan/video


    2022-08-29 13:23

3***@qq.com

3***@qq.com (作者)

实例

CODE_XU

CODE_XU

vue3.0 切换到tabbar页面,使用uni.createVideoContext(videoId, this)和pause()方法无效

此 bug 已复现,我们会尽快修复。

  • 3***@qq.com (作者)

    好的,感谢


    2022-08-29 15:10

  • 3***@qq.com (作者)

    你好,请问下个版本预计什么时间发布?


    2022-08-29 15:43

  • CODE_XU

    回复 3***@qq.com: 此 bug 修复,我会在此贴回复


    2022-08-29 15:49

  • 3***@qq.com (作者)

    回复 CODE_XU: 好的,感谢


    2022-08-29 18:24

DCloud_UNI_LXH

DCloud_UNI_LXH

alpha 3.6.1 已修复

  • 3***@qq.com (作者)

    好的


    2022-09-08 09:54

  • 9***@qq.com

    修复了个寂寞?微信真机OnHide里手动暂停依然失效啊!


    2023-03-22 11:29

  • DCloud_UNI_LXH

    回复 9***@qq.com: 修复的是 App 端,具体说说你是怎么调用的?使用微信原生是否有一样的问题?


    2023-03-22 11:43

  • 1***@qq.com

    安卓端还是一样啊,没有修复


    2023-04-25 19:23

  • 1***@qq.com

    onHide(()=>{

    uni.createVideoContext('videoId').pause()

    })


    2023-04-25 19:24

  • DCloud_UNI_LXH

    回复 1***@qq.com: 发帖子,提供一个可以运行的最小实现,然后发我。这个问题按说应该是没有了


    2023-04-25 19:25

  • 1***@qq.com

    回复 DCloud_UNI_LXH: https://ask.dcloud.net.cn/question/168476


    2023-04-26 13:45

1***@qq.com

1***@qq.com

ios在onHide使用pause使用还是无效

2***@qq.com

2***@qq.com

我把视频进去就播放的事件取消了,安卓手机上进去还会播放,并不生效,但苹果跟模拟器可以生效

  • DCloud_UNI_LXH

    发个新的帖子好好描述下,然后把地址回复给我


    2023-11-01 16:41

1***@qq.com

1***@qq.com

没有修复,问题依然存在

要回复问题请先登录注册