带图像的 JavaScript 视频

Question

我知道可以拍摄一系列图像并使用 javascript 将每个图像的不透明度从 1 快速设置为 0。事实上，我之前已经成功地做到了这一点，尽管我只使用了大约 41 张图像。 720p。

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

您认为尝试此操作有任何明显的优点和缺点吗？

(需要明确的是，我并不是要求代码来实现它，因为我已经开发了其中的大部分内容，只是您对它的实用性的看法，而不是 youtube 或 vimeo 等......)

Answer 1

说白了，我认为这不实用。

以下是一些原因:

• 图像数量。视频通常约为每秒 30 帧。 对于 4 分钟的视频来说，大约有 7,200 张图像。
• 下载时间。下载 7,200 张 720 像素高的图像需要 大量的带宽，不仅对​​于用户，而且对于 服务器。
• DOM 加载。7,200 张图像需要同样多的 DOM 元素正确放置在彼此后面。
• 渲染。每个 当我们做动画(淡出)时，浏览器必须计算什么 元素是可见的以及这对用户意味着什么(像素颜色， 等)

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

• 下载指定时间所需的图像。如果连接每秒可以下载 30 张图像，那么我们将加载所需内容，然后启动播放序列。
• 完成后删除元素。随着序列的继续，我们可以假设不再需要这些图像。当这些图像完成后，我们可以销毁这些元素，从而释放一些资源。
• 将图像放在多个子域/位置。浏览器往往会在同一时刻为每个域下载 1 个 Assets 。现代浏览器可能会下载 6 个或更多。但如果我们将这些 Assets 拆分到多个子域，我们就可以增加同时下载的数量，从而延长响应时间。
• 创建大型 Sprite 。将序列放在一个或多个大型 Sprite 上，并使用 Javascript 正确定位元素。这使我们能够进行一次/几次下载，并消除多次下载的开销。

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

但这种方法经常用于需要交互性或想要克服 iOS 自动播放挂起的片段。同样，对于大型序列来说不实用，但对于较短的序列绝对可行。