Installation

• Install with npm npm i videojsadx OR
• Add hosted code link in https://cdn.jsdelivr.net/npm/videojsadx@[version_number]/dist/videojsadx.js

Additionally have to add this script in "head"

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

Description

VideoJS AdX combines videojs, video-ima, cotrib-ads to simply display videos with AdX integration

Usage

Call function with your parameters

<div class="stpd-video-container" id="video-container-1">
  <script>
    window.stpdVideo = window.stpdVideo || { que: [] };
    window.stpdVideo.que.push(function () {
      return window.stpdVideo.setConfig(
        {
          videoSrc: 'https://example.com/uploads/my-video.mp4',
          thumbnailSrc: 'https://signe.stpd.io/wp-content/uploads/2023/06/1667-11.jpg',
          thumbnailTitle: 'Video title',
          initialAutoplay: true,
          muted: false,
          playlist: [
            {
              videoSrc: 'https://example.com/uploads/my-video-1.mp4',
              thumbnailSrc: 'https://example.com/uploads/my-video-thumbnail-1.jpg',
              thumbnailTitle: 'Video title 1',
            },
            {
              videoSrc: 'https://example.com/uploads/my-video-2.mp4',
              thumbnailSrc: 'https://example.com/uploads/my-video-thumbnail-2.jpg',
            },
            {
              videoSrc: 'https://example.com/uploads/my-video-3.mp4',
              thumbnailSrc: 'https://example.com/uploads/my-video-thumbnail-3.jpg',
            },
          ],
          playlistAutoTitles: true,
          playlistAutoplay: true,
          miniPlayer: [
            { showOnlyOnAds: false, width: '400px', position: 'br', spacing: ['50px', '50px'] },
          ],
          miniPlayerMobile: [
            { showOnlyOnAds: false, width: '60%', position: 'bl', spacing: ['100px', '50%'] },
          ],
          adUnit:
            'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator=',
          viewabilityThreshold: 0.7,
          overlayAdElement:
            '<' +
            'div id="my-ad">\n' +
            '<' +
            'script type="text/javascript">\n' +
            'console.log("triggering some banner");\n' +
            '<' +
            '/script>\n' +
            '<' +
            '/div>',
          debug: true,
        },
        'video-container-1'
      );
    });
  </script>
</div>

Parameter description:

• <div class="stpd-video-container" id="video-container-1">

  • For multiple insertions change ID's for each element.

• }, 'video-container-1');

  • If ID changed, change here as well

• videoSrc:

  • Initial video on page load

• thumbnailSrc:

  • Initial video thumbnail

• thumbnailTitle:

  • Initial video title

• initialAutoplay:

  • Autoplay on page load

• muted:

  • Play with sound on page load (NB! If initial autoplay also is turned on, video won't autoplay until users first interaction with page (click) because of global enhancing user experience policy.)

• playlist:

  • Can be removed if no playlist required.
  • Initial video automatically included as the first playlist element
  • videoSrc:
    • Video source for playlist item
  • thumbnailSrc:
    • Thumbnail source for playlist item
    • If video source local, thumbnail will be autogenerated if not provided
  • thumbnailTitle:
    • Video title for playlist item
    • If any of playlist items has title, others will be auto populated

• playlistAutoTitles:

  • Automatically populate playlist items with titles even if none provided

• playlistAutoplay:

  • Playlist autoplay

• miniPlayer:

  • DESKTOP
  • Can be removed if no mini player required.
  • showOnlyOnAds:
    • Show mini player only when ad is playing or all the time.
  • width:
    • Mini player width (px / % / ect). Height will be adjusted to aspect ratio.
  • position:
    • Values: { tl / tr / bl / br }
  • spacing:
    • Values: [ { t / b } px / % / ect , { l / r } px / % / ect ]

• miniPlayerMobile:

  • MOBILE
  • Can be removed if no mini player required.
  • showOnlyOnAds:
    • Show mini player only when ad is playing or all the time.
  • width:
    • Mini player width (px / % / ect). Height will be adjusted to aspect ratio.
  • position:
    • Values: { tl / tr / bl / br }
  • spacing:
    • Values: [ { t / b } px / % / ect , { l / r } px / % / ect ]

• adUnit:

  • AdX ad unit.

• viewabilityThreshold:

  • Number from 0 to 1 that controls when the player is treated as viewable.
  • Used for ad request/resume and pause logic.
  • Default: 0.7.
  • Values outside range are clamped (<0 becomes 0, >1 becomes 1).

• adDisplayInitMinDelayMs:

  • Minimum delay in milliseconds between initializeAdDisplayContainer() and requestAds().
  • Helps avoid IMA timing warnings around ad container initialization.
  • Default: 300.

• enforceAdPlayEligibility:

  • If true, ads are requested only when playback is currently eligible by browser policy.
  • Eligibility requires either muted playback or prior user activation.
  • Default: true.

• overlayAdElement:

  • Overlay Ad tag code (with divs and stuff). (!NB code only. If this is not an independent code, all calls need to be added manually)

• watermark:

  • Values { true / false / URL } (Setupad logo enabled by default)

• debug:

  • Can be removed if no debug required.
  • Includes ad pause/resume trace logs with reason tags (for example: viewability, mini-player-close, manual-pause).