New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Animated AVIF #2701
Comments
Hi, I would like to try contributing. Could I be assigned this issue? |
FWIW, I looked into this a while back, and couldn’t find a good way to specifically detect animated AVIF without depending on the // 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;
} |
Apologies, but I am currently unavailable to work on this issue, so I will unassign myself. Thank you for the opportunity regardless. |
Which feature do you want to detect?
Support for animated AVIF images, a.k.a. AVIF image sequences.
Which browsers do support this feature?
https://caniuse.com/avif
Although all major browsers support AVIF for still images, only Chrome supports animated AVIF. Per @jensimmons’s tweet, Safari will support animated AVIF in Safari 16.1 (scheduled for release in October 2022).
Until all browsers advertising AVIF support also support animations, this poses an interoperability problem where developers cannot rely on the browser to do format selection by using
<picture>
+<source>
. A JavaScript feature test would help bridge this unfortunate gap.How could it be implemented?
There’s existing tests for animated image formats:
I suspect we could follow these examples.
Additional context
A feature test for (static) AVIF support was added in #2539.
The text was updated successfully, but these errors were encountered: