Merge pull request #191 from apivideo/react-player-olivierapivideo-pa…

…tch-2 [SDK README - api.video-react-player] Update README.md
apivideo · Nov 21, 2023 · 1ee6ff2 · 1ee6ff2
2 parents 5cbd1e8 + d9ae99f
commit 1ee6ff2
Showing 1 changed file with 71 additions and 75 deletions.
diff --git a/sdks/player/apivideo-react-player.md b/sdks/player/apivideo-react-player.md
@@ -1,16 +1,23 @@
 ---
 title: api.video React Player component
-meta: 
+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.
 ---
+<!--
+THIS FILE IS AUTOMATICALLY GENERATED. DO NOT EDIT!
+ IF YOU NEED TO CHANGE THIS FILE,  CREATE A PR IN THE SOURCE REPOSITORY.
+-->
 
 # 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.
 
-## Getting started
 
-A React component for playing api.video videos.
+## Project description
+
+The official api.video React Player component.
+
+## Getting started
 
 ### Installation
 
@@ -20,18 +27,17 @@ $ npm install --save @api.video/react-player
 
 ### Basic usage
 
-You can then use the component in your app: 
+You can then use the component in your app:
 
-{% raw %}
 
+{% raw %}
 ```tsx
 import ApiVideoPlayer from '@api.video/react-player'
 
 // ...
 
 <ApiVideoPlayer video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
 ```
-
 {% endraw %}
 
 ## Documentation
@@ -48,7 +54,7 @@ The following properties are used to configure the player. The value of each of
 | style               | no        | React.CSSProperties                                                                              | CSS style to apply to the player container                                                                                      | {}        |
 | autoplay            | no        | boolean                                                                                          | Define if the video should start playing as soon as it is loaded                                                                | false     |
 | muted               | no        | boolean                                                                                          | The video is muted                                                                                                              | false     |
-| metadata            | no        | { [key: string]: string }                                                                        | Object containing [metadata](https://api.video/blog/tutorials/dynamic-metadata/) (see **example** below)                         | {}        |
+| metadata            | no        | { [key: string]: string }                                                                        | Object containing [metadata](https://api.video/blog/tutorials/dynamic-metadata/) (see **example** below)                        | {}        |
 | hidePoster          | no        | boolean                                                                                          | Weither if the poster image displayed before the first play of the video should be hidden                                       | false     |
 | chromeless          | no        | boolean                                                                                          | Chromeless mode: all controls are hidden                                                                                        | false     |
 | loop                | no        | boolean                                                                                          | Once the video is finished it automatically starts again                                                                        | false     |
@@ -61,80 +67,75 @@ The following properties are used to configure the player. The value of each of
 | responsive          | no        | boolean                                                                                          | Weither if the player shoulb be responsive. See below [responsiveness](#responsiveness)                                         | false     |
 | 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) |
+| 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`.
 
-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
 
 
 {% raw %}
+```tsx
+{/* default: all controls are displayed */}
+<ApiVideoPlayer 
+ video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
 
-> Examples
->
-> ```tsx
-> {/* default: all controls are displayed */}
-> <ApiVideoPlayer 
->  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}} />
-> 
-> {/* all controls hidden (equivalent to chromeless=true) */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   controls={[]} />
-> 
-> { /* only the play button & the unmute one are displayed */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   controls={["play", "unmute"]}/>
-> ```
+{/* all controls hidden (equivalent to chromeless=true) */}
+<ApiVideoPlayer 
+  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+  controls={[]} />
 
+{ /* only the play button & the unmute one are displayed */}
+<ApiVideoPlayer 
+  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+  controls={["play", "unmute"]}/>
+```
 {% endraw %}
 
-#### Player theme
+
+##### 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
 
 {% raw %}
-
-> Example
-> 
-> ```tsx
-> { /* display the text in blue and the progress bar in red */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   theme={{
->     trackPlayed: "#FF0000",
->     text: "blue"
->   }}/>
-> ```
-
+```tsx
+{ /* display the text in blue and the progress bar in red */}
+<ApiVideoPlayer
+  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. 
+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)) */}
-> <ApiVideoPlayer 
->   video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
->   style={{width: "160px"}}
->   responsive={true} />
-> ```
 
+{% raw %}
+```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)) */ }
+<ApiVideoPlayer 
+  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+  style={{width: "160px"}}
+  responsive={true} />
+```
 {% endraw %}
 
-### Callbacks
+#### Callbacks
 
 | Property               | Type                                                    | Description                                                                                                 |
 | ---------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
@@ -160,7 +161,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,54 +174,49 @@ 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 %}
 
+{% raw %}
 ```tsx
 // ...
 <ApiVideoPlayer video={{
-  id: "vi5fv44Hol1jFrCovyktAJS9",
+    id: "vi5fv44Hol1jFrCovyktAJS9",
   token: "e1bdf9a8-da40-421e-87f3-75b15232c531"}} />
 ```
-
 {% endraw %}
 
-### Defining metadata
+#### Defining metadata
 
-{% raw %}
 
+{% raw %}
 ```tsx
 // ...
-<ApiVideoPlayer 
-  video={{id: "vi5fv44Hol1jFrCovyktAJS9"}}
+<ApiVideoPlayer
+  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
   metadata={{"userName": "Alfred"}} />
 ```
-
 {% endraw %}
 
-### Define your own controls
+#### Define your own controls
 
 
 {% raw %}
-
 ```tsx
-
 const playerRef = useRef<ApiVideoPlayer>(null);
 
 return
-<ApiVideoPlayer      
+<ApiVideoPlayer
   video={{ id: "vi5jC9kQs2I3PdmVBjgcIg45" }}
   chromeless={true}
   ref={playerRef}>
-    <button onClick={() => playerRef.current?.play()}>play</button>
-    <button onClick={() => playerRef.current?.pause()}>pause</button>
+  <button onClick={() => playerRef.current?.play()}>play</button>
+  <button onClick={() => playerRef.current?.pause()}>pause</button>
 </ApiVideoPlayer>
 ```
-
-{% endraw %}
+{% endraw %}
+