如何正确设置video标签的poster属性 实现<480px移动端展示海报图替代视频

你当前配置下视频默认开启了autoplay属性，页面加载后视频自动播放，poster仅会在视频未播放时展示，因此所有设备都看不到海报图。可通过以下两种方案实现需求：

方案一：CSS媒体查询+父容器背景图（推荐，兼容性最优） #

无需修改原有HTML结构，仅更新CSS即可：

.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
/* 新增父容器样式，承载移动端海报展示 */
.main-background {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  /* 背景图路径和你设置的poster路径保持一致 */
  background: center/cover no-repeat url("./images/beach.jpg");
}
/* 屏幕宽度小于480px时隐藏视频，直接展示父容器背景图 */
@media (max-width: 479px) {
  .video {
    display: none;
  }
}

该方案逻辑简单，不会出现移动端视频播放限制导致的兼容问题，同时能减少移动端不必要的视频流量消耗。

方案二：JS动态控制视频播放状态 #

如果不想额外添加背景图，可以通过JS判断窗口尺寸动态控制视频播放，保留原poster的展示逻辑：

1. 先修改video标签，移除autoplay属性：

<main class="main">
  <div class="main-background">
    <video preload="none" playsinline muted loop class="video"              
        poster="./images/beach.jpg" id="video">
        <source src="./video/Atropicallandscape.mp4" type="video/mp4">
    </video>
  </div>
</main>

2. 添加JS控制逻辑：

const video = document.getElementById('video');
function toggleVideoPlay() {
  window.innerWidth >= 480 ? video.play() : video.pause();
}
// 页面加载完成后判断是否播放视频
window.addEventListener('load', toggleVideoPlay);
// 窗口尺寸变化时重新判断，适配横竖屏切换场景
window.addEventListener('resize', toggleVideoPlay);

注意：部分移动端浏览器对JS触发视频播放有严格限制，可能出现桌面端正常、移动端视频无法自动播放的问题，优先选择方案一。

内容的提问来源于stack exchange，提问作者Victor