radiantmediaplayer / rmp-vast

A client-side JavaScript solution to load, parse and display VAST 2, 3 & 4 resources with HTML5 video
https://www.radiantmediaplayer.com/rmp-vast/app/
Other
95 stars 37 forks source link

Outstream ads functionality not working for some reason. #66

Closed Ahmeddr01 closed 2 months ago

Ahmeddr01 commented 2 months ago

I am trying to implement an outstream ad from a VAST tag with the code below, but nothing happens. Video tag stays empty, and no error are shown in the browser's console. (/dist/rmp-vast.min.js is included on the implementation page).

Any help will be appreciated! Thank you!

<div class="rmp-container" id="rmp">
  <div class="rmp-content">
    <video class="rmp-video" playsinline muted controls></video>
  </div>
</div>

<script>
  // Define the VAST Ad Tag URL
  const ADTAG1 = 'https://test-setup.com/vast/wp-content/video.js/AA-Vast.xml';

  // When the window is loaded, initialize the ad setup
  window.onload = function () {
    const id = 'rmp';  // The ID of the div containing the video player
    const params = {
      outstream: true  // Specific parameter to indicate outstream ad mode
    };

    // Create a new RmpVast instance
    const rmpVast = new RmpVast(id, params);

    // Load the VAST ad using the specified ad tag
    rmpVast.loadAds(ADTAG1);

    // Event listener for when the ad is successfully loaded
    rmpVast.on('adloaded', function () {
      console.log('Ad loaded and ready to play.');
    });

    // Event listener for any errors during ad loading or playback
    rmpVast.on('aderror', function (e) {
      console.error('Error occurred during ad playback:', e.detail);
    });

    // Additional listeners can be added as needed to handle other ad events
  };
</script>
radiantmediaplayer commented 2 months ago

Hi, You need to explicitly set the size of div.rmp-container, for example:

<style>
  .rmp-container {
    width: 960px;
    height: 540px;
    margin: auto;
  }
</style>

You can also review implementation at test/spec/outstreamSpec/* I will update docs to make it clearer.