梦学谷
梦学谷
  • 发布:2020-11-25 11:11
  • 更新:2021-02-02 15:18
  • 阅读:1297

【报Bug】升级到HBuilderX 2.9.8 后,nvue页面video使用exitFullScreen 无法正常退出全屏,

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: mac

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: iphone8

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
		// 点击全屏  
		fullScreenHandler() {  
			if(this.fullScreen){  

				this.videoContext.exitFullScreen()  
			}else{  
				this.videoContext.requestFullScreen()  
			}  
			// 改变  
			this.fullScreen = !this.fullScreen  
		},

操作步骤:
		// 点击全屏  
		fullScreenHandler() {  
			if(this.fullScreen){  

				this.videoContext.exitFullScreen()  
			}else{  
				this.videoContext.requestFullScreen()  
			}  
			// 改变  
			this.fullScreen = !this.fullScreen  
		},

预期结果:
		// 点击全屏  
		fullScreenHandler() {  
			if(this.fullScreen){  

				this.videoContext.exitFullScreen()  
			}else{  
				this.videoContext.requestFullScreen()  
			}  
			// 改变  
			this.fullScreen = !this.fullScreen  
		},

实际结果:
		// 点击全屏  
		fullScreenHandler() {  
			if(this.fullScreen){  

				this.videoContext.exitFullScreen()  
			}else{  
				this.videoContext.requestFullScreen()  
			}  
			// 改变  
			this.fullScreen = !this.fullScreen  
		},

bug描述:

升级到HBuilderX 2.9.8 后,nvue页面video使用 exitFullScreen 无法正常退出全屏,只是视频区域缩小了一半,但还是全屏状态,未变为竖屏。但是在 2.9.3.20201014是可以正常横竖屏切换的。并且HBuilderX 2.9.8在nvue上面写的样式在全屏状态下也会错乱,2.9.3.20201014版本是正常的

2020-11-25 11:11 负责人:无 分享
已邀请:
DCloud_iOS_XHY

DCloud_iOS_XHY

你好,请提供一个完整的示例吧

  • 梦学谷 (作者)

    已经提供了,请查收


    2021-01-09 10:44

梦学谷

梦学谷 (作者)

先点击全屏/取消全屏 全屏,再点击全屏/取消全屏 取消全屏时,会出现如下图效果(手机竖着看图,白色空白处是在屏幕下方)

<template>  
	<view class="video-box">  
		<video   
			id="video"  
			ref="video"  
			class="video"  
			:controls="false"   
			poster="https://s.yun-live.com/images/20200715/902844b0f1215ff236ad6b1bd1683555.jpg"  
			:src="src"  
			>  
			<!-- 全屏和取消全屏按钮 -->  
			<cover-view class="controls-bottom" >  
					<text class="video-btn" @click.stop="fullScreenHandler" >全屏/取消全屏</text>  
			</cover-view>  
		</video>  
	</view>  
</template>  
  
<script>  
	export default {  
		data() {  
			return {  
				src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4",  
				fullScreen: false  
			}  
		},  
		  
		mounted() {  
			// #ifndef MP-ALIPAY  
			// this.videoContext = uni.createVideoContext('video')  
			// 注意,在 subNvue中要使用这种方式获取video实例  
			this.videoContext = this.$refs.video  
			// #endif  
			  
		},  
		  
		methods: {  
			// 点击全屏  
			fullScreenHandler() {  
				if(this.fullScreen){  
					this.videoContext.exitFullScreen()  
				}else{  
					this.videoContext.requestFullScreen()  
				}  
				// 改变  
				this.fullScreen = !this.fullScreen  
			},  
		}  
	}  
</script>  
  
<style>  
	.video {  
		width: 750rpx;  
	}  
	  
	/* 底部控制 */  
	.controls-bottom {  
		position:absolute;  
		bottom:0;  
		right: 0;  
		width: 750rpx;  
	}  
</style>  

梦学谷

梦学谷 (作者)

排查到了吗?还需要提供什么

DCloud_iOS_XHY

DCloud_iOS_XHY

你好升级一下HX到最新版本试一下吧,我这边用你提供的代码在基座中测试没有问题

  • 梦学谷 (作者)

    你好,我升级了3.0.4、3.0.5、3.0.7版本测试,还是一样的全屏播放后,再退出全屏播放无法正常返回坚屏效果。只有2.9.4以前的才可以。核心代码就是下面的,是自定了一个全屏按钮进行触发:

    <video ref="video" />


    let videoContext = null  
    export default {
    data() {
    return {
    fullScreen: false,
    }
    },
    mounted() {
    // 在 subNvue中要使用这种方式获取video实例
    videoContext = this.$refs.video
    },
    methods: {
    fullScreenHandler() {
    if(this.fullScreen){
    //退出全屏
    videoContext.exitFullScreen()
    }else{
    // 进入全屏
    videoContext.requestFullScreen()
    }
    // 改变状态
    this.fullScreen = !this.fullScreen
    },
    }
    }

    2021-01-11 12:10

  • 梦学谷 (作者)

    是用的2.9.3版本是正常的


    2021-01-11 12:12

  • 梦学谷 (作者)

    你好,测试了有问题吗?


    2021-01-12 15:38

  • DCloud_iOS_XHY

    上传一个完整的工程吧


    2021-01-12 18:17

  • 梦学谷 (作者)

    回复 DCloud_iOS_XHY: 工程已上传附件,见一下条留言中


    2021-01-13 09:55

  • 梦学谷 (作者)

    上传了收到了吗?


    2021-01-16 10:33

  • iOS_DJX

    回复 梦学谷:我来跟一下


    2021-01-18 10:53

  • iOS_DJX

    回复 梦学谷: Bug已确认 已修复 下个版本发布


    2021-01-18 18:04

梦学谷

梦学谷 (作者)

测试的机型是iphone8, IOS13.6,HX3.0.5版本,示例代码见附件,退出全屏时如下图所示:

DCloud_iOS_XHY

DCloud_iOS_XHY

感谢反馈,此问题已经在 HBuilderX 3.1.0+版本修复,请升级;

该问题目前已经被锁定, 无法添加新回复