IE11对HTML5 video支持不完整：仅支持MP4/H.264+AAC，需显式声明type="video/mp4"；动态设置src后须等待loadedmetadata事件再play()；需检查canPlayType()并启用video.js等兼容方案。
IE 浏览器（尤其是 IE11）对 HTML5 <video></video> 的支持是“半残”状态：它识别标签、能渲染控件，但默认不支持 H.264 以外的编码，且对 src 属性动态赋值、canplay 事件触发时机、preload 行为都有明显偏差——直接写标准 HTML5 视频代码，在 IE 上大概率黑屏、报错或静音。
IE 不播放的典型错误现象
常见表现不是报 JS 错误，而是静默失败：
- 页面加载后
<video></video>区域纯黑，控制条可见但点击无效 - 调用
video.play()报错InvalidStateError或无响应 -
video.readyState始终为0（HAVE_NOTHING），networkState为0（NETWORK_EMPTY） - 开发者工具里 Network 面板看不到视频请求发出（说明解析/加载被阻断）
必须用 MP4 + H.264 编码，且设置 type 属性
IE11 只原生支持 MP4 容器内的 H.264 视频（Baseline/Main/High Profile）和 AAC 音频。即使你给的是合法 MP4 文件，如果没显式声明 type，IE 会跳过该 <source></source> 并继续尝试下一个（可能为空），最终无源可播。
正确写法必须包含 type：
立即学习“前端免费学习笔记（深入）”；
<video controls> <source src="video.mp4" type="video/mp4"> </video>
注意：type="video/mp4" 不能省略，也不能写成 type="video/h264"（无效 MIME 类型）。
避免动态设置 src 后直接 play()
IE 对 DOM 插入后立即调用 play() 极其敏感。以下写法在 Chrome/Firefox 正常，但在 IE 中大概率失败：
const video = document.querySelector('video');
video.src = 'video.mp4';
video.play(); // ❌ IE：InvalidStateError
必须等 loadedmetadata 或至少 canplay 事件触发后再播放：
const video = document.querySelector('video');
video.src = 'video.mp4';
video.addEventListener('loadedmetadata', () => {
video.play().catch(e => console.warn('IE play failed:', e));
});
额外建议：preload="metadata" 可加快元数据加载，减少等待时间。
兼容性兜底：检查 canPlayType() 并降级
不要假设 IE 能播任何格式。用 canPlayType() 显式探测：
const video = document.createElement('video');
const canPlayMP4 = video.canPlayType('video/mp4') !== '';
if (!canPlayMP4) {
// IE8/9 连 <video> 标签都不认识，需用 Flash 降级（如 VideoJS 的旧版 Flash tech）
// IE10+ 但返回空字符串？说明环境异常（如企业模式、组策略禁用）
}
真实项目中，若需支持 IE9–11，推荐直接使用 video.js（v7.x 及以前）并启用 html5 tech + flash fallback，它内部已处理了 IE 的事件延迟、play() Promise 兼容、currentTime 设置时机等问题。
最易被忽略的一点：IE 的“企业模式”或“兼容性视图”会强制降级到 IE7 渲染引擎，此时 <video></video> 标签根本不会被解析。务必确认页面在 IE11 文档模式下运行（F12 开发者工具 → “文档模式” 显示为“Edge”或“11”），否则所有修复都无效。
