Question

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

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

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

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

因此，灯塔出现了一个问题，即渲染的组织性不是很好。

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

由于这一点，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

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

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

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

HTML5在移动浏览器中的<video>标签具有渲染阻止功能

1 个答案: