api.video React Player component
api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.
Project description
The official api.video React Player component.
Getting started
Installation
$ npm install --save @api.video/react-player
Basic usage
You can then use the component in your app:
import ApiVideoPlayer from '@api.video/react-player'
// ...
<ApiVideoPlayer video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} style={{ height: '480px' }} />
Documentation
Properties
Settings
The following properties are used to configure the player. The value of each of these properties can be changed at any time during the playback.
Controls
The controls
property let you decide wich controls should be displayed on the player. Here is the list of all available controls: play
, seekBackward
, seekForward
, playbackRate
, volume
, fullscreen
, subtitles
, chapters
, pictureInPicture
, progressBar
, chromecast
, download
, more
.
Examples
{/* default: all controls are displayed */}
<ApiVideoPlayer
video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} style={{ height: '480px' }} />
{/* all controls hidden (equivalent to chromeless=true) */}
<ApiVideoPlayer
video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
style={{ height: '480px' }}
controls={[]} />
{ /* only the play button & the unmute one are displayed */}
<ApiVideoPlayer
video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
style={{ height: '480px' }}
controls={["play", "unmute"]}/>
Player theme
The theme
property let you customize the color of some elements on the player. Here is the list of customizable elements: text
, link
, linkHover
, trackPlayed
, trackUnplayed
, trackBackground
, backgroundTop
, backgroundBottom
, backgroundText
, linkActive
.
Example
{ /* display the text in blue and the progress bar in red */}
<ApiVideoPlayer
video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
style={{ height: '480px' }}
theme={{
trackPlayed: "#FF0000",
text: "blue"
}}/>
Ads
Ads can be displayed in the player. To do so, you need to pass the ads
option to the sdk constructor. In the ads
object, pass the adTagUrl
property with the url of the ad tag. The ad tag must be a VAST 2.0 or 3.0 url. For more information about VAST, check the IAB documentation.
Note: ads are displayed using the Google IMA SDK.
Responsiveness
With responsive={true}
, the player height will be automatically set to match the video with/height ratio, depending on the width of player.
Example
{ /* the player width is 160px and response is true: if the video in a 16/9 one, the height of the player will be automatically set to 90px (160 / (16/9)) */ }
<ApiVideoPlayer
video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
style={{width: "160px"}}
responsive={true} />
Callbacks
Methods
Use cases
Private videos
To play a private video, add the video view token in the video attribute:
// ...
<ApiVideoPlayer video={{
id: "vi5fv44Hol1jFrCovyktAJS9",
token: "e1bdf9a8-da40-421e-87f3-75b15232c531"}}
style={{ height: '480px' }} />
Defining metadata
// ...
<ApiVideoPlayer
video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
style={{ height: '480px' }}
metadata={{"userName": "Alfred"}} />
Define your own controls
const playerRef = useRef<ApiVideoPlayer>(null);
return
<ApiVideoPlayer
video={{ id: "vi5jC9kQs2I3PdmVBjgcIg45" }}
style={{ height: '480px' }}
chromeless={true}
ref={playerRef}>
<button onClick={() => playerRef.current?.play()}>play</button>
<button onClick={() => playerRef.current?.pause()}>pause</button>
</ApiVideoPlayer>
Was this page helpful?