4

I'd like to create a web based stop motion video player. Basically a slideshow that shows 2-4 images per second. Each image might be a maximum of 20KB. I don't want to preload all images in the slideshow as there might be thousands, however I need to preload more than just the next image in the show as this will not playback fast enough (because of the playback speed the browser needs to be loading more than one image at a time).

I've been looking at using the jQuery Cycle Plugin (http://malsup.com/jquery/cycle/) with a addSlide type function but don't know how to make it work.

Would something like this might work? -Slideshow starts -image is played back -preloader will attempt to load up to the next 60 images -playback will wait for the next image in line to completely load, but will not wait for all 59 others.

The playback / preloading order is important for this application.

4

4 回答 4

1
  • 您可以创建一个预加载 N 个图像的函数，当加载 N 个图像时，它会再次调用自身，N 是多少？可以是 5 或 10，或者您可以提出一些公式来根据预期的图像尺寸/尺寸和显示持续时间计算 N
  • 如果所有图像大小几乎相同，则请求加载的第一个图像应该首先完成加载，因此它不会等待所有 59 个其他图像。
  • 加上一个变量'loadedN'，它保存最后加载图像的索引
  • 调试这个应用程序当然需要 FireBug。
  • 播放功能需要检查请求的图像索引是否加载
于 2009-06-13T19:44:53.827 回答
1

我没有可用的确切代码，但我可以解释框架。我在 jQuery 中做了一些非常相似的事情——尽管我会说它不像 Javascript 那样是 jQuery。这是我所做的基础知识......

创建一个“预加载”图像的函数。在 Javascript 中执行此操作的方法只是创建一个 Image 元素，例如：

  `function preloadAnImage(src) {
    var i = new Image(1020, 492);
    i.src = src;
  }`

创建图像列表，例如。imagesToPreloadIndex = ['image1.jpg','image2.jpg'... ];

创建一个对该队列起作用的函数，例如：

function preloadNextImage() {
    preloadAnImage(imagesToPreload.pop());   
    if (imagesToPreloadIndex.length > 0) {
      setTimeout(preloadNextImage, 300);
    }
  }

这给了你框架。

您会希望这与图像的实际显示同步。只要一切顺利，它就可以正常工作。然后你需要决定如果你在加载中落后怎么办……你是丢帧还是放慢幻灯片的速度？我不熟悉实现此策略的插件，但实现起来会很有趣。

于 2010-04-10T17:30:07.083 回答
0

听起来有问题，因为您永远无法控制客户端获取图像的速度。使用视频可能会是一个更容易和更令人满意的结果。

要在 js 中进行这项工作，您必须构建一个缓冲对象，当预加载图像的数量低于/超过最小阈值时，该对象可以暂停和恢复播放；像 Flash 电影。

于 2010-04-09T02:48:32.840 回答
0

我可以想象这必须是多处理的。我正在考虑的是将播放逻辑与图像预加载逻辑分开。它像这样工作......

您启动一个初始化程序。一旦预加载 N 张图片（此时您可以显示可怕的“缓冲”屏幕），您将调用 2 个函数。

函数 1 - 显示一个图像，然后启动一个计时器，之后再次调用它以显示下一个图像。每秒 4 张图像，它会每 250 毫秒调用一次自己。

功能 2 - 启动计时器。在这里，您可以使用“预期值”。例如，您可以预期 15 秒后处理完 60 张图像。因此，7 秒后，您开始加载接下来的 30 或 60 张图像并将它们添加到图像数组中，同时其他功能仍在显示已经存在的图像。

当然，您需要在函数 1 上设置一个限制器，它会在第 N-1 个元素处停止播放，以避免堆栈溢出或 I/O 错误。

不知道这是否有用，但这是我理解这个问题的方式。

于 2010-02-15T16:56:48.497 回答