蘑菇短视频播放中横竖屏我整理了10个场景对应解法

短视频平台同时承载竖屏短片与横屏短片时，播放体验和页面展示容易出现横竖不适配、黑边、画面被裁切、旋转错误、全屏异常等问题。下面按常见场景列出解决办法，覆盖创作者端、站点嵌入与前端播放器三类实操方案，方便直接落地处理。

1) 场景：手机竖屏拍的视频在页面上被横向显示或被旋转了90° 解决方案：

原因通常是视频文件中带有旋转元数据（rotate/EXIF），播放器不解析或忽略该元数据。
创作者端：用手机相册或简单转码工具清除或应用旋转元数据（例如 iOS“编辑”->旋转并保存）。
服务端/转码：用 ffmpeg 统一处理：
保留方向标注：ffmpeg -i in.mp4 -c copy -map 0 out.mp4（不改变像素，通常保留旋转标记）
应用旋转并写回像素（消除旋转标记）：ffmpeg -i in.mp4 -vf "transpose=1" -c:a copy out_rotated.mp4（transpose 参数按需要选择）
网页端临时方案：当无法修改文件时，使用 CSS/JS 在播放器容器上做 rotate(90deg) 并调整宽高，但推荐走转码以避免性能问题和模糊。

2) 场景：竖屏视频左右两侧出现黑边（pillarbox），画面未铺满全屏造成体验割裂解决方案：

3) 场景：横屏视频竖屏播放（被裁切或放大导致画面丢失）解决方案：

检测视频宽高比，若与容器方向不符，提供切换按钮（“观看横屏版”）或自动弹出横屏全屏提示。
在移动端可以尝试使用 Screen Orientation API 请求切换：screen.orientation.lock('landscape')（需处理不支持或被浏览器拒绝的情况并提供提示）。
始终给用户提供手动切换或旋转提示，避免强制改变用户设备设置。

4) 场景：切换横竖屏时播放器重置、进度丢失或出现卡顿解决方案：

原因多为 DOM 重建或视频重新加载。避免在切换方向时销毁视频元素。
用 CSS 处理布局切换（改变容器宽高和 transform），保持同一个 video 元素，不重新设置 src。
若必须重新加载，先保存 currentTime 并在重载后 seek 回去：let pos = video.currentTime; loadNew(); video.onloadedmetadata = () => video.currentTime = pos;

5) 场景：嵌入在 Google 网站/iframe 中，横竖屏适配不灵活，iframe 固定比例导致裁切解决方案：

6) 场景：字幕/水印在竖屏显示时被遮挡或位置错位解决方案：

7) 场景：不同设备自动旋转行为不一致（Android 与 iOS、不同浏览器差异）解决方案：

遵循渐进增强：优先用 CSS/HTML 做展示，利用 JS 检测 window.orientation 或 Screen Orientation API 提供更好交互。
检测并提示：若设备锁定方向或浏览器不支持锁定，显示简短提示（“请将设备横置以获得更好观看体验”）并提供手动切换按钮。
针对 iOS WebKit，添加 playsinline、webkit-playsinline 属性避免自动全屏导致旋转差异。

8) 场景：直播或流媒体中横竖屏切换产生分辨率/编码冲突导致卡顿和画质骤降解决方案：

9) 场景：编辑时导出横竖屏尺寸混乱，上传后平台裁切不一致解决方案：

10) 场景：用户在锁定旋转模式下观看，想要手动切换为横屏或竖屏解决方案：

额外实用命令与片段（供开发者直接使用）

ffmpeg 旋转并重编码示例（顺时针 90°）： ffmpeg -i input.mp4 -vf "transpose=1" -c:v libx264 -crf 18 -c:a copy output.mp4
ffmpeg 清除 rotate 元数据（保留像素方向）： ffmpeg -i input.mp4 -c copy -metadata:s:v:0 rotate=0 output.mp4
HTML/CSS 视频容器基础（思路）：
container 使用 aspect-ratio 或 padding-top 技巧保证响应式；
video { width:100%; height:100%; object-fit: contain; }（或 cover 根据需求）
简单的方向请求（有兼容性限制）： try { await screen.orientation.lock('landscape'); } catch(e) { /* 提示用户手动旋转或降级处理 */ }

结语：快速检查清单（发布前逐项过一遍）