如何用HTML的video标签实现响应式视频？移动端播放故障排查

我来帮你搞定这两个头疼的问题——手机端视频点不动、以及如何让视频在各种设备上都自适应显示：

一、手机端仅显示播放按钮无法播放的原因及解决办法 #

你遇到的这个情况，大概率是下面几个原因导致的，挨个排查试试：

• 自动播放限制：现在几乎所有手机浏览器（比如iOS Safari、Android Chrome）都默认禁止带声音的视频自动播放。你加了autoplay="true"，但手机端根本不买账，甚至可能影响正常播放。建议先去掉autoplay="true"，或者加上muted属性（静音自动播放是浏览器允许的），代码改成：

  <video controls muted loop class="video_travel">
    <source src="video/video.mp4" type="video/mp4">
    <source src="video/video.webm" type="video/webm">
    <source src="video/video.ogv" type="video/ogg">
  </video>
  

• 视频编码不兼容：就算你备了三种格式，也要确保编码是手机端支持的。比如MP4必须是H.264视频编码+AAC音频编码，WebM用VP8/VP9，OGG用Theora。可以用转码工具（比如HandBrake）重新处理视频试试。
• HTTP/HTTPS限制：iOS Safari和部分Android浏览器要求网站必须是HTTPS协议才能播放媒体文件，如果你的网站还是HTTP，赶紧升级到HTTPS。
• 文件路径错误：检查视频文件的相对路径是不是正确，手机端对路径大小写敏感，比如Video/Video.mp4和video/video.mp4是不一样的，确保路径和实际文件位置完全匹配。

二、正确实现响应式视频的方法 #

原生<video>标签本身不会自动适配屏幕宽度，需要用CSS容器配合来实现响应式，核心思路是用padding-top维持宽高比，让视频容器随屏幕宽度缩放，同时视频填满容器：

步骤1：用容器包裹video标签 #

<div class="video-container">
  <video controls muted loop class="video_travel">
    <source src="video/video.mp4" type="video/mp4">
    <source src="video/video.webm" type="video/webm">
    <source src="video/video.ogv" type="video/ogg">
  </video>
</div>

步骤2：添加CSS样式 #

/* 视频容器：用padding-top维持宽高比 */
.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* 16:9的宽高比，计算方式：9/16 = 0.5625 → 56.25% */
  padding-top: 56.25%;
  overflow: hidden;
}

/* 视频元素：绝对定位填满容器 */
.video_travel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 可选：保持视频比例覆盖容器，用contain则会完整显示视频 */
  object-fit: cover;
}

说明 #

• padding-top的数值根据你的视频宽高比来算：比如4:3的视频是75%（3/4），1:1是100%，按需调整。
• object-fit: cover会让视频填满容器，裁剪超出部分；如果想完整显示视频，换成object-fit: contain即可。

这样调整后，视频就能在手机、平板、桌面端都自适应显示，同时解决播放问题啦！

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