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

---

前言

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

---

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

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

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

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

二、在里就奉上代码

H5的代码

<view class="video-box" ref="videoBox">
			<video class="video" id="myVideo" controls :src="itemInfo.url" :poster="itemInfo.bgUrl"
				style="object-fit:fill">
			</video>
			<view class="ComedyScreenBox">
				<!-- 全屏按钮 -->
				<view class="ComedyScreen" @click.stop="ComedyScreen(1)" v-show="!ComedyScreenStatus">
					<image src="../../../static/images/index/screen.png" mode=""></image>
				</view>
				<!-- 退出全屏按钮 -->
				<view class="ComedyReturn" @click.stop="ComedyScreen(0)" v-show="ComedyScreenStatus">
					<image src="../../../static/images/index/screen1.png" mode=""></image>
				</view>
			</view>
		</view>

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);
}

js

	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
						}
					});
				});
			}
		},
	}

---

总结

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