Merge pull request #53 from apivideo/add-ads-support

Add ads support

Author: olivier-lando

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [1.2.25] - 2023-06-02
+- Add ads support
 ## [1.2.24] - 2023-03-03
 - Add `sequence` option
 

README.md

@@ -16,6 +16,7 @@
     - [Method #2: simple include in a javascript project](#method-2-simple-include-in-a-javascript-project)
 - [Documentation](#documentation)
   - [Instanciation](#instanciation)
+    - [Ads](#ads)
   - [Methods](#methods)
       - [`loadConfig(options: SdkOptions)`](#loadconfigoptions-sdkoptions)
       - [`play()`](#play)
@@ -152,10 +153,16 @@ The PlayerSdk constructor takes 2 parameters:
 |           loop | no (default: false)   | boolean | once the video is finished it automatically starts again                                                     |
 |   playbackRate | no (default: 1)       | number  | the playback rate of the video: 1 for normal, 2 for x2, etc.                                                 |
 |   sequence | no        | {start: number, end: number}  | define a sequence of the video to play. The video will start at the `start` timecode and end at the `end` timecode. The timecodes are in seconds. |
+| ads | no | {adTagUrl: string} | see below [ads](#ads) |
 
 
 The sdk instance can be used to control the video playback, and to listen to player events.
 
+### 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).
+
 ## Methods
 
 The sdk instance has the following methods:

index.ts

@@ -21,6 +21,10 @@ export type PlayerTheme = {
     linkActive?: string;
 }
 
+type AdsOptions = {
+    adTagUrl: string;
+}
+
 type SdkOptions = {
     id: string;
     live?: boolean;
@@ -38,6 +42,7 @@ type SdkOptions = {
     token?: string;
     privateSession?: string;
     showSubtitles?: boolean;
+    ads?: AdsOptions;
     playbackRate?: number;
     sequence?: {
         start: number;
@@ -353,6 +358,10 @@ export class PlayerSdk {
             url = addParameterInIframeHash("show-subtitles");
         }
 
+        if(options.ads?.adTagUrl) {
+            url = addParameterInIframeHash(`adTagUrl:${encodeURIComponent(options.ads?.adTagUrl)}`);
+        }
+
         if(!isNaN(parseInt(""+options.sequence?.end, 10)) && !isNaN(parseInt(""+options.sequence?.start, 10))) {
             url = addParameterInIframeHash(`t=${options.sequence?.start},${options.sequence?.end}`);
         }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/player-sdk",
-  "version": "1.2.24",
+  "version": "1.2.25",
   "description": "api.video player SDK",
   "repository": {
     "type": "git",