Skip to main content

React Integration

BlendVision Web Player SDK UI is built with React and provides component exports, integration is just like any other React component, just compose it into your app, and program declearatively with props.

Quick Start​

There is a sample project to start with.

Install latest version from npm into your project:

yarn add @blendvision/player^2.13.1

Import the player component from React sub-bundle:

import {PremiumPlayer} from '@blendvision/player/react'

Compose player component into your app:

const MyVideoApp = () => {
  const [source, setSource] = useState([
    {
      type: 'dash',
      src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/dash.mpd',
    },
    {
      type: 'hls',
      src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/hls.m3u8',
    }
  ], [])

  return (
    <div>
      <PremiumPlayer
        source={source}
      />
    </div>
  )
}

Source​

An object or an array of objects contains {type, src}.

Type: 'dash' | 'hls' type of manifests

Src: manifest URL of video

DRM​

To play videos with content protection, you should specify license server URLs and options with drm:

[
  {
    type: 'dash',
    src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/dash.mpd',
    drm: {
      widevine: 'https://drm.ex.com/portal',
      playready: 'https://drm.ex.com/portal',
    }
  },
  {
    type: 'hls',
    src: 'https://d2mxta927rohme.cloudfront.net/376c618f-b27a-4a3d-9457-ad7076ee87e3/vod/dea931c3-8766-477d-a87b-1c3f91490139/vod/hls.m3u8',
    drm: {
      fairplay: {
        licenseUri: 'https://drm.ex.com/portal',
        certificateUri: 'https://drm.ex.com/portal/certificate'
      }
    }
  }
]

Video Status & Control​

Declarative playback control & play / pause

<PremiumPlayer> & <Video> let you control playback declaratively, in a React way.

This is how you can tell our video component to start playback in JSX:

<PremiumPlayer playbackState='playing' />

playbackState defines final desired state of the video, if you want the video paused, just use playbackState='paused'

Changes to props are converted into sequence of imperative API calls, under the hood, so no need to worry about consecutive changes of state.

Unlike <input value="xyz" />, playbackState doesn’t lock play / pause of the video.

For example, <PremiumPlayer> comes with built-in UI, and its play/paused also controls the video. The play / pause button updates with video state, and if pause button is tapped after passed prop is updated to playbackState='playing' , the video will result paused, it follow whichever latest updated.

Current playback time & Seek

Seek can also be done declaratively, to let the video play from 17 seconds, use prop currentTime:

<PremiumPlayer currentTime={17} />

And current playback time can be obtained from onTimeUpdate, just like how you use the video element:

<PremiumPlayer
  onTimeUpdate={event =>
    console.log('current playback time', event.target.currentTime)
  }
/>

Caveats​

In case playbackState='playing' is passed, the video is paused by the user, and you want to make it play again, just clear the state with playbackState={undefined} then pass playbackState='playing', changes is needed to trigger.

const [playbackState, setPlaybackState] = useState()


useEffect(() => {
  on('some-event', () => setPlaybackState('playing'))
}, [])

<PremiumPlayer
  playbackState={playbackState}
  onPlaybackStateChange{() => setPlaybackState(undefined)}
/>