Elements

Scroll down too see the Lazy Mux Player ↓

import muxBlurHash from '@mux/blurhash'

import MuxPlayerLazy from '@mux/mux-player-react/lazy';

function MuxPlayerLazyPage({ playbackId, blurHashBase64, sourceWidth, sourceHeight }) {
  return (
      <MuxPlayerLazy
        playbackId={playbackId}
        placeholder={blurHashBase64}
        style={{ aspectRatio: `${sourceWidth}/${sourceHeight}` }}
        streamType="on-demand"
      />
  );
}

export const getStaticProps = async () => {
  const playbackId = "a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M"
  const { blurHashBase64, sourceWidth, sourceHeight } = await muxBlurHash(playbackId)

  return {
    props: {
      playbackId,
      blurHashBase64,
      sourceWidth,
      sourceHeight
    }
  }
}

export default MuxPlayerLazyPage;