Html 视频无法加载 phone

Question

我的 HTML 页面上有一个视频在桌面浏览器上运行良好，但是，当我在我的手机 phone 上访问它时，它是 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 上测试了最新的 OS。将您的视频保持在 10 MB 左右。

Html 视频无法加载 phone

Html video does not load on phone

html

css

html5-video