蘑菇视频官网后台播放时横竖屏别怕：最常见原因就这7个
蘑菇视频官网后台播放时遇到横屏/竖屏显示不对？别怕——这类问题很常见，背后通常只有几类原因。下面把最常见的7个原因列出来，并给出可执行的排查与解决办法，方便后台管理员、产品或运营快速定位并修复。
开场提醒
- 先在多台设备、不同浏览器和清除缓存后重试，能排掉很多假象问题。
- 若是线上预览与实际文件不一致，优先核对上传文件本身（本地播放器播放是否正常）。
7个最常见原因（含解决办法）
1) 视频文件里的旋转元数据（rotate/EXIF）被保留但播放器不识别
- 原因：手机拍摄会写入旋转标记（MP4里的rotate atom或MOV的EXIF），有的后台播放器会忽略或错误处理，导致画面看起来横竖错位。
- 解决：用 ffmpeg 修正旋转，一种是移除元数据并物理旋转帧：ffmpeg -i in.mp4 -vf "transpose=1" -c:a copy out.mp4；另一种是将 rotate 标记清零并拷贝：ffmpeg -i in.mp4 -c copy -metadata:s:v:0 rotate=0 out.mp4。上传前统一处理或在转码环节加旋转过滤。
2) 后台/预览播放器本身不支持或配置不当
- 原因：不同视频播放器（自研、Video.js、JWPlayer 等）对旋转元数据支持差异，或播放器设置了拉伸/裁剪策略。
- 解决：升级播放器到支持旋转元数据的版本，检查播放器参数（objectFit、aspectRatio、stretchMode 等），必要时在播放器初始化时强制按元数据旋转或按容器自适应显示。
3) CSS 或响应式布局把宽高强行拉伸
- 原因：后台预览容器使用了固定宽高、transform、或 object-fit: cover 导致画面被裁剪或拉伸成“横/竖屏错觉”。
- 解决：将视频元素设置为 max-width:100%; height:auto; 或使用 object-fit: contain 保持比例；避免在容器上使用 rotate/scale 的 CSS，若必须旋转，用 transform-origin 配合矫正。
4) 转码模板或清晰度切片处理错误
- 原因：自动转码流程在不同清晰度或分片时没有保留方向信息，或转码时未应用旋转过滤。
- 解决：检查转码模板，确保转码命令包含处理旋转的 filter（如 transpose）或保留 rotate 元数据。对转码后文件做抽样验证。
5) 缓存与 CDN 导致旧预览仍被展示
- 原因：文件替换后 CDN 或浏览器缓存旧文件或缩略图，后台展示仍为旧版方向。
- 解决：在文件更新后清理 CDN 缓存或对资源使用版本号（?v=时间戳），强制刷新缩略图与预览资源。
6) 后台嵌入 iframe 或跨域展示时样式/尺寸被父页面影响
- 原因：后台管理页如果用 iframe 嵌入播放器，父页面的 CSS 或缩放策略可能影响子页面渲染。
- 解决：确保 iframe 的宽高与子页面一致，移除影响样式的父级 transform，或通过 postMessage 传参让子页面自适应父容器。
7) 终端设备或浏览器锁定方向 / 特殊平台差异
- 原因：手机浏览器的横竖屏锁定、iOS Safari 对旋转元数据处理与 Android 不同，或桌面浏览器硬件加速差异。
- 解决：在不同机型/浏览器上做兼容性测试；提示用户解除屏幕锁定测试；对常见平台单独调整展示策略（例如为 iOS 提供特定播放器设置）。
快速排查清单（步骤化）
- 本地播放验证：在 VLC 或本地播放器确认原始文件方向正常。
- 清缓存/换浏览器：排除缓存或浏览器差异。
- 查看文件元数据：使用 ffprobe 查看 rotate/EXIF 标记。
- 在后台用不同播放器或临时替换播放器组件测试。
- 检查转码日志与模板，确认是否应用旋转处理。
- 清理 CDN 缓存并强制刷新缩略图。
- 若定位到播放器或 CSS，按上文建议调整 object-fit/容器尺寸或播放器参数。
上传与转码推荐设置（便于降低问题发生率）
- 竖屏优先分辨率：1080x1920；横屏：1920x1080。
- 容器/编码：MP4 (H.264)、音频 AAC。
- 在导出时避免仅依赖元数据旋转（优先物理旋转帧或保持统一导出朝向）。
- 转码模板中加入对 rotate 的处理或显式设定输出宽高与像素纵横比。
