<svg class="heroImage-svg" viewBox="0 0 1280 720" preserveAspectRatio="xMidYMid slice">
  <image id="placeholder" href="https://webdav.iflyit.top/share/视频/herovideo-1.webp" width="100%" height="100%" />
  <foreignObject id="videoObj" width="100%" height="100%">
    <video xmlns="http://www.w3.org/1999/xhtml" class="heroImage-video" autoplay loop playsinline muted width="1280" height="720" onloadeddata="onLoadedData()">
      <source src="https://webdav.iflyit.top/share/视频/herovideo-1.mp4" />
    </video>
  </foreignObject>
</svg>

<div>
  即使图片和视频没有加载好，这段文字也仍然保持现在的位置。
</div>

function onLoadedData() {
  // 删除首帧图片
  var placeholder = document.getElementById("placeholder");
  placeholder.remove();
}