HTML5视频方向旋转与全屏适配的核心是优先用FFmpeg写入rotation元数据实现语义级校正，而非CSS transform；全屏需结合iOS专属属性、事件监听与布局控制，确保弹幕、控件、尺寸计算正常。
HTML5 中 video 视频的方向旋转和全屏适配，核心在于区分“视觉旋转”和“元数据校正”——前者是 CSS 层的临时翻转，后者才是浏览器真正认可的、不影响弹幕、控件、尺寸计算的可靠方式。全屏适配则需兼顾 iOS 强制横屏行为、viewport 设置、播放器属性与事件监听。下面分三类关键场景说明：
用元数据修正原始方向（推荐首选）
手机拍摄的竖屏视频（尤其 iOS），常只靠 QuickTime 元数据记录旋转角度，但未写入标准 MP4 的 tkhd 或 avcC box，导致网页播放器无法自动校正。此时应优先用 FFmpeg 重写 rotation 标记：
- 检查当前标记：
ffprobe -v quiet -show_entries stream_tags=rotate -of default=nw=1 input.mp4，若无输出或为rotate=0，说明浏览器不会自动旋转 - 无损写入 90° 旋转（不重编码）：
ffmpeg -i input.mp4 -c:v copy -c:a copy -metadata:s:v:0 rotate=90 output.mp4 - 若为 HEVC 编码且无效，改用软编码重写：
ffmpeg -i input.mp4 -c:v libx265 -c:a copy -metadata:s:v:0 rotate=90 output.mp4 - 验证是否生效：Chrome / Safari 播放时，
video.videoWidth和video.videoHeight会自动交换，弹幕、全屏、控件全部正常
移动端强制竖屏全屏（绕过 iOS 自动横屏）
iOS 点击全屏按钮默认按设备物理方向切换，竖屏视频会被拉伸或压扁。不能靠 CSS rotate 补救（会破坏控件坐标），而应结合属性 + 事件 + 布局控制：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 在
<video></video>上添加：playsinline="true" webkit-playsinline x5-video-player-type="h5" x5-video-orientation="portrait" - 监听进入/退出全屏事件，动态加 class 控制布局：
video.addEventListener('webkitbeginfullscreen', () => video.classList.add('force-portrait'))video.addEventListener('webkitendfullscreen', () => video.classList.remove('force-portrait')) - CSS 中定义：
.force-portrait { position: fixed; top: 0; left: 0; width: 100vh; height: 100vw; transform: rotate(90deg); transform-origin: center; }
注意：该 class 仅用于全屏状态，且必须配合object-fit: contain防止裁切
避免 transform 旋转引发的常见问题
直接对 <video></video> 设置 style.transform = 'rotate(90deg)' 是最易出错的方式——它只是“看起来转了”，但底层尺寸、坐标、交互区域全没变：
立即学习“前端免费学习笔记（深入）”；
- 弹幕定位失效：B站等平台的弹幕系统依赖
video.getBoundingClientRect()，旋转后坐标系错乱，弹幕飞出屏幕 - 全屏后画面偏移：浏览器仍按原始宽高申请全屏画布，旋转后只占左上角四分之一
- 右键菜单、倍速条、进度提示框全部错位，因为它们的 DOM 位置计算未同步 transform
- 若必须用 transform（如特殊动效），务必同时设置：
transform-origin: center+object-fit: cover+ 显式宽高容器约束，否则黑边/溢出不可避免
本质上，旋转不是样式问题，而是媒体语义问题。元数据修正 + 平台特性适配，比任何前端 hack 都更稳定、轻量、可维护。
