Elements

Scroll down too see the Lazy Mux Player ↓

import muxBlurUp from '@mux/blurup'

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

function MuxPlayerLazyPage({ playbackId, blurDataURL, aspectRatio }) {
  return (
      <MuxPlayerLazy
        playbackId={playbackId}
        placeholder={blurDataURL}
        style={{ aspectRatio }}
        streamType="on-demand"
      />
  );
}

export const getStaticProps = async () => {
  const playbackId = "a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M"
  const { blurDataURL, aspectRatio } = await muxBlurUp(playbackId)

  return {
    props: {
      playbackId,
      blurDataURL,
      aspectRatio,
    }
  }
}

export default MuxPlayerLazyPage;