uniapp live-player橫屏功能筆記

需求背景：點選全屏按鈕使得原本豎屏的直播變成橫屏狀態，並在橫屏中顯示自定義的控制元件。
這裡的需求是點選按鈕進行全屏翻轉，而不需要做監聽翻轉，所以方法相對簡單一些。

開發核心點

如何橫屏？

一開始我有以下兩種方向

• uni.createLivePlayerContext()
• orientation：horizontal

第一種就是建立live-player上下文livePlayerContext物件，如同video的全屏一樣，會鋪滿整個螢幕，並覆蓋原來頁面上的東西。
第二種則是live-player元件的屬性orientation，設定畫面方向，可以將畫面直接變成橫向播放，不會有覆蓋的問題

最終選擇了第一種，使用livePlayerContext進行全屏，考慮的點也有兩個：

• 橫屏之後面上的控制元件是不同的展示控制元件，與豎屏是相差較多，所以打算重新寫佈局
• 使用屬性將畫面橫屏的話，檔案流是沒有翻轉的，覆蓋在上面的控制元件就會比較難寫

如果說是做小程式的頁面自動翻轉，檔案流是會翻轉的，但是目前我處理的業務並不符合這個要求，所以我選擇了更快速的方案

全屏展示的元件

關於全屏之後的這個控制元件，也有幾個坑：

• 標籤覆蓋問題
• 單位問題

標籤覆蓋問題

live-player全屏之後，同級的元素是會被覆蓋的，就算是使用cover-view也無法顯示，所以需要全屏時顯示控制元件，只能寫在live-player標籤的內部。

<live-player>
      <view>內部標籤全屏時會顯示</view>
</live-player>
<view>外部標籤在全屏時不會顯示</view>
<cover-view>外部標籤cover-view在全屏時不會顯示</cover-view>

單位問題

在開發時主要使用了rpx作為主要單位進行佈局，然而豎屏的時候是正常的，在橫屏的時候這個元素的寬高就會被拉伸，主要是感覺被橫向拉長了，這應該能推測出rpx的計算跟螢幕尺寸是有關的，並不是固定的。
解決這個問題也有兩個方案：

• 使用px作為單位進行佈局，這樣佈局不會因為螢幕的翻轉而改變大小，我主要是在重新編寫橫屏控制元件時使用了px進行佈局。
• 使用vmin對元素寬高進行動態轉換。主要是用來複用原本用rpx編寫好的元件，將元件內的rpx單位轉為vmin，則可以橫豎屏通用。vmin這個單位是取相對於視口的寬度或高度中較小的那個，所以無論橫豎都會是相同的。
  將rpx轉換成vmin單位我使用了scss的函式進行轉換，公式如下：

@function toVmin($rpx){
      @return #{$rpx * 100 / 750}vmin
}
.redpack{
      // width: 355rpx;  // 原本寫法
      width: toVmin(355); // 轉換寫法
}