diff --git a/templates/documentation/sdks/player/apivideo-react-player.md b/templates/documentation/sdks/player/apivideo-react-player.md index 5ca7ca5b..07d26af9 100644 --- a/templates/documentation/sdks/player/apivideo-react-player.md +++ b/templates/documentation/sdks/player/apivideo-react-player.md @@ -3,11 +3,18 @@ title: api.video React Player component meta: description: The official api.video React Player component for api.video. [api.video](https://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. --- + # api.video React Player component [api.video](https://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 + + ## Getting started A React component for playing api.video videos. @@ -22,8 +29,6 @@ $ npm install --save @api.video/react-player You can then use the component in your app: -{% raw %} - ```tsx import ApiVideoPlayer from '@api.video/react-player' @@ -32,8 +37,6 @@ import ApiVideoPlayer from '@api.video/react-player' ``` -{% endraw %} - ## Documentation ### Properties @@ -62,79 +65,65 @@ The following properties are used to configure the player. The value of each of | videoStyleObjectFit | no | "contain" \| "cover" \| "fill" \| "none" \| "scale-down" | The `object-fit` CSS value of the video tag | undefined | | videoStyleTransform | no | string | The `transform` CSS value of the video tag (examples: "rotateY(180deg)") | undefined | | ads | no | {adTagUrl: string} | see below [ads](#ads) | - -#### Controls +##### 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`. -{% raw %} - -> Examples -> +Examples > ```tsx -> {/* default: all controls are displayed */} -> video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} /> -> -> {/* all controls hidden (equivalent to chromeless=true) */} -> video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} -> controls={[]} /> -> -> { /* only the play button & the unmute one are displayed */} -> video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} -> controls={["play", "unmute"]}/> -> ``` - -{% endraw %} - -#### Player theme +{/* default: all controls are displayed */} + + +{/* all controls hidden (equivalent to chromeless=true) */} + + +{ /* only the play button & the unmute one are displayed */} + +``` + +##### 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 + +```tsx +{ /* display the text in blue and the progress bar in red */} + +``` -{% raw %} -> Example -> -> ```tsx -> { /* display the text in blue and the progress bar in red */} -> video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} -> theme={{ -> trackPlayed: "#FF0000", -> text: "blue" -> }}/> -> ``` - -{% endraw %} - -#### Ads +##### 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](https://www.iab.com/guidelines/vast/). Note: ads are displayed using the [Google IMA SDK](https://developers.google.com/interactive-media-ads/docs/sdks/html5/quickstart). -#### Responsiveness +##### Responsiveness With `responsive={true}`, the player height will be automatically set to match the video with/height ratio, depending on the width of player. -{% raw %} +Example -> Example -> -> ```tsx -> { /* 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)) */} -> video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} -> style={{width: "160px"}} -> responsive={true} /> -> ``` - -{% endraw %} +```tsx +{ /* 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)) */} + +``` -### Callbacks +#### Callbacks | Property | Type | Description | | ---------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | @@ -160,7 +149,7 @@ With `responsive={true}`, the player height will be automatically set to match t | onVolumeChange | (volume: number) => void | Called when the volume changes. The volume is provided. | | onDurationChange | (duration: number) => void | Called when the duration of the video change. The duration is provided | -## Methods +### Methods | Method | Description | | ---------------------------- | --------------------------------------------------------------------------------------------------- | @@ -173,15 +162,13 @@ With `responsive={true}`, the player height will be automatically set to match t | requestPictureInPicture() | Request picture in picture mode (this may not work in some cases depending on browser restrictions) | | exitPictureInPicture() | Leave picture in picture mode | -## Use cases +### Use cases -### Private videos +#### Private videos To play a [private video](https://api.video/blog/tutorials/tutorial-private-videos/), add the video view token in the video attribute: -{% raw %} - ```tsx // ... ``` -{% endraw %} - -### Defining metadata - -{% raw %} +#### Defining metadata ```tsx // ... @@ -202,12 +185,7 @@ To play a [private video](https://api.video/blog/tutorials/tutorial-private-vide metadata={{"userName": "Alfred"}} /> ``` -{% endraw %} - -### Define your own controls - - -{% raw %} +#### Define your own controls ```tsx @@ -222,5 +200,3 @@ return ``` - -{% endraw %} \ No newline at end of file