<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdn.jsdelivr.net/npm/libgif@0.0.3/libgif.min.js"></script> <div class="container"> <div class="row"> <h2>Gif player</h2> <div class="controls"> <button id="prevFrame" class="btn btn-primary">◀ Prev</button> <button id="playPause" class="btn btn-success">▶ / ⏸</button> <button id="nextFrame" class="btn btn-primary">Next ▶</button> <div>Kare/Frame: <span id="currentFrame">0</span> / <span id="totalFrames">0</span></div> <input type="range" id="speedControl" min="10" max="1000" value="100"> <small class="text-muted">Hız (ms/kare) / Speed(ms/frame)</small> </div> <div class="gif-player-container"> <img id="gifImg" src="https://media.giphy.com/media/3o7aD2saalBwwftBIY/giphy.gif" style="display:none;" /> <canvas id="gifCanvas"></canvas> </div> </div> </div>

body { background-color: #f8f8f8; } .gif-player-container { max-width: 500px; margin: 40px auto; background-color: #fff; padding: 20px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-radius: 8px; } #gifCanvas { width: 100%; display: block; background: #eee; } .controls { margin-top: 15px; } .controls .btn { margin: 5px; } #speedControl { width: 100%; margin-top: 10px; }

const gif = new SuperGif({ gif: document.getElementById('gifImg'), auto_play: false, canvas: document.getElementById('gifCanvas') }); let playing = false; let currentSpeed = 100; let currentFrame = 0; gif.load(() => { document.getElementById('totalFrames').textContent = gif.get_length(); gif.move_to(0); updateFrameDisplay(); }); function updateFrameDisplay() { document.getElementById('currentFrame').textContent = gif.get_current_frame() + 1; } function playGif() { playing = true; loop(); } function pauseGif() { playing = false; } function loop() { if (!playing) return; gif.move_relative(1); updateFrameDisplay(); setTimeout(loop, currentSpeed); } document.getElementById('playPause').addEventListener('click', () => { if (playing) { pauseGif(); } else { playGif(); } }); document.getElementById('nextFrame').addEventListener('click', () => { gif.move_relative(1); updateFrameDisplay(); pauseGif(); }); document.getElementById('prevFrame').addEventListener('click', () => { gif.move_relative(-1); updateFrameDisplay(); pauseGif(); }); document.getElementById('speedControl').addEventListener('input', (e) => { currentSpeed = parseInt(e.target.value); }); // Klavye yön tuşları (← ve →) document.addEventListener('keydown', function (e) { if (e.key === 'ArrowRight') { gif.move_relative(1); updateFrameDisplay(); pauseGif(); } else if (e.key === 'ArrowLeft') { gif.move_relative(-1); updateFrameDisplay(); pauseGif(); } }); // Dokunmatik sürükleme desteği let touchStartX = 0; document.getElementById('gifCanvas').addEventListener('touchstart', function (e) { touchStartX = e.changedTouches[0].clientX; }); document.getElementById('gifCanvas').addEventListener('touchend', function (e) { const touchEndX = e.changedTouches[0].clientX; const diff = touchEndX - touchStartX; if (Math.abs(diff) > 30) { if (diff > 0) { gif.move_relative(-1); // sola kaydır –> önceki kare } else { gif.move_relative(1); // sağa kaydır –> sonraki kare } updateFrameDisplay(); pauseGif(); } });