
Security News
TC39 Advances 11 Proposals for Math Precision, Binary APIs, and More
TC39 advances 11 JavaScript proposals, with two moving to Stage 4, bringing better math, binary APIs, and more features one step closer to the ECMAScript spec.
@mux/blurup
Advanced tools
JavaScript API to generate a blurry image placeholder for a Mux video.
The library retrieves a tiny video poster image from the Mux API and generates a blurry image placeholder by upscaling the image and applying a Gaussian blur.
See the blog post for more information: www.mux.com/blog/blurry-image-placeholders-on-the-web
npm install @mux/blurup
import { createBlurUp } from '@mux/blurup';
const options = {};
const muxPlaybackId = 'O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k';
const { blurDataURL, aspectRatio } = await createBlurUp(muxPlaybackId, options);
console.log(blurDataURL, aspectRatio);
// data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" ...
Parameter | Type | Description | Default |
---|---|---|---|
time | number | The video timestamp from which to grab the blurhash. (If you're using a thumbnailToken , then the time option will have no effect; encode time in your token according to the secure video playback guide linked below) | undefined |
width | string | Width of the output blurry image placeholder. | 100% |
height | string | Height of the output blurry image placeholder. | 100% |
blur | number | Standard deviation of the Gaussian blur. | 20 |
quality | number | Quality of the output image. Increase this value to see more details but also increase the length of the data. Set a quality greater than or equal to 1. URL. | 1 |
thumbnailToken | string | Videos with playback restrictions may require a thumbnail token. See https://docs.mux.com/guides/video/secure-video-playback for details. | undefined |
type | webp png jpg | Image type to use in the output blurry image placeholder. | webp |
blurDataURL
with Mux PlayerBe sure to escape the double quotes in the blurDataURL
string when using it in an HTML attribute.
<mux-player placeholder="{blurDataURL}" style="aspect-ratio: {aspectRatio}"></mux-player>
<mux-player style="aspect-ratio: {aspectRatio}">
<img
slot="poster"
src="{posterURL}"
style='
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: url("{blurDataURL}");
'
>
</mux-player>
<MuxPlayer placeholder={blurDataURL} style={{ aspectRatio }} />
blurDataURL
with native elementsBe sure to escape the double quotes in the blurDataURL
string when using it in an HTML attribute.
<img src="{blurDataURL}" width="300" style="aspect-ratio: {aspectRatio}" />
background-image: url('{blurDataURL}');
aspect-ratio: {aspectRatio};
FAQs
Generate a blurry image placeholder for a Mux video.
The npm package @mux/blurup receives a total of 3,144 weekly downloads. As such, @mux/blurup popularity was classified as popular.
We found that @mux/blurup demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 advances 11 JavaScript proposals, with two moving to Stage 4, bringing better math, binary APIs, and more features one step closer to the ECMAScript spec.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.