@mux/blurhash
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

@mux/blurhash

A server-side package for node that uses woltapp/blurhash and sharp to make placeholders for Mux videos. Works nicely with Mux Player.

Installation

npm install @mux/blurhash

or

yarn add @mux/blurhash

Examples

Usage

Run @mux/blurhash server-side. @mux/blurhash will not work in the browser.

import muxBlurHash from '@mux/blurhash';

const playbackId = '3fevCt00ntwf7WxwvBhRo1EZ01IoABwo2d';
const { blurHash, blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(playbackId);

Using blurHashBase64 with Mux Player

mux-player element

<mux-player
	placeholder="{blurHashBase64}"
	style="aspect-ratio: {sourceWidth}/{sourceHeight}"
></mux-player>

mux-player-react and mux-player-react/lazy

<MuxPlayer placeholder={blurHashBase64} style={{ aspectRatio: sourceWidth / sourceHeight }} />

See the examples directory to learn more

Using blurHashBase64 with native elements

HTML

<img src="{blurHashBase64}" width="{sourceWidth}" height="{sourceHeight}" />

CSS

background-image: url({blurHashBase64});
aspect-ratio: {sourceWidth}/{sourceHeight};

Using blurHash with JavaScript

Canvas

See documentation for blurhash.decode

Options

@mux/blurhash will accept an optional second parameter that will allow configuration of the blurhash.

Parameter Type Description Default
blurWidth number The image will be compressed to this width before blurring. Lower values load faster but have less detail. 32
blurHeight number The image will be compressed to this height before blurring. Lower values load faster but have less detail. 32
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)
thumbnailToken string Videos with playback restrictions may require a thumbnail token. See https://docs.mux.com/guides/video/secure-video-playback for details

For example...

import muxBlurHash from '@mux/blurhash';

// a lower resolution blurHash that will load more quickly
const options = { blurWidth: 16, blurHeight: 16 };
const { blurHash } = await muxBlurHash(playbackId, options);

Readme

Keywords

none

Package Sidebar

Install

npm i @mux/blurhash

Weekly Downloads

2,033

Version

0.1.2

License

MIT

Unpacked Size

222 kB

Total Files

41

Last publish

Collaborators

  • mux-npmjs