如果res.deviceOrientation 等于landscape 的話是豎屏，portrait則是橫屏。因?yàn)橛脩裘啃D(zhuǎn)一次屏幕就會觸發(fā)里面的onShow鉤子，因此在頁面顯示或橫豎屏變化都會觸發(fā)這函數(shù)，來判斷是否是橫豎屏；

onShow(){uni.onWindowResize(res => {// portrait 豎屏 landscape 橫屏 將狀態(tài)值存儲到這個(gè)this.landscape變量中 this.landscape = res.deviceOrientation === 'landscape';}); }

解決微信小程序video組件全屏播放視頻遮蓋自定義播放控件問題

關(guān)于這個(gè)問題我也試過很多種方法，基本都是沒啥作用。 目前我只知道一種方法，就是直接將自定義視頻播放控件/要在展示在視頻上面的內(nèi)容 直接定義在 video標(biāo)簽里面。

<video> 直接將要在視頻上面展示的內(nèi)容 定義在這里即可（這樣寫可能會報(bào)錯(cuò)-渲染層錯(cuò)誤，但是不影響功能） </video>

uniapp 獲取當(dāng)前頁面路由：

xxxx =this.$mp.page.route;

解決H5項(xiàng)目video標(biāo)簽橫屏播放視頻高度異常問題（出現(xiàn)垂直滾動條）。

給父組件設(shè)置 width: 100vw; height: 100vh; 給video標(biāo)簽設(shè)置 width: 100%; height: 100%; object-fit: fill;
我這里只需要橫屏播放，所以沒有做其他處理，這樣寫豎屏播放樣式會有問題。

.videoMian {position: relative;box-sizing: border-box;padding: 0;width: 100vw;height: 100vh;// height: calc(100% - 57px);video {width: 100%;object-fit: fill;height: 100%;display: block; // 這個(gè)是解決video 底部有一絲白邊問題。}}

總結(jié)

以上是生活随笔為你收集整理的uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。