uniapp 中 H5端 使用 video 使其全屏横屏播放

起因： H5端 uniapp 提供的 video 组件，在点击其全屏按钮后，进入全屏状态，视频显示部分仍然为竖屏显示，无法转换成横屏，查阅了大量的资料。

• 官方人员说 H5端不支持 了解详情
• 但是客户提出来了就要想办法解决
  解决方案：
• 自定义 video 组件，不使用官方组件
• 使用 css 进行样式修改强制 横屏

就有了第一版

• 获取video标签，对齐进行css样式修改… 简单粗暴
• 需要把video原生带的全屏隐藏掉(有这个属性show-fullscreen-btn改成false就可以了)，自己再写一个全屏展示的按钮…

  let el = document.getElementById('myVideo');
				el.style.width = '100vh';
				el.style.height = '100vw';
				el.style.position = 'absolute';
				el.style.top = '0';
				el.style.left = '0';
				el.style.zIndex = 999;
				let w = document.documentElement.clientWidth || document.body.clientWidth;
				let h = document.documentElement.clientHeight || document.body.clientHeigth;
				let cha = Math.abs(h - w) / 2;
				el.style.transform = 'translate(-' + cha + 'px,' + cha + 'px) rotate(90deg)';

看起来是全屏了，但是和视频自带的全屏有区别啊，浏览器自带的标题部分没有被遮挡，看起来有点别扭。不出意外，客户又找来了，说 视频放大横屏后有白边，去掉白边。
这可怎么是好，这 css 怎么把浏览器给覆盖掉啊，没有程序员解决不了的问题，我突然想到F11 ，想出来一种方案。

• 点击自己设置的全屏键后，触发浏览器进入全屏事件，然后对视频进行旋转。
• 在我测试的时候，发现，安卓机可以正常按照上面的流程走，苹果机有点问题，我直接判断了一下手机系统，只有安卓机才按照上面的流程走，苹果机使用原生全屏，因为，苹果机会把视频进行截取使用自带的播放器，自带的播放器是可以全屏横屏播放的。
• 在实际测试中，只需要触发全屏事件就可以了，触发全屏事件后，视频会自动旋转为横屏模式（注意隐藏掉除了video之外，其他的样式结构）

// 记录手机系统
uni.getSystemInfo({
	success: (item) => {
		this.phoneSystem = item.platform;
	}
})
	
  // 进入全屏 
  const dom = document.documentElement;
  var rfs = dom.requestFullScreen || dom.webkitRequestFullScreen || dom.mozRequestFullScreen || dom
    .msRequestFullscreen;
  if (typeof rfs != "undefined" && rfs) {
    rfs.call(dom);
  };
          
  // 退出全屏
  const el = document,
    cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el
    .exitFullScreen,
    wscript;
  if (typeof cfs != "undefined" && cfs) {
    cfs.call(el);
  }

• 后来，客户对我自己写的全屏按钮不满意，说 视频横屏键颜色再亮一点，横屏键放到右下角与其他播放器一致，因为大家习惯了 (内心os:这个客户真的是*********…,每天提一个小需求,就不能一块提完???)
• 又了解到了 shadow DOM ,好像 vue3 的 挂载结点也支持这种（string,element,shadow dom）. 大致意思就是，把一些dom结构和样式进行了一个封装，然后将其挂载到一个元素上，浏览器结构中不会显示它的内部结构。video、audio、input 等一些标签就是使用了这种样式进行了封装。可以通过设置 浏览器控制台的选项将其显示出来，这样，我们就对 video 样式进行了解了，再进行修改就简单了。
• 了解 shadow DOM 请点击这里