ie11播放html5视频必须开启“替代编解码器”、设文档模式为edge、正确声明type属性、等待loadedmetadata事件、用容器控制尺寸且poster图比例须匹配，缺一不可。
IE11必须开“替代编解码器”才能播HTML5视频
IE11原生只认 video/mp4（H.264 + AAC），但即使格式对，如果系统级开关没打开，照样黑屏或报错“无法播放此媒体”。这不是网页代码问题，而是IE自身的多媒体策略被默认禁用。
- 点「开始」→ 搜索并打开
Internet 选项→ 切到「高级」选项卡 - 向下滚动到「多媒体」区域 → 勾选
启用替代编解码器在HTML5媒体元素中 - 重启IE11（不是刷新页面）才生效
这个选项在Windows 10/11上默认是关的，尤其企业域控环境几乎100%关闭。不开它，<video></video>标签连加载事件都触发不了。
文档模式必须设为Edge，且不能晚于任何CSS/JS
哪怕你用的是IE11，只要页面被识别成IE7/8文档模式，<video></video>标签就直接被忽略——DOM里根本不存在，更别说播放了。强制切换文档模式是硬门槛。
- 按
F12打开开发者工具 → 顶部菜单栏找「文档模式」下拉框 → 改成Edge - 同时，在HTML的
最开头（必须在第一个<link>或<script></script>之前）加：<meta http-equiv="X-UA-Compatible" content="IE=edge"> - 如果服务器返回了
X-UA-CompatibleHTTP头，会覆盖这个，需确认二者一致
常见坑：把塞进条件注释里、放在CSS后面、或者用PHP动态输出时混入空格——IE会直接退回到怪异模式，video消失无踪。
立即学习“前端免费学习笔记（深入）”；
type属性不能省，loadedmetadata后才能play()
IE11对<source></source>的type属性极其敏感。不写或写错，它就当没这回事，连canPlayType()都返回空字符串。
-
type只能是video/mp4，不能写video/h264或video/x-m4v（IE不认） - 用JS动态设置
video.src后，不能立刻调play()，必须等loadedmetadata事件：
const video = document.querySelector('video');
video.src = 'demo.mp4';
video.addEventListener('loadedmetadata', () => {
video.play().catch(e => console.warn('IE play failed:', e));
});
否则大概率报 Unhandled promise rejection: Error: Unspecified error.——这是IE特有的静默失败，控制台可能不报错，但视频就是不动。
video尺寸和比例得靠容器撑，别信width/height或object-fit
IE11里的<video></video>完全不支持 aspect-ratio，width="100%" 会导致高度塌陷，object-fit: contain 也无效。强行设height只会拉伸画面。
- 必须用包裹容器 +
padding-top百分比实现等比缩放（比如16:9就是padding-top: 56.25%） - video本身设
position: absolute; top: 0; left: 0; width: 100%; height: 100% - poster图尺寸必须和视频原始比例一致，否则IE会强行裁剪
这个限制不是bug，是IE11渲染引擎的固有行为。想靠CSS一行解决？在IE里行不通。
IE11的HTML5视频支持是个“拼图”——缺了系统开关、文档模式、MIME声明、事件时机、容器布局中任意一块，都会卡住。最容易漏的是第一项：没人会想到去「Internet选项」里翻那个藏得极深的「替代编解码器」开关。
