CODEWITHSUNDEEP
javascripthtmlimagewebp
Oisin Lavery
Oisin Lavery

Reputation: 3454

Is it possible to control playback of animated webP images?

Does webP have a javascript API?

I want to seek to a specific point in an animated webP. I haven't come across any documentation to suggest it does but no harm asking SO.

Note: I'm not interested in the HTML5 video element, webM or other video formats.

Upvotes: 10

Views: 2257

Answers (2)

Yoz
Yoz

Reputation: 990

As of 2024 there is an experimental support in chromium based browsers for ImageDecoder which does provide an API to extract individual particular frames which can be eventually used to mimic control of the playback.

Upvotes: 3

Beauty Of Salvation In Christ
Beauty Of Salvation In Christ

Reputation: 21

Abstract

Does webP have a JavaScript API?

It seems to me that webP is not supported as an API. But you could control them on the backend and on the frontend.

The last, the one that I understand, is able to be manipulated not very efficiently but being simplified!

For example?

✓Pausing an animation

(however I wouldn't recommend doing such a thing, exampled here):

[].slice.apply(document.images).filter(is_webp_image).map(pause_webp);

const is_webp_image=(i)=> {
    return /^(?!data:).*\.webp/i.test(i.src);
}

const pause_webp=(i)=> {
    var c = document.createElement('canvas');
    var w = c.width = i.width;
    var h = c.height = i.height;
    c.getContext('2d').drawImage(i, 0, 0, w, h);
    try {
        i.src = c.toDataURL("image/webp"); // if possible, retain all css aspects
    } catch(e) { // cross-domain -- mimic original with all its tag attributes
        for (var j = 0, a; a = i.attributes[j]; j++)
            c.setAttribute(a.name, a.value);
        i.parentNode.replaceChild(c, i);
    }
}

That was pausing respectively a webp or gif.

✓Controlling playback:

To control playback, I recommend to slice the webp on the backend like this pseudocode; given a webp file variable and some self-made or adopted backend API there (see that it is just an example of this):

// pseudocode on backend:
    var li=[];
    for(var itr=0;itr<len(webp)/*how long*/ ;itr++){
     list.push( giveWebURI (webp.slice(itr,len(webp)))); 
//                ^  e.g http://example.org/versions/75-sec-until-end.webp# 
    };

Then on the frontend JS:

    const playFrom=(time)=>{
    document.querySelector(/*selector*/).src=`
http://example.org/versions/${time}-sec-until-end.webp
     `;
     };

I would call this but an introduction into backend/frontend/file interactions.

Upvotes: 0

Related Questions