时间戳

首页 > 解决方案 > Html 视频无法在手机上加载

html - Html 视频无法在手机上加载

问题描述

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

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

网页

    <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;
}

我错过了什么吗？

标签： htmlcsshtml5-video

解决方案

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

推荐阅读