蘑菇短视频刚装好横竖屏从不稳定到很稳：我只做了两步

蘑菇视频962026-04-08 12:10:02

刚给站点装上蘑菇短视频插件，开开心心上传了几条竖屏和横屏素材，结果手机一横一竖就抖动、拉伸、画面裁切不对，用户体验一塌糊涂。折腾半天我只做了两步，稳定性立刻上来了，下面把实战做法和可复制的代码片段都写清楚，直接拿去用就行。

问题概述（一句话）多数不稳定是因为容器尺寸和播放器自适应冲突，加上设备方向变化时没有平滑过渡或重置尺寸，导致视频被拉伸或位置错位。

我做的两步 1) 用“固定比例 + 自适应填充”的容器锁定视频展示框架将视频放在一个按比例固定的容器里（比如 9:16 或 16:9），容器随屏幕宽度缩放，但保持比例不变。这样无论横竖屏切换，播放器的外框始终稳定，不会因为父容器瞬间变化而导致视频重绘错乱。关键 CSS 要点：

.container { width: 100%; max-width: 100%; position: relative; padding-top: 177.78%; /* 9:16 的比率：16/9=1.7778 -> 177.78% / overflow: hidden; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .container video, .container iframe { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); object-fit: cover; / 或 contain，按需求选择 */ will-change: transform; }

说明：padding-top 技巧保证了容器高宽比固定，object-fit 保证画面填充方式可控，不会被拉伸成怪形状。

2) 捕获方向/尺寸变化，平滑重置播放器而不是硬刷新手机旋转触发很频繁，直接重载或立即强制改变样式会让动画抖得更严重。我的做法是：监听 resize/orientationchange，使用防抖（debounce）等待旋转结束 200–300ms，再触发一次播放器的尺寸重置或重绘。关键思路是“暂停 → 保存当前进度 → 调整尺寸 → 恢复播放”。

简单 JS 示例（纯原生）： let resizeTimer; function adjustPlayer() { const video = document.querySelector('.container video'); if (!video) return; const current = video.currentTime || 0; const wasPlaying = !video.paused; video.pause(); // 根据当前容器宽高选择展示方式 // 例如横屏时优先展示宽度，竖屏优先展示高度 // 这里可以做更复杂的逻辑或调用第三方播放器的 resize 方法 setTimeout(() => { video.currentTime = current; if (wasPlaying) video.play().catch(()=>{}); }, 50); } window.addEventListener('resize', ()=> { clearTimeout(resizeTimer); resizeTimer = setTimeout(adjustPlayer, 250); }); window.addEventListener('orientationchange', ()=> { clearTimeout(resizeTimer); resizeTimer = setTimeout(adjustPlayer, 250); });

额外优化与排查清单（实用小贴士）