HTML5 标签需手动补全 controls、preload="metadata"、poster 属性，且 MP4 必须用 H.264 Baseline Profile 和 48kHz AAC 编码；嵌第三方视频须用响应式 iframe 容器并添加 allow 属性。
HTML5
绝大多数所谓“HTML5可视化编辑器”（如 GrapesJS、Webflow、Pinegrow 或国内的易企秀/上线了）仅提供拖拽插入 元素的能力，但不会自动处理跨域、格式兼容、备用方案等关键问题。你看到的“插入视频”按钮，本质只是生成一个空壳标签，后续必须手写属性或补 JS 控制逻辑。
- 默认插入的
往往缺controls、preload、poster，播放体验差 - 不校验视频路径：本地文件路径（
file:///）在 Chrome 下直接被拒绝加载 - 不自动转码：上传 MP4 就以为能播 —— 实际 Safari 可能因缺少 H.264 Baseline Profile 而静音或黑屏
用
仅写 在多数环境会静音、无控件、首帧空白。必须显式声明：
-
controls：否则用户无法暂停/拖动/音量调节（iOS Safari 强制要求此属性才允许播放） -
preload="metadata"：避免页面加载时预加载整段视频，拖慢首屏；设为none更激进，但可能影响播放启动速度 -
poster="cover.jpg"：指定封面图，解决视频加载前白屏或黑屏问题；尺寸建议与视频宽高比一致，否则拉伸失真
示例：
MP4 不是万能格式，Safari 和旧 Android 需要额外注意编码参数
即使用了 .mp4 后缀，若编码不符合规范，Safari 仍会报错 Failed to load resource: The URL is invalid 或静音播放。关键限制：
- H.264 编码必须是
Baseline或MainProfile（不能用 High Profile） - AAC 音频采样率需为 44.1kHz 或 48kHz（96kHz 会被 Safari 拒绝）
- 分辨率不宜超过 1920×1080（部分 iPad 会卡顿）
推荐用 FFmpeg 做兼容性转码：
ffmpeg -i input.mov -vcodec libx264 -profile:v baseline -level 3.0 \ -acodec aac -ar 48000 -b:a 128k -movflags +faststart output.mp4
可视化编辑器里嵌第三方平台视频（如 YouTube/Bilibili），别用 iframe 自适应写法
很多编辑器支持“嵌入代码”，但直接粘贴 YouTube 的 iframe 默认是固定宽高（width="560" height="315"），在响应式页面中会溢出或留白。正确做法是用 CSS 容器包裹：
立即学习“前端免费学习笔记（深入）”；
- 外层 设
position: relative; padding-bottom: 56.25%;（16:9 比例）- 内层 iframe 设
position: absolute; top: 0; left: 0; width: 100%; height: 100%;- 务必加
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"，否则 iOS Safari 禁止画中画漏掉
allow属性会导致 Bilibili 视频在 iPhone 上点击后无反应，且控制台不报错 —— 这是最容易被忽略的兼容点。 - 内层 iframe 设
