|
起因： 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 请点击这里
|