Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
@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 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 1,268 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
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.