Skip to content

Latest commit

 

History

History
93 lines (67 loc) · 4.49 KB

README.md

File metadata and controls

93 lines (67 loc) · 4.49 KB

@mux/blurup

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

Installation

npm install @mux/blurup

Usage (Demo)

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%" ...

Options

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

Using blurDataURL with Mux Player

Be sure to escape the double quotes in the blurDataURL string when using it in an HTML attribute.

mux-player element

<mux-player placeholder="{blurDataURL}" style="aspect-ratio: {aspectRatio}"></mux-player>

mux-player element with slotted poster (Demo)

<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>

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

<MuxPlayer placeholder={blurDataURL} style={{ aspectRatio }} />

Using blurDataURL with native elements

Be sure to escape the double quotes in the blurDataURL string when using it in an HTML attribute.

HTML

<img src="{blurDataURL}" width="300" style="aspect-ratio: {aspectRatio}" />

CSS

background-image: url('{blurDataURL}');
aspect-ratio: {aspectRatio};