如果res.deviceOrientation 等于landscape 的話是豎屏，portrait則是橫屏。因為用戶每旋轉一次屏幕就會觸發里面的onShow鉤子，因此在頁面顯示或橫豎屏變化都會觸發這函數，來判斷是否是橫豎屏；

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

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

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

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

uniapp 獲取當前頁面路由：

xxxx =this.$mp.page.route;

解決H5項目video標簽橫屏播放視頻高度異常問題（出現垂直滾動條）。

給父組件設置 width: 100vw; height: 100vh; 給video標簽設置 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; // 這個是解決video 底部有一絲白邊問題。}}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。