MozillaZine

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

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

Post Posted July 28th, 2016, 4:47 am

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

DanRaisch
Moderator

User avatar
 
Posts: 117074
Joined: September 23rd, 2004, 8:57 pm
Location: Somewhere on the right coast

Post Posted July 28th, 2016, 5:01 am

Moving to Web Development as this is not a Firefox issue.

abcuser
 
Posts: 250
Joined: March 12th, 2007, 11:19 pm

Post Posted July 28th, 2016, 6:17 am

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?

BruceAWittmeier

User avatar
 
Posts: 2606
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted July 29th, 2016, 5:01 am

What is the difference between Stop and Pause? Are you trying to use a single button -- Click to Pause -- Click to Restart?
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

jscher2000

User avatar
 
Posts: 10051
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted July 30th, 2016, 7:43 am

I've never heard of play/pause/stop controls for a GIF image. Why not make your screencast available as a video?

BruceAWittmeier

User avatar
 
Posts: 2606
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted August 1st, 2016, 7:13 am

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'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

abcuser
 
Posts: 250
Joined: March 12th, 2007, 11:19 pm

Post Posted December 9th, 2016, 10:11 am

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?

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 2 guests