diff --git a/CHANGELOG.md b/CHANGELOG.md index b7d5733..7af646e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index 240008c..5d180f6 100644 --- a/README.md +++ b/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. diff --git a/package-lock.json b/package-lock.json index e97aff4..7a5898f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,15 +1,15 @@ { "name": "@api.video/react-player", - "version": "1.0.2", + "version": "1.0.3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@api.video/react-player", - "version": "1.0.2", + "version": "1.0.3", "license": "MIT", "dependencies": { - "@api.video/player-sdk": "^1.2.23" + "@api.video/player-sdk": "^1.2.25" }, "devDependencies": { "@testing-library/jest-dom": "^5.16.4", @@ -45,9 +45,9 @@ } }, "node_modules/@api.video/player-sdk": { - "version": "1.2.23", - "resolved": "https://registry.npmjs.org/@api.video/player-sdk/-/player-sdk-1.2.23.tgz", - "integrity": "sha512-9EnjY70bJn7wXpmYBk4OzxDXfy/6Wi0zVeKk0dN79VU0PjfQkYjud17QV5a70hhXZRLFigdrX4CtlmYT7LEKhQ==", + "version": "1.2.25", + "resolved": "https://registry.npmjs.org/@api.video/player-sdk/-/player-sdk-1.2.25.tgz", + "integrity": "sha512-ITSSmAhjhl1YGWz9fi/5rj23oX8iF+1p20ZTDCT/1uoQOxu1i5u1/4qITVzRtc1eCkA3JUtEyMq8xUIMmI3ijw==", "dependencies": { "core-js": "^3.8.3", "url-polyfill": "^1.1.12" @@ -6168,9 +6168,9 @@ } }, "@api.video/player-sdk": { - "version": "1.2.23", - "resolved": "https://registry.npmjs.org/@api.video/player-sdk/-/player-sdk-1.2.23.tgz", - "integrity": "sha512-9EnjY70bJn7wXpmYBk4OzxDXfy/6Wi0zVeKk0dN79VU0PjfQkYjud17QV5a70hhXZRLFigdrX4CtlmYT7LEKhQ==", + "version": "1.2.25", + "resolved": "https://registry.npmjs.org/@api.video/player-sdk/-/player-sdk-1.2.25.tgz", + "integrity": "sha512-ITSSmAhjhl1YGWz9fi/5rj23oX8iF+1p20ZTDCT/1uoQOxu1i5u1/4qITVzRtc1eCkA3JUtEyMq8xUIMmI3ijw==", "requires": { "core-js": "^3.8.3", "url-polyfill": "^1.1.12" diff --git a/package.json b/package.json index a57596d..009b061 100644 --- a/package.json +++ b/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" } } diff --git a/src/index.tsx b/src/index.tsx index 34cc7f4..919a75f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,6 +18,9 @@ export interface ApiVideoPlayerProps { metadata?: { [key: string]: string; }; + ads?: { + adTagUrl: string; + } hideControls?: boolean; hidePoster?: boolean; chromeless?: boolean;