Player

The example below shows our drop-in player for easily viewing media content! The example below uses the Player to view a video asset, with some custom styles to demonstrate what's possible with the player.

Step 1: Configuring Providers

First, we create a new livepeer.js client with the Studio provider and a CORS-protected API key, as well as a theme to use for all livepeer.js React components.

App.tsx

import {
  LivepeerConfig,
  ThemeConfig,
  createReactClient,
  studioProvider,
} from '@livepeer/react';
import * as React from 'react';
 
const livepeerClient = createReactClient({
  provider: studioProvider({
    apiKey: process.env.NEXT_PUBLIC_STUDIO_API_KEY,
  }),
});
 
const theme: ThemeConfig = {
  colors: {
    accent: 'rgb(0, 145, 255)',
    containerBorderColor: 'rgba(0, 145, 255, 0.9)',
  },
  fonts: {
    display: 'Inter',
  },
};
 
function App() {
  return (
    <LivepeerConfig client={livepeerClient} theme={theme}>
      <CreateAndViewAsset />
    </LivepeerConfig>
  );
}

Step 2: Play Video

Now that our providers are set up, we use the Player with an IPFS CID as our playbackId, which we created previously when uploading a video asset and storing to IPFS. We use Next.js Image as our optimized poster image, but this could also be a simple image URL.

We also override some of the custom styling to match the flow of our app!

DemoPlayer.tsx

import { Player } from '@livepeer/react';
 
import Image from 'next/image';
 
const playbackId =
  'bafybeida3w2w7fch2fy6rfvfttqamlcyxgd3ddbf4u25n7fxzvyvcaegxy';
 
import blenderPoster from '../../public/images/blender-poster.png';
 
const PosterImage = () => {
  return (
    <Image
      src={blenderPoster}
      layout="fill"
      objectFit="cover"
      priority
      placeholder="blur"
    />
  );
};
 
export const DemoPlayer = () => {
  return (
    <Player
      title="Waterfalls"
      playbackId={playbackId}
      showPipButton
      showTitle={false}
      aspectRatio="16to9"
      poster={<PosterImage />}
      controls={{
        autohide: 3000,
      }}
      theme={{
        borderStyles: { containerBorderStyle: 'hidden' },
        radii: { containerBorderRadius: '10px' },
      }}
    />
  );
};

Wrap Up

That's it! You just used the video player component to easily integrate Livepeer video!

Last updated on 11/30/2022

Contract Addresses Create & Watch a Stream