Namby Pamby Magicians

    @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);

    Keywords

    none

    Install

    npm i @mux/blurhash

    DownloadsWeekly Downloads

    455

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    222 kB

    Total Files

    41

    Last publish

    Collaborators

    • mux-npmjs