Merge pull request #12 from apivideo/add-ads

Add ads support

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [1.0.3] - 2023-06-12
+- Add ads support
+
 ## [1.0.2] - 2023-02-15
 - Add `privateSession` attribute
 

README.md

@@ -19,6 +19,7 @@
     - [Settings](#settings)
       - [Controls](#controls)
       - [Player theme](#player-theme)
+      - [Ads](#ads)
       - [Responsiveness](#responsiveness)
     - [Callbacks](#callbacks)
   - [Methods](#methods)
@@ -79,7 +80,7 @@ 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) |
 #### 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`.
@@ -119,6 +120,12 @@ The `theme` property let you customize the color of some elements on the player.
 >   }}/>
 > ```
 
+
+#### 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
 
 With `responsive={true}`, the player height will be automatically set to match the video with/height ratio, depending on the width of player. 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/react-player",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "api.video React player component",
   "keywords": [
     "player",
@@ -49,6 +49,6 @@
     "typescript": "^4.7.4"
   },
   "dependencies": {
-    "@api.video/player-sdk": "^1.2.23"
+    "@api.video/player-sdk": "^1.2.25"
   }
 }

src/index.tsx

@@ -18,6 +18,9 @@ export interface ApiVideoPlayerProps {
     metadata?: {
         [key: string]: string;
     };
+    ads?: {
+        adTagUrl: string;
+    }
     hideControls?: boolean;
     hidePoster?: boolean;
     chromeless?: boolean;