How to start/pause/stop gif image animation on demand?

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
abcuser
Posts: 261
Joined: March 12th, 2007, 11:19 pm

How to start/pause/stop gif image animation on demand?

Post by abcuser »

Hi,
using Firefox 47 on Windows. I have created a screen-cast in gif format. So it is animated image. Now I would like to include this image on my simple html file.

I have created simple web page like:

Code: Select all

<html>
<body>
<image src="file:///C:/myfile.gif">
</body>
</html>
and open html file in Firefox. Now the problem. When I open html file gif animation starts automatically. I don't like this.

Questions:
1. Is there a way I can specify in html file that this gif animation should start on demand? Like pressing "play" like button?
2. Is there a way I can create a "pause" button so that gif animation pauses and when I like to continue "play" button is pressed again?

Thanks
User avatar
DanRaisch
Moderator
Posts: 127166
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Re: How to start/pause/stop gif image animation on demand?

Post by DanRaisch »

Moving to Web Development as this is not a Firefox issue.
abcuser
Posts: 261
Joined: March 12th, 2007, 11:19 pm

Re: How to start/pause/stop gif image animation on demand?

Post by abcuser »

So far I have found out the following solution to start/stop.

Code: Select all

<html>
<body>

<a href="#" onclick="document.getElementById('gif1').src='file.gif'"><img src="start.png" alt="play animation" /></a>
<a href="#" onclick="document.getElementById('gif1').src='file.png'"><img src="stop.png" alt="stop animation" /></a>
<br>
<img src="file.png" id="gif1" alt="image" />

</body>
</html>
Where
- file.gif is the gif animation
- file.png is the static file displayed before animation is run and after stop animation is executed
- start.png is start button
- stop.png is stop button

Click on start button starts animation and click on stop button stops the animation.


But I still don't know how to have implement pause button. Any idea?
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: How to start/pause/stop gif image animation on demand?

Post by BruceAWittmeier »

What is the difference between Stop and Pause? Are you trying to use a single button -- Click to Pause -- Click to Restart?
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
User avatar
jscher2000
Posts: 11734
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: How to start/pause/stop gif image animation on demand?

Post by jscher2000 »

I've never heard of play/pause/stop controls for a GIF image. Why not make your screencast available as a video?
User avatar
BruceAWittmeier
Posts: 3076
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Re: How to start/pause/stop gif image animation on demand?

Post by BruceAWittmeier »

If you can control these in a realtime mode it might work.

in the about:config - image. animation_mode String Determines how to animate multi-frame GIF images

none: animated images will never play.
once: animated images will play once.
normal (default): animated images will play as normal.
I often take a long windy road to my destination. Upon arrival, I wonder how I missed the shortcut.
abcuser
Posts: 261
Joined: March 12th, 2007, 11:19 pm

Re: How to start/pause/stop gif image animation on demand?

Post by abcuser »

Hi,
sorry for few months old reply. I was busy with other things.
BruceAWittmeier wrote:What is the difference between Stop and Pause?
Stop: it is game over, you have to start if from the beginning.
Pause: when you press play again it continues in video where video was paused.
jscher2000 wrote:Why not make your screencast available as a video?
Because I have excellent program for recording/editing gif. I tried to record the same with video recordings (mp4) and the same video was 1 GB mp4 file and only 1 MB gif file. I would like to have as small files as possible, because they are going to be displayed over network with multiple people at the same time. File size is extremely important.


Any additional idea how to implement Pause? So user presses on Pause link and then it can press on Play link, or even better would be one link changing name from Play to Pause to Play when clicked?
Post Reply