MP4/H.264 视频背景未在 iPad 或 iPhone 中显示包括在线播放

如何解决MP4/H.264 视频背景未在 iPad 或 iPhone 中显示包括在线播放

我一直在尝试在 Koa 框架中显示网页的视频背景。简短的 HTML 如下：

<video class="col-12 nopadding" id="vid" loop muted autoplay playsinline>
</video>

<div class="over">
<h1>¿Lorem ipsum dolor sit?</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit primis</p>
<button class="btn btn-primary btn-xl" type="button" onclick="window.location.href='#firma'">Lorem</button>
</div>

<h1> 和<p> 被转置在视频背景前面，并使用了Bootstrap，视频的来源是在最后通过Javascript 添加的，选择{{1}首先找出适合屏幕尺寸的视口大小（移动/桌面）：

src

两个视频都具有与 iOS 兼容的正确编解码器（我认为），如 ffmpeg 配置所示：

 <script>
  var w = window.matchMedia("(max-width: 769px)");
  var vid = document.getElementById("vid");
  var source = document.createElement("source");
  source.id = "hvid";
  source.setAttribute("type","video/mp4");
  vid.appendChild(source);
  
  if (w.matches) {
    vid.pause();
    vid.setAttribute("poster","<%= assetPath('poster_2-3.jpg') %>");
    source.removeAttribute("src");
    source.setAttribute("src","light_2-3.mp4");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    vid.setAttribute("poster","<%= assetPath('poster_9-16.jpg') %>");
    source.removeAttribute("src");
    source.setAttribute("src","light_9-16.mp4");
    vid.load();
    vid.play();
  }

</script>

视频背景在 Safari、Chrome 和 Android 移动设备上完美运行，视频在 iPhone 或 iPad 中根本不显示（在我添加海报之前是一个白色的空矩形）。编解码器似乎是正确的，ffmpeg -i input.mp4 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.1 -b:v 200K -r 30 light_2-3.mp4 和 playsinline 属性在视频标签上，经过几天的研究，我找不到任何新的解决方案。

有什么想法吗？

Here is an example of the video background