It can control your GIF to pause or play!
npm i gif-controller
OR
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>
const gifRenderer = new GifRenderer('#img');
gifRenderer.startRendering();
Example:
<img id="gifImg" style="width: 200px; height: 200px;" src="/image/lofi.gif" alt="">
<p><button id="b">stop</button></p>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js"></script>
<script>
const gifRenderer = new GifRenderer('#gifImg');
gifRenderer.startRendering();
b.onclick = function () {
if (gifRenderer.paused) {
this.textContent = 'stop';
gifRenderer.play();
} else {
this.textContent = 'play';
gifRenderer.pause();
}
};
</script>Vue:
<script setup>
import { GifRenderer } from "gif-controller";
import { onMounted, ref } from "vue";
const gif = ref(null);
let gifRenderer = null;
onMounted(() => {
gifRenderer = new GifRenderer(gif.value);
gifRenderer.startRendering();
});
</script>MIT