9

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.

Oisin Lavery
  • 3,444
  • 2
  • 20
  • 18

1 Answers1

-1

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.

Beauty Of Salvation In Christ
  • 13
  • 1
  • 13