Flash已彻底弃用，必须完全移除并用原生/替代；单格式用src，多格式兼容必用；音频自动播放需用户交互后取消静音；controls、poster、crossorigin为性能与可访问性三大硬性要求。
Flash 已被所有主流浏览器彻底弃用， 和 不只是“能用”，而是唯一合规、可访问、可维护的方案。关键不在“怎么换”，而在“怎么换得稳、不掉坑”。
为什么直接替换
很多老项目把 Flash 当作兜底，写成 ，这会导致：
- 现代浏览器仍会加载并尝试解析
，触发无意义网络请求和解析开销 -
不受的preload、autoplay等属性控制，行为不可预测 - 辅助技术（如屏幕阅读器）可能跳过
内容，只读到的空标签
正确做法是：完全移除 Flash 相关代码，用原生标签 + 标准属性 + 合理 fallback 文案替代。
src vs
单个 MP4 文件够用时，直接写 最简洁；但实际部署中几乎总会遇到格式兼容性问题：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 不支持 VP9，Chrome 对 AV1 支持有限，Firefox 对 H.265（HEVC）支持弱
- 仅靠
src无法声明 MIME 类型，服务端若未正确配置Content-Type（如返回text/plain），视频会静默失败 -
推荐结构：
注意：preload="metadata" 是平衡首帧加载速度与带宽的关键——它只拉取时长、尺寸等元信息，不加载完整视频。
音频自动播放被拦截？绕过策略只有一条有效路径
Chrome、Safari、Firefox 均强制要求用户手势（click/tap）后才能播放带声音的媒体。试图用 autoplay + muted 绕开再取消静音，99% 会失败（Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first）。
- 真正可行的做法：初始用
muted+autoplay播放，监听首次用户交互（如click、keydown），再调用video.unmute()并video.play() - 不要依赖
setTimeout或页面加载完成事件——它们不构成“用户激活” - 移动端尤其严格：iOS Safari 要求交互必须发生在
元素上（比如点击播放按钮），不能是 body 上的任意 click
示例逻辑（简化）：
const video = document.querySelector('video');
video.muted = true;
video.autoplay = true;
video.play(); // 此时静音播放
document.addEventListener('click', function handler() {
video.muted = false;
video.play().catch(e => console.warn('Unmute failed:', e));
document.removeEventListener('click', handler);
}, { once: true });
性能与可访问性常被忽略的三个硬点
光让视频“播出来”远远不够。以下三点一旦漏掉，会在真实场景中立刻暴露：
-
controls属性不可省：自定义控件需额外实现键盘导航（Tab/Space/Arrow）、焦点管理、ARIA 标签，成本远高于默认控件 - 缺少
poster属性时，加载中显示空白区域，用户无感知是否卡住；建议提供缩略图（尺寸小、格式为 JPG/PNG） - 没有
crossorigin属性时，若视频跨域且需 JS 操作（如读取video.duration或截图），会触发 CORS 错误并拒绝访问 —— 即使视频能正常播放
跨域场景下务必加：，并确保服务端返回 Access-Control-Allow-Origin: *（或指定域名）。
