• 0

Play animation (PNG frames?) when clicking mouse using HTML5?


Question

Hello chaps,

Season's greetings to you all!

I would like to ask if anyone has any experience with playing animations using HTML5.

I have a 2 second rendered animation that I would like to embed within a webpage, and play on mouseclick.

A low resolution 'work in progress' version of the animation is available here:

https://www.dropbox....l6qrk/video.mp4

However, instead of using a video file, I thought about animating individual PNG frames - the advantage being that PNGs can have an alpha channel and therefore sit 'on top' of the website's background.

Extracting the individual frames, each PNG is around 250k, meaning that the total pre-loaded animation would be approximately 10mb - obviously far too big for such a short animation. I am wondering if this can perhaps be reduced by slicing the animation into a static image for the lower portion and animating just the upper moving portion.

Does anyone have any suggestions as to where to go from here? Perhaps software recommendations that will allow me to 'build' the animation? Or another forum that's geared specifically towards what I am hoping to achieve.

Please note that I do not have a great deal of web programming experience, but am hoping to follow tutorials and eventually end up with a collection of PNG frames and an HTML5 code snippet that can be dropped into an existing site design.

Many thanks in advance!

James

x

3 answers to this question

Recommended Posts

  • 0

Thanks for the prompt reply.

Yes, I read the APNG wiki previously, but ruled out the format due to the lack of support in Webkit.

I think slicing up the top and bottom, then displaying individual PNG frames for the top half is the best way to go, but would appreciate pointers in the right direction.

Cheers,

James

x

This topic is now closed to further replies.
  • Posts

    • Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Shell Extensions\Blocked] "{e2bf9676-5f8f-435c-97eb-11607a5bedf7}"="Share" [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Shell Extensions\Blocked] "{e2bf9676-5f8f-435c-97eb-11607a5bedf7}"="Share" [-HKEY_CLASSES_ROOT\*\shellex\ContextMenuHandlers\ModernSharing] Remove that Share text.
    • Meh could never use the UWP as I use WhatsApp business and it's features are available on the standard. Thos this applies to both windows and macos+ipad versions. So I'm stuck on using web versions for whatever platform.
    • I hardly have issues with my ipad pro 4's faceid while holding it on Portrait
    • Sure, one example: Two computers side by side. Your main system is connected to a sound bar or a high end TV with good audio built in. Your secondary machine is the one you play music, movies, YouTube, check email, etc. on another monitor while you work/play games on your main system. In this case, the main computer converts all audio to Dolby Atmos which goes out to the main TV/soundbar (or your bluetooth/headphones), no matter if it comes from the main machine or the secondary...with no latency issues. And whatever you'd be doing on the secondary computer isn't hitting your main computer's CPU or GPU if, say, gaming some serious FPS or at 4k etc. That's just one home use case for a networked audio solution. I'm sure others can think up more of them.
    • Yeah, I've looked at all of these. Dante is a pro and expensive program, of course. I'm just looking for simple audio/music sharing from one PC/device to another. Voicemeeter is a lovely bit of kit, but the interface is NOT user friendly to set up initially, unless you are an audio engineer who thinks the way the program does. It works though. I just didn't feel the juice was worth the squeeze on that one. The other ones you mention each have problems, like no longer maintained/updated, blocks auto-audio switching on receiving computer from say headphones to HDMI, etc. Spotify does this, but only for music played by Spotify. Multiplicity does this (but isn't free) for all audio on one PC (like you'd want) but hiccups the audio on the source PC if too much CPU is used (so you really can't use a very old PC as a music/video/youtube player). Oh, and because of how the old version (I haven't tried the newly released one because it still has a showstopping bug that's not been addressed) shares the mouse between screens, it interferes (and can crash) video games on the server/main machines, etc. Multiplicity Pro was the best of the normal solutions, however. If the two machines are side by side, you can use analog line out to analog line in, but then you are getting analog noise/problems. It's the simplest and most solution, of course.
  • Recent Achievements

    • Rookie
      Snake Doc went up a rank
      Rookie
    • First Post
      nobody9 earned a badge
      First Post
    • One Month Later
      Ricky Chan earned a badge
      One Month Later
    • First Post
      leoniDAM earned a badge
      First Post
    • Reacting Well
      Ian_ earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      496
    2. 2
      Michael Scrip
      205
    3. 3
      ATLien_0
      201
    4. 4
      Xenon
      136
    5. 5
      +FloatingFatMan
      117
  • Tell a friend

    Love Neowin? Tell a friend!