Javascript 全宽视频背景：一个非HTML5的纯jQuery解决方案……也许吧

长时间堆栈溢出爬行器。这个社区已经提出了一些令人难以置信的优雅的解决方案来解决相当复杂的问题

在处理动态显示的内容方面，我更喜欢CSS3或PHP。理想情况下，拥有jQuery和/或Javascript坚实知识基础的人能够最好地回答这个问题。以下是想法及其背后的思考过程：

创建全屏幕（宽度：100%；高度：自动；背景：封面；）视频背景。但与其继续使用HTML5的视频标签，不如使用flash fallback、iFrame甚至.GIF创建一系列图像，就像Cinema4D的动画渲染输出一样，如果按顺序组合在一起，可以创建无缝的伪视频体验

在“那只是一个.GIF，你是个白痴”之前

我相信jQuery/Javascript可以解决这个问题。是否可能编写一个脚本，基本上识别（甚至添加）图像的div类，然后将该图像设置为显示，例如.0334ms（29.7帧速率），然后将该图像设置回z空间，同时在顺序类内的下一个图像中触发，以显示另一个.0336ms；以此类推，直到所有图像（或“帧”）无缝播放，用户会认为他/她实际上正在观看视频。不知道这实际上是类固醇上的.GIF

下面是一种更详细的解释预期结果的方法：

你有一个1秒的超级棒的1080p视频剪辑（视频格式对回答这个问题没什么帮助，假设它是无损的，真的很漂亮吗？）。它以每秒29.97帧的速度录制。将每一帧分解为自己的海量图像文件，只剩下30幅图像。每秒24帧意味着你会有24幅图像，每秒60帧意味着你会有60幅图像，等等，等等

如果您曾经使用过Cinema4D，我希望重新创建的输出与动画渲染的输出是自反的，在动画渲染中，每帧的输出都是.TIFF，并排放置，这样当上传到Photoshop或在Quicktime中查看时，您可以看到图像的“幻灯片”，显示速度非常快，看起来就像视频一样

HTML将如下所示：

<div id="incredible-video">
     <div class="image-1">
        <img source=url('../movie/scene-one.tiff');/>
     </div>
     <div class="image-2">
        <img source=url('../movie/scene-two.tiff');/>
     </div>
     <div class="image-3">
        <img source=url('../movie/scene-three.tiff');/>
     </div>
     <div class="image-4">
        <img source=url('../movie/scene-four.tiff');/>
     </div>
     <div class="image-5">
        <img source=url('../movie/scene-five.tiff');/>
     </div>
     ....etc.....
     ....etc.....
     ....etc.....
</div>

但是jQuery/Javascript需要做些什么才能完成这个任务呢？它需要在窗口加载之后立即发生，并在无限循环上运行。当然，音频在这个例子中并没有出现，但我们不需要它。假设我们只希望最终用户拥有一个视觉上吸引人的页面，在UI中实现最小的设计

我喜欢视频动画，也非常喜欢全屏背景的网站。但是，一个拥有这种视觉设置并保持其响应性的网站正在被证明是一个艰巨的挑战。HTML5只会让你走到目前为止，并使移动兼容性无效（数据使用保护）。与调用.mp4、.Webm或.OGG相比，GIF文件非常庞大，因此该选项已被取消

实际上，我最近玩过AdobeEdge动画。使用Edge Hero.js库，我可以复制类似的项目：

我发现它在所有设备上都有效。很酷。让我想到可能是使用这个程序或者直接点击jQuery/Javascript来达到想要的效果

谢谢你看这张照片，伙计们

-干杯，

---

Branden Dane

我找到了一个可行的解决方案，解决了我想做的事情。它实际上相当有趣。答案是它引入了许多有趣的想法，我们可以在一个站点、一个应用程序甚至是一个成熟的软件应用程序中动态显示任何类型的内容

答案来自于对WebGl、画布动画（2d和3d）、2d视频游戏技术和3d视频游戏技术的深入研究。如果您对创建视觉效果良好的设计感兴趣，并且真正了解前沿技术可以为您的开发思想做些什么，而不是寻找“完美”的工作流程，那么请跳过GUI。忽略那些承诺在5分钟内完成任务的软件广告。事实并非如此。然而，我们正在到达那里。在短短几个月内，我们也必须期待的三件大事是

1.）关于在Opera、Chrome和Firefox（当然）中实现WebGL的普遍协议，Safari将在启用WebGL的情况下发布，用户必须手动启用WebGL，甚至IE也将尝试给她一个机会（在IE 12中）

2.）游戏开发行业标准Unity 3D宣布，下个月它将发布第5版，并将发布一个完整、直观的工作流程，从开始到导出Javascript（而不是JSON实际的Javascript）。更具体地说，Three.JS库是当今看似没完没了的游戏引擎中最受欢迎的引擎之一

这如何回答我最初的问题 虽然WebGL已经存在了大约3年了，但我们现在才开始看到它的光辉。它不仅仅是一个简单的视频游戏引擎。有了ThreeJS，我们就有了一个完整的JavaScript库，可以在WebGL中渲染到画布上，甚至可以使用一些CSS3魔术。无法将您的精彩电影用作移动背景？它破坏了整个用户界面？振作起来ThreeJS可以同时使用2D和3D javascript绘图功能，但不能同时使用。悬停允许您绕过此规则的其他库

还有鼓点。它是，或者可以非常容易地以响应或自适应的方式制作

我的问题的答案来自于查看定制预加载程序。意识到我可以在AE中创建难以置信的循环动画，并将它们导出为GIF提供我想要的质量，但不是控制，没有优化，现在是声音。但是，可以导出PNG序列。然后顿悟开始了。在我说我用什么来解决我的问题之前，我想留下一份材料清单，上面列出了任何希望超越简易开发的人

#incredible-video img {
     position:absolute;
     width:100%;
     height:auto;
     background:cover;
}