加载窗口时添加全屏视频前景答案

【问题标题】：Add Full Screen Video foreground while window is loading加载窗口时添加全屏视频前景
【发布时间】：2016-06-22 03:51:36
【问题描述】：

我需要帮助实现一个网页，该网页在后台加载网页时在前台播放视频（整整 13 秒）。

理想情况下，我想通过 youtube 或其他托管 URL 播放视频，因为我们有带宽限制，但如果没有其他选择，自托管也可以工作。

我可以的

<video autoplay loop muted poster="screenshot.jpg" id="background">
<source src="/sample-video.mp4" type="video/mp4">
</video>

并隐藏它on load 但如果您有更优雅的解决方案，我真的可以使用一些帮助。

【问题讨论】：

我没有答案，但我担心将视频用作设计决策。 13 秒的视频真的会比网页加载更快吗？加载它比加载视频慢的网页有多大？
嗨@master565 该页面经过相当优化，只有 2.6 MB 有 50 个请求。这样想，我们希望视频加载并播放 13 秒，一旦视频完成缓冲，页面就可以加载到浏览器缓存中。一旦 13 秒结束，内容就会淡入视频中。（或者只是视频隐藏起来，内容一闪而过）您对使用这种方法的一般想法是什么？ -谢谢
13 秒似乎是一个页面加载的永恒。我会构建它以尽可能快地构建基本内容，然后在页面加载后跟进视频。
@TimHayes 这是一个很好的建议，谢谢！

【解决方案1】：

您可以使用bigvideo.js 或Vide 等插件轻松添加和管理全屏视频背景，在下方呈现您的网站内容，并在您的网站加载完成后淡出视频。只需确保查看每个插件的文档，看看是否有可以挂钩的视频事件来实现您正在寻找的效果。

就页面加载和设置而言，我同意上述问题；一旦脚本和元素可用，就完全有可能启动视频。如果是这种情况，您需要确保您的视频尽可能轻。使用小型预加载器或其他加载通知，加载视频元素 + 脚本并尽早开始播放，然后将其他脚本和 dom 排队。

【讨论】：