是否可以控制动画 webP 图像的播放？

Question

webP 有 javascript API 吗？

我想寻找动画 webP 中的特定点。我没有遇到任何文件表明它确实如此，但询问 SO 并没有什么害处。

注意：我对 HTML5 视频元素、webM 或其他视频格式不感兴趣。

Answer 1

抽象的

\n

\n

webP 有 JavaScript API 吗？

\n

\n

在我看来，webP 不被支持作为API. 但您可以在后端和前端控制它们。

\n

最后一个，我所理解的，能够被操纵得不是很有效，但是被简化了！

\n

例如？

\n

\xe2\x9c\x93暂停动画\n

_{（但是我不建议这样做，例如这里）：}

\n

[].slice.apply(document.images).filter(is_webp_image).map(pause_webp);\n\nconst is_webp_image=(i)=> {\n    return /^(?!data:).*\\.webp/i.test(i.src);\n}\n\nconst pause_webp=(i)=> {\n    var c = document.createElement(\'canvas\');\n    var w = c.width = i.width;\n    var h = c.height = i.height;\n    c.getContext(\'2d\').drawImage(i, 0, 0, w, h);\n    try {\n        i.src = c.toDataURL("image/webp"); // if possible, retain all css aspects\n    } catch(e) { // cross-domain -- mimic original with all its tag attributes\n        for (var j = 0, a; a = i.attributes[j]; j++)\n            c.setAttribute(a.name, a.value);\n        i.parentNode.replaceChild(c, i);\n    }\n}\n

\n

那分别是暂停 webp 或 gif。

\n

\xe2\x9c\x93控制播放：

\n

为了控制播放，我建议像这样的伪代码一样在后端对 webp 进行切片；给定一个 webp 文件变量和一些自制或采用的后端 API（请参阅这只是一个示例）：

\n

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

\n

然后在前端JS：

\n

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

\n

我将其称为后端/前端/文件交互的介绍。

\n