2

我知道可以拍摄一系列图像并使用 javascript 为快速分离中的每个图像快速设置不透明度从 1 到 0。我之前实际上已经非常成功地完成了它，尽管我大约只使用了 41 张图像。720便士。

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

尝试这个有什么明显的优点和缺点吗？

（要清楚，我不是要求代码来实现它，因为我已经开发了大部分代码，只是你认为它的实用性而不是 youtube 或 vimeo 等......）

4

1 回答 1

3

说白了，我觉得不实用。

这里有几个原因：

  • 图像数量。 视频往往是每秒 30 帧左右。对于 4 分钟的视频，大约有 7,200 张图像。
  • 下载时间。以 720 像素高下载 7,200 张图像需要大量带宽，不仅对​​用户而言，对服务器而言也是如此。
  • DOM 加载。 7,200 个图像需要在彼此后面正确定位的 DOM 元素数量相同。
  • 渲染。 每次我们制作动画（淡出）时，浏览器都必须计算哪些元素是可见的以及这对用户意味着什么（像素颜色等）

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

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

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

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

于 2013-04-02T07:54:50.513 回答