移动浏览器上的 HTML5 的 <video> 标签呈现阻塞答案

【问题标题】：HTML5's <video> tag on mobile browsers is render blocking移动浏览器上的 HTML5 的 <video> 标签呈现阻塞
【发布时间】：2018-11-29 22:36:40
【问题描述】：

我们在我们的网站 (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>

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

【问题讨论】：

标签： html video-streaming html5-video rendering pagespeed-insights

【解决方案1】：

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

接下来，停止延迟加载您的视频！浏览器在延迟视频加载方面已经做得很好。改变它不是你的责任。

最后，您的视频中没有海报。不确定你是否打算在那里使用一个，但既然你在问题中提到了它，我想我会指出来。

【讨论】：