I have an animated gif in an img tag that I start by rewriting the src attribute. The gif was created, though, to loop and I only want it to play once. Is there a way, with Javascript or jQuery, to stop an animated gif from playing more than once?
I was having the same problem with an animated gif. The solution is rather simple.
Open the Animated gif in Photoshop.
Go to the Window tab and select timeline(if the timeline is not already open).
At the bottom of the timeline panel, you will find an option, which says "Forever".
Change that to "Once".
Go to File> Export> Export for Web and save it as a gif.
That should do it.
can you find out how long the gif takes to loop once?
if so then you can stop the image like this:
pseudocode:
wait until the end of the image (when it is about to loop)
create a canvas element that has a static version of the gif as currently displayed drawn on it
hide gif
display canvas element in a way that makes it look like the gif froze
javascript:
var c = $("canvas")[0];
var w = c.width;
var h = c.height;
var img = $("img")[0];
setTimeout(function () {
c.getContext('2d').drawImage(img, 0, 0, w, h);
$(img).hide();
$(c).show();
},10000);
jsfiddle
edit:
I forgot to add reference to the original answer that I took this from, sorry
Stopping GIF Animation Programmatically
that one doesn't address the time factor you need for only one loop
Also, it has been mentioned that this approach is problamatic in certain cases (It actually didn't work when I try it in firefox right now...). so here are a few alternatives:
mentioned by Mark: edit the gif itself to avoid looping. this is the best option if you can.
but I've run into cases where it was not an option (like automated generation of images by a third party)
instead of rendering the static image with canvas, keep a static image version and switch to stop looping . this probablyhas most of the problems as the canvas thing
Based on this answer, it's kinda expensive, but it works. Let's say a single loop takes 2 seconds. At a setTimeout after 2 seconds kick in a setInterval, that would reset image source every millisecond:
setTimeout(function() {
setInterval(function() {
$('#img1').attr('src',$('#img1').attr('src'))
},1)
}, 2000)
again, probably just a proof of concept, but here's demo: http://jsfiddle.net/MEaWP/2/
Actually it is possible to make a gif to stop after just one iteration or any specific number of iterations, see an example below (if it is not already stopped), or in jsfiddle.
To do that the gif must be created with number of iterations specified. This could be done using Screen to Gif, it allows to open a gif or a bunch of images and edit it frame by frame.
This solution also allows you to reset the animation by imgElem.src = imgElem.src; but this does not work in MS IE/Edge.
Jurijs Kovzels's answer works in some condition but not in all.
This is browser-dependent.
It works well with Firefox. But In Google Chrome and Safari, it does not work if the gif is on the same server. The example he provided works because the gif is on the external server.
To restart gifs stored on the internal server, using Google Chrome and Safari, you need extra steps to make it work.
const img = document.getElementById("gif");
img.style = "display: none;";
img.style = "display: block;";
setTimeout(() => {
img.src = img.src;
}, 0);
This is inspired by this answer.
Not sure if this is the best way to respond to everyone and have it appear after all the previous answers and comments, but it seems to work.
I don't have much control over the gif. People post whatever gif they want as the "thankyou.gif in their account directory and then the ThankYou code runs whatever they've put there when a comment is submitted to a form they've posted. So some may loop, some may not, some may be short, some may be long. The solution I've come to is to tell people to make them 5 seconds, because that's when I'm going to fade them out, and I don't care if they loop or not.
Thanks for all the ideas.
I know I am pretty late here but..here it is...
I don't know if you would go to this length but let me share a trick.
Open the GIF in Macromedia Flash 8(it has deprecated since then), Export the GIF as Animated GIF. You will have to choose the file location. After that you would receive a dialog box with settings. In that, add the number of times you want the animation to happen. Click OK. Problem solved.
I am trying to build a highlighting library with JavaScript and jQuery. I am just diving into Canvasing techniques this week and did not find them to be all that difficult. However, while working today my code has simply stopped working. I know I am probably just missing something obvious but I have been stuck like this for almost 2 hours now and I need to get this project moving forward again. any help would be greatly appreciated.
$(function() {
$('area').click(function(event) {
event.preventDefault();
document.getElementById("ctx").getContext("2d").fillStyle = "#FF0000";
document.getElementById("ctx").getContext("2d").fillRect(0, 0, 200, 200);
} );
} );
I have included my Javascript only since that is the only thing I have been changing recently.
Your code works for me, assuming:
The page has a clickable area.
The page has a canvas with an #id of ctx.
Make sure those 2 things are true about your setup...
Does your canvas element have an #id of ctx? That's not fatal, but the canvas element contains a context so it's a bit misleading.
If you have a canvas element like this:
<canvas id=canvas></canvas>
Then you can get a reusable reference to the canvas's context like this:
// no need to constantly get a context reference ...
// just do it once at the start of your app
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
And you can reuse that context reference to do all your drawing calls:
context.fillStyle='red';
context.fillRect(0,0,200,200);
So I'm trying to setup a web-page where when you open it, it will play a random piece of music, and when that one finishes, it will play another directly after so you get a constant stream of music, but not in the same order every time. If this goes outside the bounds of HTML and I'm looking at for instance JavaScipt than that's fine.
I know this is probably a rather easy solution, but I'm new to HTML and trying to understand it better.
Thanks in advance if I don't get back to you soon!
This is best solved using JavaScript, which is used to add behavior to a website. HTML is primarily used to structure your site.
We can get a collection of all audio elements with the querySelectorAll function. Then we find a random element with the next line and call the play method.
var audio = document.querySelectorAll("audio");
function playRandom() {
audio[Math.floor(Math.random() * audio.length)].play()
}();
For the second part of your question, you would want to listen for the ended event. Inside the event listener function, you would then call the playRandom() function.
audio.addEventListener("ended", function() {
playRandom();
});
I want to click on Starling buttons using the LeapMotion SCREEN_TAP gesture.
This is possible? To click the Starling button and see the regular push/shrink effect on it using this gesture?
If not...what is the best approach to achieve this?
Any help is welcome!
Regards.
I assume you could do this (I have never done it but I think it should work):
Check whether the tap's coordinates are over the button
If they are, swap the button's texture: var up:Texture = btn.upState; //save reference
btn.upState = btn.downState;
After X milliseconds swap them back: btn.upState = up;
I am building a browser songs personalized application. I am in the starting phase of the application where I want to click a button and change the song currently being played by the audio player in HTML5. I wanted to know how can I change the source of the audio. I tried using a ajax call when the button is clicked and then the following commands
var audio= document.getElementById("myplayer");
audio.src="E:/My Collection/abcd.mp3";
But this doesn't work and the same audio song continues. Can anyone help me with this. Thank You.
Take the list of your audio file in an array.
var audioArr = new Array();
audioArr = ["abc.mp3", "xyz.mp3"];
And, then onclick() of button you can pass index. Eg:
audio.src = audioArr[index];
I hope this works :)
in addition to what Bhavya said about array, add audio.load(); or audio.play(); after changing the src. it would make the audio tag reload.