问题:视频界面能进入全屏,但视频不横屏
方法一:视频界面设置允许横屏,手机竖屏锁定取消。(未采用)
效果及问题:全屏后,手机横屏后,视频会横屏。但取消全屏后,视频界面还是横屏着,体验不太好。
# 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>
部分效果图: