Animated AVIF

[mathiasbynens]

Animated AVIF

[mathiasbynens]

FWIW, I looked into this a while back, and couldn’t find a good way to specifically detect animated AVIF without depending on the ImageDecoder API. The problem is, the ImageDecoder API is itself not supported across browsers yet.

Here’s what I ended up with:

// A hand-made 1×1px two-frame animation: a red frame followed by a green frame.
// Note that AVIF animations always loop indefinitely.
const ANIMATED_AVIF_URL = 'data:image/avif;base64,AAAALGZ0eXBhdmlzAAAAAGF2aXNhdmlmbXNmMWlzbzhtaWYxbWlhZk1BMUEAAAD5bWV0YQAAAAAAAAAvaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAFBpY3R1cmVIYW5kbGVyAAAAAA5waXRtAAAAAAABAAAAHmlsb2MAAAAARAAAAQABAAAAAQAAA7gAAAAkAAAAKGlpbmYAAAAAAAEAAAAaaW5mZQIAAAAAAQAAYXYwMUNvbG9yAAAAAGppcHJwAAAAS2lwY28AAAAUaXNwZQAAAAAAAAACAAAAAgAAABBwaXhpAAAAAAMICAgAAAAMYXYxQ4EgAAAAAAATY29scm5jbHgAAgACAACAAAAAF2lwbWEAAAAAAAAAAQABBAECgwQAAAKLbW9vdgAAAGxtdmhkAAAAAAAAAAAAAAAAAAAyAAAAAAAAAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAhd0cmFrAAAAXHRraGQAAAADAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAIAAAACAAAAAAGzbWRpYQAAACBtZGhkAAAAAAAAAAAAAAAAAAAyAAAABABVxAAAAAAAL2hkbHIAAAAAAAAAAHBpY3QAAAAAAAAAAAAAAABQaWN0dXJlSGFuZGxlcgAAAAFcbWluZgAAABR2bWhkAAAAAQAAAAAAAAAAAAAAJGRpbmYAAAAcZHJlZgAAAAAAAAABAAAADHVybCAAAAABAAABHHN0YmwAAACcc3RzZAAAAAAAAAABAAAAjGF2MDEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAgACAEgAAABIAAAAAAAAAAEYTGF2YzU5LjQ0LjEwMCBsaWJhb20tYXYxAAAAAAAAAAAY//8AAAAMYXYxQ4EgAAAAAAAKZmllbAEAAAAAEHBhc3AAAAABAAAAAQAAABBjY3N0AAAAAHwAAAAAAAAYc3R0cwAAAAAAAAABAAAAAgAAAgAAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAAAgAAAAEAAAAcc3RzegAAAAAAAAAAAAAAAgAAACQAAAAbAAAAFHN0Y28AAAAAAAAAAQAAA7gAAABHbWRhdAoLIAAAAAZ//NAQ0AIyFRAAwAAAAoAAAAX172TdcwHjmhthyDIZMAPAgAAABsAAAAKAAACAAB6cDnVHjqg2Jg==';

function supportsStaticAvif() {
  const promise = new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = ANIMATED_AVIF_URL;
  });
  return promise;
}

async function supportsAnimatedAvif() {
  const response = await fetch(ANIMATED_AVIF_URL);
  const bytes = response.body;
  const imageDecoder = new ImageDecoder({
    data: bytes,
    type: 'image/avif',
  });
  const result = await imageDecoder.decode();
  return imageDecoder.tracks.selectedTrack.animated && imageDecoder.tracks.length > 1;
}

[eoyoa]

Hi, I would like to try contributing. Could I be assigned this issue?

[eoyoa]

Apologies, but I am currently unavailable to work on this issue, so I will unassign myself. Thank you for the opportunity regardless.