HTML5的 <video> 移动浏览器上的代码被阻止

Question

我们正在网站（ucraft.com）上使用标签作为GIF动画替代品。

在页面的顶部屏幕上有一个背景图像，上面有文字和一个号召性用语按钮。 之后，还有另一部分内容，我们在左侧有一个视频，在右侧有一个文本...

在该块之后，还有两个具有相同场景的其他块：标签和文本。

在移动设备（iOS和Chrome）上，浏览器正在等待视频自动播放，然后仅在第一个（顶部）屏幕中显示背景图像。

因此，Lighthouse提出了一个问题，即渲染的组织不是很好。

另一方面，网站上的用户体验不好，因为用户并不真正知道该怎么做，因为直到页面的所有视频都被加载之前，图像才被加载（这很重要）。

因此，Google的Pagespeed为我们提供了30分（移动版）和90分（台式机版）的评分。

请在此处查看pagespeed结果： https : //developers.google.com/speed/pagespeed/insights/? url =https% 3A%2F%2Fwww.ucraft.com

或者，您也可以在设备上打开主页，然后查看...

这是我们用于视频的代码：

<video  class="lazy" width="100%" height="100%" webkit-playsinline="true" autoplay muted playsinline="true" data-status="loaded" loop>
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.mp4">
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.webm">
</video>

我们将这些代码延迟加载到视频中：

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
        lazyVideos.forEach(function(video){
            for (var source in video.children) {
                var videoSource = video.children[source];
                if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
                    videoSource.src = videoSource.dataset.src;
                }
            }

            video.load();
            video.classList.remove("lazy");
        });
    });
</script>

在视频准备播放之前，我们是否缺少任何内容告诉浏览器加载所有内容，包括标签和展示海报？

Answer 1

首先，您应该依次使用背景色，背景图片和视频。 用户不必等待图像或视频就能看到一些文本。

接下来，停止延迟加载视频！ 浏览器已经很好地完成了延迟视频加载的工作。 改变它不是您的责任。

最后，您的视频上没有海报。 不知道您是否打算在那里使用它，但是由于您在问题中提到了它，因此我想指出这一点。