蘑菇影视官网后台播放时横竖屏排查10步：从1到10不绕弯

蘑菇影视官网后台播放时横竖屏问题排查：一步一步到位的 10 步指南（从 1 到 10 不绕弯）

简介 很多时候后台播放遇到视频横屏/竖屏显示异常，不是单一原因导致。下面给出一套可直接实操的 10 步排查流程，覆盖前端、播放器配置、视频文件元数据、转码流程、移动端 webview 与 CDN 缓存等常见环节。按顺序做，快速定位并修复问题。

1. 复现并记录环境

• 在问题设备上重现（手机型号、系统版本、浏览器/APP 内置 webview、是否微信/QQ/支付宝内置浏览器）。
• 记录播放时是否进入全屏、是否横屏自动翻转、是否仅在后台/前台出现。
• 收集 URL、播放时间、播放器类型（HTML5 video、Video.js、hls.js 等）。

为什么：先确认复现条件，避免盲修。

2. 本地用浏览器开发者工具复现

• 用 Chrome 的设备仿真（或真机通过 chrome://inspect）和 Safari Web Inspector（iOS）调试。
• 查看 console、Network（尤其 m3u8 / mp4 请求）、响应头（Content-Type、Accept-Ranges）。
• 在控制台执行 document.querySelector('video') 查看 video 属性（width/height、videoWidth/videoHeight、currentSrc）。

收获：确认是否前端 CSS/JS 导致尺寸或旋转变换。

3. 检查 HTML 与 CSS 基础属性

• 确保 video 标签有响应式设置：width:100%; height:auto; object-fit:contain/cover 根据需求选择。
• 若使用容器，请确认容器没有固定高度或 transform/rotate 样式影响。
• 示例 CSS： .video-container{width:100%;height:auto;background:#000} video{width:100%;height:auto;object-fit:contain}
• 如发现 transform: rotate(…)，排查是否是历史兼容方案残留。

3. 检查播放器配置与属性（移动端要点）

• 给 video 标签加上 playsinline、webkit-playsinline、muted（必要时），防止 iOS 强制全屏播放。
• 针对腾讯 X5 内核，可尝试 meta 与属性：
• video 上可加 x5-playsinline、x5-video-player-type="h5"
• 如果使用第三方播放器（Video.js、hls.js、flv.js），确认是否有 fullscreen、rotation、nativeControlsForTouch 等配置项影响。

3. 检查视频文件的旋转元数据（rotate tag）

• 有些手机拍摄的视频在容器内用 rotate 标记，播放器/浏览器行为不一致。
• 用 ffprobe 检查： ffprobe -v error -showentries streamtags=rotate -of default=noprint_wrappers=1:nokey=1 input.mp4
• 修复方式：
• 直接清除或重写 rotate 标记（如果播放器支持）：ffmpeg -i in.mp4 -c copy -metadata:s:v:0 rotate=0 out.mp4
• 更可靠的做法是重新转码并物理旋转帧：ffmpeg -i in.mp4 -vf "transpose=1" -c:a copy out_fixed.mp4

3. 检查转码/转封装链路与自动化任务

• 如果有自动转码（FFmpeg、Zencoder、云转码），确认转码参数是否保留原始 rotate tag。
• 针对多分辨率/码率（HLS/DASH），确保各分辨率都正确处理元数据并重新封装。
• 检验新版文件是否替换旧版时是否忘记刷新 CDN 缓存（下面第 9 步）。

3. 测试不同传输与容器格式

• 直接用 mp4 源播放与 HLS（m3u8）播放做对比，观察差异。
• 某些浏览器对 mp4 rotate 标记支持不同，MSE + transmux（如 hls.js）通常读取帧方向更稳。
• 若问题仅在某些浏览器/内核出现，优先按该平台的最佳实践调试。

3. 客户端事件与 JS 动态处理

• 监听 orientationchange / resize / screen.orientationchange，动态调整容器样式： window.addEventListener('orientationchange', function(){ /* 调整 video 容器或添加旋转类 */ });
• 读取 video.videoWidth、video.videoHeight，在 loadedmetadata 事件后根据宽高比例判断是否需要强制旋转或切换 CSS。

3. CDN、缓存与头信息检查

• 确认替换过的视频文件已在源站正确更新，CDN 缓存是否未过期导致旧文件仍生效。
• 检查响应头：Content-Type、Accept-Ranges（支持断点）、Content-Length。错误 MIME 可能影响播放。
• 如用加速域名，临时绕过 CDN 直接请求源站验证。

3. 归档日志、回滚与长期修复建议

• 将复现记录、ffprobe 输出、浏览器 console 日志和出问题的文件示例归档，便于后续恢复和沟通第三方厂商。
• 临时修复：对已有问题视频批量运行 ffmpeg 重新转码或清除 rotate，并刷新 CDN。
• 长期方案建议：
• 在上传环节做自动检测并统一转码（去除 rotate，标准化分辨率与方向）。
• 在播放器层面统一使用支持 MSE 的方案并统一 fallback。
• 在各类内置浏览器上做兼容测试并记录特性表（哪些内核需要 meta 或 x5 属性）。

快速故障自检清单（发布前可粘贴）

• 能否在 Chrome / Safari 真机复现？ 是 / 否
• video 元数据 rotate 值：有 / 无（用 ffprobe 检查）
• 前端 CSS/transform 是否干扰：有 / 无
• 使用的播放器：原生 / Video.js / hls.js / 其他
• 是否在特定内置浏览器出问题（微信/QQ/支付宝）：是 / 否
• CDN 是否已刷新：是 / 否

结语 按这 10 步逐项排查，大多数后台播放的横竖屏问题都能定位到根源并给出可执行的修复（无论是前端样式、播放器配置，还是视频元数据/转码链路问题）。如果手头有具体的一个出问题的视频文件或浏览器日志，提供给我（或团队）可以更快给出精确修复命令和代码片段。

• 喜欢（11）
• 不喜欢（2）