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

我需要帮助实现在网页在后台加载时在前台播放视频的网页（13秒满）。在窗口加载时添加全屏视频前景

理想情况下，我想通过YouTube或其他托管网址播放视频，因为我们有带宽限制，但如果没有替代方案，自主托管也可以工作。

我能做

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

藏起来on load，但如果你有一个更优雅的解决方案，我真的可以使用一些帮助。

我没有答案，但我很担心使用视频作为设计决策。 13秒的视频真的会比网页加载更快吗？加载它的网页有多大比加载视频慢？ – master565

嗨@ master565这个页面相当优化，只有2.6 MB的50个请求。想想这样，我们希望视频加载并播放13秒，一旦视频完成缓冲，页面就可以加载到浏览器缓存中。一旦13秒后，内容就会淡入视频中。（或只是视频隐藏起来，内容在闪存中）您对使用此方法有何一般想法？ - 感谢 –

13秒似乎是一个页面加载的永恒。我会尽可能快地构建基础内容，然后在加载页面后跟进视频。 – TimHayes

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

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

2016-06-21 19:51:36 DabaloSe7eN

谢谢@ DabaloSe7eN –

回答