带图片的javaScript视频

Question

我知道可以拍摄一系列图像，并使用javascript为快速分离中的每个图像非常快速地将不透明度从1设置为0。实际上，我以前做过非常成功的事情，尽管我只用了大约41张图片。720p。

我的问题是，仅仅使用html、css和javascript制作整个视频(4-10分钟长)是否实用。显然，在缓存中留下太多的图像，所以你必须经常清空缓存中的特定图像，而且这将需要一个相当好的互联网连接，但你认为这值得尝试吗？

你能想出什么明显的利弊来尝试一下吗？

(需要明确的是，我并不是要求代码来实现它，因为我已经开发了大部分代码，只是从实用性的角度来考虑它，而不是youtube或vimeo等。)

Answer 1

坦率地说，我不认为这是实用的。

这里有几个原因：

图像的帧数。视频的速度一般在每秒30帧左右。对于一个4分钟的视频来说，大概有7200张图片。

• Download时间。以720像素的高度下载7,200张图像需要大量的带宽，不仅对于用户，对于服务器也是如此。

• DOM Load.DOM 7,200图像需要正确放置在彼此后面的相同数量的DOM元素。

• Rendering.每次我们做动画(淡出)时，浏览器必须计算哪些元素是可见的，以及这对用户意味着什么(像素颜色等)

当然，我们可以对此进行优化：

播放指定时间所需的图像。

• Download如果连接可以每秒下载30张图像，那么我们加载所需的内容，然后在下载完成后启动play sequence.
• Remove元素。随着序列的继续，我们可以假定不再需要这些图像。当这些图像完成后，我们可以销毁这些元素，从而释放多个子域/位置上的一些resources.
• Put图像。浏览器倾向于在单个时刻为每个域下载一个资产。现代浏览器可能会下载6个或更多。但是如果我们将这些资产分成多个子域，我们可以增加同时下载的数量，从而增加对大型sprites的响应。拥有一个或多个大型sprites上的序列，并使用Javascript来正确定位元素。这允许我们进行一次/几次下载，并消除了多次下载的开销。

视频是经过编码的，因此浏览器不必进行所有这些像素计算和动画。每一帧都不是完整的图像，而是当前帧和下一帧之间的增量。(我过于简化了这一点。)

但是这种方法经常被用于需要交互性的棋子，或者想要通过iOS自动播放的hangups。同样，对于大序列并不实用，但对于较短的序列绝对可行。