最近需要实现h5 视频全屏也就是横屏,横屏后需要将相关视频展现在侧边栏。考虑到h5是不能让手机强制横屏的,只能考虑用css 样式上横屏显示video

思路就是--利用position:fixed 定位,对于视频容器元素 transform 旋转90deg,容器的宽高调整为如下

position: fixed;
left: 0;
top: 0;
width: 100vmax;
height:100vmin;
transform-origin: top left;
transform: rotate(90deg) translateY(-100vmin);
z-index: 100000;

但是遇到一个问题,就是旋转后,video 与自己写的进度条和播放控件都会备视频遮盖,video的层级为最高,也试了单独对video旋转,不会有这种现象。只要是在父元素下transform 就会出现video 层级问题。后面百度后的 解决方案是

还是在父元素下transform,然后在播放控制条下加 transform: translateZ(100px),试了下没问题。

显示问题解决了,但还有一个问题,就是横屏后,在不同的手机浏览器上元素有部分会被遮挡,原因就是100vmax 可能不准确 会把底部和头部的距离算上。后面解决方案就是,用js 获取文档的高度和宽度进行赋值。

const w = document.body.clientWidth;
const h = document.body.clientHeight;
document.getElementsByClassName('player-fulled')[0].style.width = h + 'px';
document.getElementsByClassName('player-fulled')[0].style.height = w + 'px';

还需要处理若用户手机自己横屏后,去除我们自己写的横屏样式 

去除宽高的设定
document.getElementsByClassName('player-fulled')[0].removeAttribute('style');
样式上
transform: none;
width: 100% !important;
height: 100% !important;
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐