MediaWiki:PauseWebpExample.js

$(function () {
  const canvas = $('<canvas>', {
    id: 'pikemanCanvas',
    width: 64,
    height: 64,
    css: { border: '1px solid #ccc', display: 'block', margin: '10px 0' }
  }).appendTo('#bodyContent')[0];
  const ctx = canvas.getContext('2d');

  const imageURL = 'https://heroes.thelazy.net/images/f/f1/Pikeman.webp';
  const frames = [];
  let currentFrame = 0;
  let isPlaying = true;
  let frameDuration = 100;
  let lastUpdate = 0;

  window.togglePikemanAnimation = function () {
    isPlaying = !isPlaying;
  };

  $('<button>', {
    text: 'Pause/Play',
    click: window.togglePikemanAnimation
  }).appendTo('#bodyContent');

  fetch(imageURL)
    .then(response => response.arrayBuffer())
    .then(buffer => {
      const decoder = new VideoDecoder({
        output: function (videoFrame) {
          createImageBitmap(videoFrame).then(bitmap => {
            frames.push(bitmap);
            videoFrame.close();
          });
        },
        error: function (e) {
          console.error('Decoder error:', e);
        }
      });

      decoder.configure({ codec: 'vp8' });

      const chunk = new EncodedVideoChunk({
        type: 'key',
        timestamp: 0,
        data: new Uint8Array(buffer)
      });

      decoder.decode(chunk);

      // Wait until at least one frame is decoded before starting animation
      const waitForFrames = function () {
        if (frames.length > 0) {
          drawFrame(0);
          requestAnimationFrame(animate);
        } else {
          setTimeout(waitForFrames, 50);
        }
      };

      waitForFrames();
    });

  function drawFrame(index) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(frames[index], 0, 0, canvas.width, canvas.height);
  }

  function animate(timestamp) {
    if (!lastUpdate) lastUpdate = timestamp;
    const delta = timestamp - lastUpdate;

    if (isPlaying && delta > frameDuration && frames.length > 0) {
      currentFrame = (currentFrame + 1) % frames.length;
      drawFrame(currentFrame);
      lastUpdate = timestamp;
    }

    requestAnimationFrame(animate);
  }
});