Chrome 不显示视频答案

【问题标题】：Chrome not showing videosChrome 不显示视频
【发布时间】：2020-09-03 06:13:42
【问题描述】：

由于某种原因，视频显示在 Safari 中，但当我在 Chrome 中打开时却没有？不知道是我设置错了还是别的什么？我附上了用 chrome 打开时的屏幕截图。

.main-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.top-row {
  width: 90%;
  height: 70%;
  margin-top: 150px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.thumbnail {
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}

.thumbnail img {
  width: 18em;
  height: 11em
}

<div class="main-container">
  <div class="top-row">
    <div class="thumbnail">
      <img src="aminanew.mp4">
      <p>Amina</p>
    </div>
    <div class="thumbnail">
      <img src="connienew.mp4">
      <p>Connie</p>
    </div>
    <div class="thumbnail">
      <img src="rocionew.mp4">
      <p>Rocio</p>
    </div>
    <div class="thumbnail">
      <img src="kimnew.mp4">
      <p>Kim</p>
    </div>
  </div>

</div>

【问题讨论】：

你确定你给图片的路径正确吗？ mp4 不是图像格式吗？放一个 png 或 jpg 并尝试它是否有效。对于放置视频，也许您可以使用 html 视频标签
抱歉，我的意思是视频，不能与视频一起使用吗？是的，路径应该是正确的！
它只适用于 Safari 浏览器预览。你可以试试html视频标签，看看它是否有效
@Rocio 你确定它在 Safari 中工作吗？使用img 标签？

标签： html css image google-chrome

【解决方案1】：

这个答案是为了添加一些其他答案和各种 cmet 似乎没有考虑到或表明缺乏意识的信息。

您的视频在 Safari 上播放良好的原因是因为 Safari 11.1（以及之前的 Safari 技术预览）它支持在 img 标签中包含视频。更重要的是，就 Safari (>=11.1) 而言，这是将（短）视频包含到网页中的理想方式。您可以阅读更多关于此here 的信息。这是一篇关于这个问题的非常全面的文章，值得一读。

您面临的问题是只有 Safari 支持此功能。如 Manjuboyz 在他/她的回答中所指出的，要获得对其他浏览器的支持，您需要使用 HTML5 <video> 标签。

我不知道使用img 标签在Safari 上获得短视频优势的方法（没有JS），同时支持许多非Safari 浏览器。考虑到这一点，我会推荐 Manjuboyz 发布的解决方案。即，使用video 标签，而不是img 标签。

【讨论】：

【解决方案2】：

我假设你必须使用 video 标签而不是 img 标签：

.main-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.top-row {
  width: 90%;
  height: 70%;
  margin-top: 150px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.thumbnail {
  display: inline;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}

.thumbnail img {
  width: 18em;
  height: 11em
}

<div class="main-container">
  <div class="top-row">
    <div class="thumbnail">
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        </video>
      <p>Amina</p>
    </div>
    <div class="thumbnail">
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        </video>
      <p>Connie</p>
    </div>
    <div class="thumbnail">
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        </video>
      <p>Rocio</p>
    </div>
    <div class="thumbnail">
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        </video>
      <p>Kim</p>
    </div>
  </div>

【讨论】：