gigg-video-component

Gigg video player

Overview

This repo contains a React Video Component that allows playing ads from adbutler.

Example Usage

The VideoAdPlayer React component accepts the following props:

• children (required): A React element representing the content to be displayed within the video player.

• vastSetId (required, number): VAST SET id.

• vastId (required, number): VAST id.

• adbutlerPid (required, number): Adbutler publisher id.

• className (optional, string): Additional CSS class name(s) for styling the component.

• adsEnabled (optional, boolean): Allows disabling ads. Defaults to true.

• skipPreRollAd (optional, boolean): Determines if the pre-roll ad should be skipped. Defaults to false.

• keywords (optional, string): Keywords for the ad, e.g., "sports,news".

• onAdStart (optional, function): Callback function triggered when an ad starts.

• onAdComplete (optional, function): Callback function triggered when the ad is complete.

• onAdSkipped (optional, function): Callback function triggered when the pre-roll ad is skipped.

• onPlayAndPrerollAdSkipped (optional, function): Callback function triggered when the video is played, and the pre-roll ad is skipped.

• playButton (optional, React element): Custom play button component.

The Video component accepts the same props as the html element

    import {VideoAdPlayer, Video} from "gigg-video-player";

      <VideoAdPlayer
        keywords="sports,news"
        adbutlerPid={168623}
        vastId={182802}
        vastSetId={34131}
        adsEnabled={true}
      >
        <Video poster="https://via.placeholder.com/1280x720">
          <source
            src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
            type="video/mp4"
          />
        </Video>
      </VideoAdPlayer>
});

Setup

1. Clone the repo

git clone https://github.com/GiggInnovations/gigg-video-player.git

3. Use NVM to switch to the correct version of Node

nvm use

4. Install packages

npm install

5. Start local dev server, this watches for changes in the component located in src, and starts a react app located in example to be able to preview those changes

npm run dev