Comments (2)
git clone https://github.com/Kagami/avif.js
npm i
git apply parcel.patch # this step is important
npm start
In the dist dir it will contain the demo.js
, avif-sw.js
, dav1d.wasm (the AV1 polyfill)
and their source map files.
An example of using api exposed from avif.js
can be seen here:
Line 4 in 69b5290
from avif.js.
Detailed example:
- Create file
/index.js
(filename is not important) with the following content:
import avif from './avif.js';
avif.register(navigator.serviceWorker.register('avif-sw.js'), {
wasmURL: 'https://example.com/dav1d.wasm')
});
- Then run
./node_modules/.bin/parcel build index.js
- The
/dist/index.js
will be your UMD build, you can use it by a static import like<script src="url/to/dist/index.js">
or dynamically load it (like$.getScript()
or append a<script src="">
tag) when you detected the user's browser does not support decoding avif natively.
3.1. How to detect avif supporting: https://github.com/Modernizr/Modernizr/blob/6d56d814b9682843313b16060adb25a58d83a317/feature-detects/img/avif.js
3.2. and av1 codec: https://github.com/Modernizr/Modernizr/blob/86ebb0447a8f698b22320b2bb560968050d47cf7/feature-detects/video/video.js#L60 or use a simply one-lineardocument.createElement('video').canPlayType('video/mp4; codecs="av01"') === ''
3.2.1 If the user's browser (for example within the range chrome 58~70) doesn't have av1 codec then the wasm-baseddav1d.js
AV1 polyfill will be served from/dav1d.wasm
.
3.2.2 so the content of urlhttps://example.com/dav1d.wasm
should be same with the file/node_modules/dav1d.js/dav1d.wasm
, you can just upload it. /dist/index.js
will contain only the bundled content ofavif.js
andindex.js
, so you will still have to put the/dist/avif-sw.js
under your domain root url or the/dist/index.js
will be unable to register the service worker from 404.- If you wanna stop using the
avif.js
for your site, you can't just delete the/dist/index.js
and remove its references, but also have to unregister theavif-sw.js
worker to prevent all future web requests with url ends with.avif
being staled by this service worker that caused by following execution flow:
Line 124 in 69b5290
Line 80 in 69b5290
Line 126 in 69b5290
Line 104 in 69b5290
Line 24 in 69b5290
from avif.js.
Related Issues (13)
- Doesn't work on first page load HOT 1
- Doesn't work on Chrome Mobile HOT 2
- Polyfill path silently fails with Netflix test data HOT 4
- Method of using without bundler HOT 5
- ?src= query parameter for alternative test files HOT 3
- Add support for the alpha channel
- Vue support HOT 3
- Static html support HOT 1
- Polyfill fails on refresh for individual images
- Vitepress introduces plug-ins to compile error
- Support HDR AVIF via HDR Canvas
- Demo is not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from avif.js.