Html 视频无法在手机上加载

Question

我的 HTML 页面上有一个视频在桌面浏览器上运行得很好，但是，当我在 iPhone 11 Pro 手机上访问它时，该视频在 Chrome 和 Safari 上根本无法加载。这是 netlify 托管的网站，来自我的 GitHub。

https://admiring-khorana-ad08d5.netlify.app/

HTML

    <div id="principalvideo" class="video-container">
      <video autoplay muted loop id="myMainVideo">
        <source src="main.mp4" type="video/mp4">
      </video>
    </div>

CSS

  .video-container {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

我错过了什么吗？

Answer 1

考虑减小视频大小。它有 70MB，当我进行测试时最终加载了，但似乎需要很长时间。我在 iPad 和 iPhone 上的最新操作系统上进行了测试。您的视频大小保持在 10 MB 左右。

Answer 2

iOS Safari 需要playsinline 属性才能使视频内嵌播放（尤其是静音、自动播放的视频）。