video 的 poster 属性在横竖屏切换时不会自动更新，需用绝对定位的 img 覆盖层配合 resize 事件手动切换 src 并控制显隐，优先使用 window.innerWidth/height 判断方向，避免依赖已废弃的 orientation API。
video 元素的 poster 属性在横竖屏切换时不会自动更新
HTML <video> 的 poster 属性只在初始加载时生效，屏幕旋转后不会重新拉取或切换图片。如果你指望靠改 poster 属性值来“响应式切换封面”，它不会触发重绘——浏览器压根不监听 orientation 变化去刷新 poster。
真正可行的方案是：用一个 <img> 或 <div> 覆盖在 <video> 上，手动控制它的显隐和 src，并监听 resize 或 orientationchange 事件做切换。
- 优先监听
resize事件（兼容性更好，iOS/Android 都触发） - 不要依赖
window.orientation（已废弃，Safari 15.4+ 不再支持） - 用
screen.width < screen.height判断当前是否为竖屏更可靠 - 封面图建议用两张独立资源（如
cover-portrait.jpg和cover-landscape.jpg），避免缩放失真
用 CSS + JS 控制封面层的显示与方向适配
把封面做成绝对定位的 <img>，和 <video> 同级并覆盖其上；播放开始后隐藏它。关键不是“让 poster 动起来”，而是“自己造一个可控制的 poster 层”。
<div class="video-container">
<video id="myVideo" width="100%" height="100%">
<source src="video.mp4" type="video/mp4">
</video>
<img id="videoPoster" class="poster-layer" src="cover-portrait.jpg" alt="Video cover">
</div>
CSS 确保封面层填满容器且居中：
立即学习“前端免费学习笔记（深入）”；
.video-container {
position: relative;
width: 100vw;
height: 100vh;
}
.poster-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
JS 根据宽高比切换 src 并控制显隐：
const poster = document.getElementById('videoPoster');
const video = document.getElementById('myVideo');
function updatePoster() {
const isPortrait = window.innerHeight > window.innerWidth;
const newSrc = isPortrait
? 'cover-portrait.jpg'
: 'cover-landscape.jpg';
if (poster.src !== newSrc) {
poster.src = newSrc;
}
}
window.addEventListener('resize', updatePoster);
video.addEventListener('play', () => poster.style.display = 'none');
video.addEventListener('pause', () => poster.style.display = 'block');
video.addEventListener('ended', () => poster.style.display = 'block');
移动端 Safari 的 orientationchange 事件不可靠
iOS Safari 在全屏视频退出后可能不触发 orientationchange，甚至在某些版本里该事件根本不会冒泡到 window。硬绑这个事件容易漏切封面。
-
resize是更稳的选择：每次旋转都会触发（包括地址栏收起/弹出） - 但要注意防抖——快速旋转可能连续触发多次，用
setTimeout节流即可 - 如果页面有其他 resize 响应逻辑，把封面更新函数单独抽离，避免耦合
- 不要用
matchMedia('(orientation: portrait)')：它只在初始化时生效，不响应变化
autoplay 和封面层的可见性冲突
当设置 autoplay 且用户未交互过时，Chrome/iOS 会阻止自动播放，此时 play 事件不触发，封面层一直显示——但用户看到的是静音封面，不是视频第一帧，体验割裂。
- 加
muted和autoplay提高自动播放成功率（尤其 iOS） - 同时监听
canplay和playing，而不仅是play - 若 2 秒内未进入 playing 状态，主动隐藏封面层（避免用户误以为卡死）
- 注意：部分安卓 WebView 对
poster和自定义封面层叠加渲染有 z-index bug，建议给<video>加transform: translateZ(0)强制硬件加速
resize 触发但图片尚未加载完成时，封面层会短暂空白。加个 onload 回调或用 loading="lazy" 配合预加载策略，比等它自然出现更可控。 
