uni-app 微信公众号H5开发里面的video 组件点击全屏后不会自动横屏播放

Myth丶恋晨 2022-09-11 15:13 539阅读 0赞

### 文章目录 ###

*  前言
 *  一、不能自动横屏的原因？
 *  二、在里就奉上代码
 *  总结

--------------------

# 前言 #

video 组件 视频播放，在微信浏览器中点击全屏的时候不会自动横屏。客户说别人的为什么能自动横屏你的为什么不能，爆肝了两天，百度了一篇又一篇，什么x5属性往上加，pi用没有，然后看见一个内置旋转的方案，莫得办法，就用这个解决一下，好像做了又好像没做

--------------------

# 一、不能自动横屏的原因？ #

1.微信内置的设置横屏模式没开启  
解决方案，让用户去开启微信的横屏模式，但是甲方不愿意，弃用

2.微信浏览器用的是X5核心  
解决方案，让用户去微信聊天窗口发送 debugmm.qq.com/?forcex5=false  
然后在点击，自动关闭X5。但是客户第一个解决方案都不愿意，这个方案是在想pi吃

3.内置旋转，但是微信公众号H5的导航栏，遮罩是遮罩不住的，伪全屏？

# 二、在里就奉上代码 #

H5的代码

CSS样式

.video-box { 
    	width: 750rpx;
    	height: 422rpx;
    	display: flex;
    	flex-direction: column;
    	align-items: center;
    	justify-content: center;
    	position: fixed;
    	top: 0;
    	left: 0;
    	z-index: 999;
    }
    .video { 
    	width: 750rpx;
    	height: 422rpx;
    }
    #myVideo { 
    	width: 100%;
    	height: 211px;
    	z-index: 999;
    	display: flex;
    	align-items: center;
    	justify-content: center;
    	position: relative;
    }
    .ComedyScreenBox { 
    	z-index: 1000;
    	position: absolute;
    	right: 0;
    	top: 0;
    	width: 20px;
    	height: 20px;
    	padding: 5px;
    }
    .ComedyScreenBox image{ 
    	width: 64rpx;
    	height: 64rpx;
    }
    
    .ComedyScreen { 
    	width: 100%;
    	height: 100%;
    	background-repeat: no-repeat;
    	cursor: pointer;
    	position: absolute;
    	right: 0;
    	transform: rotate(90deg);
    }
    
    .ComedyReturn { 
    	width: 100%;
    	height: 100%;
    	cursor: pointer;
    	position: absolute;
    	right: 0;
    	transform: rotate(90deg);
    }

onShow() { 
    		let self = this
    		window.addEventListener('orientationchange', function(event) { 
    			self.orientation=window.orientation
    			//监听手机方向 竖屏
    			if (window.orientation == 180 || window.orientation == 0) { 
    				self.left = false
    				self.ComedyScreen()
    
    				// if (!that.ComedyScreenStatus) { 
    				// self.ComedyScreen(0, 'top')
    				// }
    
    
    
    			}
    			//监听手机方向 横屏
    			if (window.orientation == 90 || window.orientation == -90) { 
    				self.left = true
    				self.ComedyScreen(1,true)
    			}
    		});
    	},
    	methods: { 
    			ComedyScreen(status, title) { 
    
    			console.log(status)
    			let _this = this;
    			if (status) { 
    				this.$nextTick(function() { 
    					let that = this;
    					uni.getSystemInfo({ 
    						success: function(res) { 
    
    							console.log(that.orientation)
    							if (title || that.orientation == 90 || that.orientation == -90) { 
    							// 监听手机横屏的时候 自动给变成横屏方向播放
    								that.$refs.videoRef.$el.style.width = "100%";
    								that.$refs.videoRef.$el.style.height = "100%";
    								that.$refs.videoRef.$el.style.position = "absolute";
    								let top = (res.windowHeight - res.screenWidth) / 2;
    								that.$refs.videoBox.$el.style.width = "100%";
    								that.$refs.videoBox.$el.style.height = "100%";
    								that.$refs.videoBox.$el.style.position = "fixed";
    								that.$refs.videoBox.$el.style.top = 0;
    								that.$refs.videoBox.$el.style.left = 0;
    								that.$refs.videoBox.$el.style.right = 0;
    								that.$refs.videoBox.$el.style.bottom = 0;
    								that.$refs.videoBox.$el.style.transform = "rotate(0deg)";
    								that.ComedyScreenStatus = true;
    							} else { 
    							//点击全屏播放按钮走的逻辑
    								that.$refs.videoRef.$el.style.width = res.windowHeight + "px";
    								that.$refs.videoRef.$el.style.height = res.windowWidth + "px";
    								that.$refs.videoRef.$el.style.position = "absolute";
    								let top = (res.windowHeight - res.screenWidth) / 2;
    								that.$refs.videoBox.$el.style.width = res.windowHeight + "px";
    								that.$refs.videoBox.$el.style.height = res.windowWidth + "px";
    								that.$refs.videoBox.$el.style.position = "fixed";
    								that.$refs.videoBox.$el.style.top = top + "px";
    								that.$refs.videoBox.$el.style.left = -top + "px";
    								that.$refs.videoBox.$el.style.transform = "rotate(90deg)";
    								that.ComedyScreenStatus = true;
    							}
    						}
    					});
    				});
    			}
    			if (!status) { 
    			//退出全屏，或者竖屏进入的方法
    				this.$nextTick(function() { 
    					let that = this;
    					uni.getSystemInfo({ 
    						success: function(res) { 
    							console.log(that.$refs.videoRef, that.$refs)
    							that.$refs.videoRef.$el.style.width = "100%";
    							that.$refs.videoRef.$el.style.height = "211px";
    							that.$refs.videoRef.$el.style.position = "relative";
    							that.$refs.videoBox.$el.style.width = "100%";
    							that.$refs.videoBox.$el.style.height = "211px";
    							that.$refs.videoBox.$el.style.position = "fixed";
    							that.$refs.videoBox.$el.style.top = "0px";
    							that.$refs.videoBox.$el.style.left = "0px";
    							that.$refs.videoBox.$el.style.transform = "rotate(0deg)";
    							that.ComedyScreenStatus = false;
    							that.left = false
    						}
    					});
    				});
    			}
    		},
    	}

--------------------

# 总结 #

效果很差，微信公众号自带的导航栏，遮不住，好像也要去开启横屏模式？所以写了个寂寞，拿去看看就好，用这个写出来甲方那边应该也不同意，真的越写越自闭，所以在线等解决方案  
欢迎大家评论交流。