uniapp ios video 全屏问题

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); // 转换写法
}