h5 视频全屏-横屏实现，遇到问题以及解决方案-Toy模板网

这篇具有很好参考价值的文章主要介绍了h5 视频全屏-横屏实现，遇到问题以及解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近需要实现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 层级问题。后面百度后的解决方案是

h5 video 全屏横屏,前端页面,vue ,css,css3,前端

还是在父元素下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';

还需要处理若用户手机自己横屏后，去除我们自己写的横屏样式文章来源地址https://www.toymoban.com/news/detail-542187.html

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

到了这里，关于h5 视频全屏-横屏实现，遇到问题以及解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！