如何为HTML5视频针对不同viewport/移动设备设置差异化海报？

当然可以！针对不同视口或移动设备设置差异化的video poster，有几种非常实用的方案，我来给你详细拆解：

这种方法直接修改video元素的poster属性，逻辑清晰，兼容性也很好。核心思路是监听窗口大小变化，根据当前视口尺寸切换对应的海报图：

// 预先定义好不同设备的海报地址
const posterSources = {
  desktop: '/assets/desktop-poster.jpg',
  mobile: '/assets/mobile-poster.jpg'
};

// 切换海报的核心函数
function switchVideoPoster() {
  const videoEl = document.querySelector('video');
  // 判断当前是否为移动端视口（这里以768px为断点，可按需调整）
  const isMobile = window.matchMedia('(max-width: 768px)').matches;
  videoEl.poster = isMobile ? posterSources.mobile : posterSources.desktop;
}

// 页面加载完成后执行一次
window.addEventListener('load', switchVideoPoster);
// 监听窗口 resize 事件，实时切换海报
window.addEventListener('resize', switchVideoPoster);

如果觉得JS监听太麻烦，也可以用CSS背景图模拟poster，通过媒体查询切换背景图，同时处理视频播放时隐藏背景的逻辑：

HTML结构 #

<div class="video-wrapper">
  <video controls poster="">
    <source src="your-video.mp4" type="video/mp4">
  </video>
</div>

CSS样式 #

.video-wrapper {
  position: relative;
  width: 100%;
  /* 保持视频的宽高比，比如16:9 */
  aspect-ratio: 16/9;
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 桌面端海报背景 */
@media (min-width: 769px) {
  .video-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/assets/desktop-poster.jpg') no-repeat center / cover;
    pointer-events: none; /* 不干扰视频控件的点击 */
  }
}

/* 移动端海报背景 */
@media (max-width: 768px) {
  .video-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/assets/mobile-poster.jpg') no-repeat center / cover;
    pointer-events: none;
  }
}

/* 视频播放时隐藏背景海报 */
.video-wrapper.playing::before {
  display: none;
}

补充JS逻辑（处理播放状态） #

const videoEl = document.querySelector('video');
const wrapperEl = document.querySelector('.video-wrapper');

videoEl.addEventListener('play', () => wrapperEl.classList.add('playing'));
videoEl.addEventListener('pause', () => wrapperEl.classList.remove('playing'));

• 图片适配：确保不同设备的海报图尺寸/比例和视频匹配，比如移动端用竖版海报，避免拉伸变形；
• 断点调整：768px是通用的移动端断点，你可以根据自己网站的响应式设计调整（比如360px适配窄屏手机）；
• 测试场景：别忘了测试屏幕旋转的情况，确保横屏/竖屏切换时海报能正确适配；

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