uniapp B站iframe嵌入APP及视频全屏不横屏问题处理 Android端-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp B站iframe嵌入APP及视频全屏不横屏问题处理 Android端。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题：视频界面能进入全屏，但视频不横屏

方法一：视频界面设置允许横屏，手机竖屏锁定取消。（未采用）

效果及问题：全屏后，手机横屏后，视频会横屏。但取消全屏后，视频界面还是横屏着，体验不太好。

# pages.json文件

# 对应界面设置允许横屏 "pageOrientation": :"auto"
{
    "path" : "xxxx/video",
	"style": {
		"navigationBarTitleText": "视频详情",
		"enablePullDownRefresh": true,
		"pageOrientation": "auto",
		"app-plus": {
			"bounce": "none", 
			"titleNView": {
			    "titleAlign":"left"
		    }
	     }
     }
},

方法二：视频界面设置允许横屏，通过onResize监听窗口尺寸变化(全屏生效时，标题栏会隐藏，导致窗口高度会增加；退出全屏时，标题栏会出现，导致窗口高度会减小)，将界面强制设置横屏或竖屏。(采用)

效果及问题：手机竖屏锁定激活也能横屏，取消全屏后会回到竖屏。只适用于Android 端，iOS要使用其他方案，测试用的是Android 12。

# pages.json文件
#同上

# 视频详情文件video.vue
<template>
	<view class="videoPage">
		<iframe
		class="video"
		id="videoIframeId"
		:src='`https://${dtlData.videoUrl}`'
		frameborder="no"
		scrolling="no"
		border="0"
		framespacing="0"
		allowfullscreen="true"
		></iframe>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				dtlData: {
					videoUrl: 'player.bilibili.com/player.html?aid=230937449&bvid=BV1c8411Q7Gd&cid=1196481814&page=1',
				},
				initHeight: 0,
				onceFlag: true,
				landscapeInitHeight: 0,
				landscapeOnceFlag: true,
			}
		},
		onLoad(options){
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary');
			// #endif
		},
		// 监听窗口尺寸变化
		onResize(e) {
			// return
			// 总共会出现4种窗口高度
			// 竖屏时高度(例如: 799)  全屏竖屏时高度(815，隐藏了页面标题部分)  全屏横屏时高度(313)  退出全屏横屏时高度(297，露出了页面标题部分)

			// #ifdef APP-PLUS
				const windowHeight = e.size.windowHeight // windowHeight不包含NavigationBar和TabBar的高度（即不包含状态栏、页面标题部分外的高度）
				// 首次进入竖屏界面时需记录一下 窗口高度(竖屏时高度)
				if (this.onceFlag) {
					this.onceFlag = false
					this.initHeight = windowHeight
				}

				const deviceLandscapeFlag = e.deviceOrientation === 'landscape'
				// 首次进入全屏(横屏)时记录一下 窗口高度(全屏横屏时高度)
				// 进行竖屏-->横屏的动作时，高度变化 799-->815-->313
				if (this.landscapeOnceFlag && deviceLandscapeFlag) {
					this.landscapeOnceFlag = false
					this.landscapeInitHeight = windowHeight
				}
				console.log(windowHeight, this.initHeight, this.landscapeInitHeight, 77);
				// windowHeight === this.initHeight  当前窗口高度 === 初始竖屏窗口高度 则表示进入了竖屏状态
				// deviceLandscapeFlag && windowHeight < this.landscapeInitHeight  为退出全屏横屏状态(即露出了页面标题部分，高度：313-->297)
				if (windowHeight === this.initHeight || (deviceLandscapeFlag && windowHeight < this.landscapeInitHeight)) {
					plus.screen.lockOrientation('portrait-primary');
					return
				}
				plus.screen.lockOrientation('landscape-primary'); //锁定横屏
			// #endif
		},
		onUnload(){
			// #ifdef APP-PLUS
			plus.screen.lockOrientation('portrait-primary'); //锁死屏幕方向为竖屏
			// #endif
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
.videoPage {
	position: relative;
	padding-bottom: 70%;
}
.video {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
</style>

部分效果图：

uniapp控制iframe的video,uni-app,android