<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();
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.