CODEWITHSUNDEEP
javascriptxmlhtmlimagevideo
mmm
mmm

Reputation: 2297

javaScript video with images

I know that it's possible to take a series of images and use javascript to set opacity from 1 to 0 very quickly for each one in rapid secession. I have actually done it before very successfully, although I only used 41 images at approx. 720p.

My question though, is whether or not it would be practical to make an entire video (4-10 minutes long) using only html, css, and javascript. Obviously that would be too many images to leave in the cache, so you'd have to empty the cache every so often of particular images, and also this would require a pretty good internet connection, but do you think it would be worth while to attempt?

are there any obvious pro's and cons that you could think of for trying this?

(to be clear, I'm not asking for the code to achieve it as I have already developed most of it, just what you think in terms of practicality of it as opposed to youtube or vimeo etc...)

Upvotes: 2

Views: 561

Answers (1)

Justice Erolin
Justice Erolin

Reputation: 2879

Plainly put, I don't think it's practical.

Here's a few reasons why:

  • Number of images. Videos tend to be around 30 frames per second. For a 4 min video, that's roughly 7,200 images.
  • Download time. Downloading 7,200 images at 720 pixels high would require a significant amount of bandwidth, not only for the user, but also for the server.
  • DOM load. 7,200 images would require just as many DOM elements positioned correctly behind each other.
  • Rendering. Each time we do an animation (fadeout), the browser has to calculate what element is visible and what that means to the user (pixel color, etc.)

Of course, we can optimize this:

  • Download the images that is needed at that specified time. If the connection can download 30 images/second, then we load what we need and then initiate the play sequence.
  • Remove elements when it's done. As the sequence goes on, we can assume that those images are no longer needed. When those images are done, we can destroy those elements and thus free up a few resources.
  • Put images on multiple sub-domains/locations. Browsers tend to download 1 asset per domain at a single moment. Modern browsers may download 6 or more. But if we were to split those assets to multiple subdomains, we can increase that number of simultaneous downloads and thus increase response time.
  • Create large sprites. Have the sequence on one or several large sprites, and use Javascript to correctly position the element. This allows us to have a single/few downloads and removes the overhead from multiple downloads.

Videos are encoded so that the browser doesn't have to do all those pixel calculations and animations. Each frame isn't a full image, but rather a delta between the current and next frame. (I'm overly simplifying this.)

But this method is constantly used for pieces that need interactivity, or want to get past iOS auto-play hangups. Again, not practical for large sequences, but definitely doable for shorter sequences.

Upvotes: 3

Related Questions