Reveal.js: Question how can i restart GIFs

[nielsnuebel]

https://github.com/hakimel/reveal.js/blob/master/js/reveal.js#L2781

now i uses viewDistance: 1;

Problem i when the slide is a past Slide the gif is already running.

Here is my solution:
https://gist.github.com/nielsnuebel/f27ee60a315f01574f8258a574afa219

[bnjmnt4n]

I don't think there's a really fool proof way of restarting GIFs across various browsers. Perhaps you could do what Twitter and others have done by converting them to videos and playing those instead. This doesn't seem to be something Reveal can do much about, so I'm closing this.

[nielsnuebel]

Hi Benjamin,

i've found a solution for that.

http://joomladaytemplate.niels-nuebel.de/#/52

https://github.com/nielsnuebel/joomladaytemplate/blob/96e957a33eaabe7120673895b4351ef180906389/assets/js/reveal.js#L2781-L2795

[krasimir]

In case of someone hits the same problem - you have a gif that needs to start from the beginning every time when you change the slide:

Reveal.addEventListener('slidechanged', function(event) {
    var gifAttr = event.currentSlide.getAttribute('data-gif');
    if (gifAttr && gifAttr === 'repeat') {
        var img = event.currentSlide.querySelector('img');
        var gif = img.getAttribute('src');

        img.setAttribute('src', gif + '?t=' + (new Date().getTime()));
    }
}, false);

And then add data-gif="repeat" to your <section> tag like:

<section data-gif="repeat"><img src="assets/field.gif" /></section>

@nielsnuebel I guess you are doing almost the same thing right. The difference is that the solution above uses the API of reveal and you don't have to modify the core file.