起因: 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