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，用于用户请求的文档格式转换。

下载

• 在 上添加：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 旋转引发的常见问题

直接对 设置 style.transform = 'rotate(90deg)' 是最易出错的方式——它只是“看起来转了”，但底层尺寸、坐标、交互区域全没变：

• 弹幕定位失效：B站等平台的弹幕系统依赖 video.getBoundingClientRect()，旋转后坐标系错乱，弹幕飞出屏幕
• 全屏后画面偏移：浏览器仍按原始宽高申请全屏画布，旋转后只占左上角四分之一
• 右键菜单、倍速条、进度提示框全部错位，因为它们的 DOM 位置计算未同步 transform
• 若必须用 transform（如特殊动效），务必同时设置：transform-origin: center + object-fit: cover + 显式宽高容器约束，否则黑边/溢出不可避免

本质上，旋转不是样式问题，而是媒体语义问题。元数据修正 + 平台特性适配，比任何前端 hack 都更稳定、轻量、可维护。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！