Crossplan Integration

Publishers using Crossplan have highlighted the requirement to decorate the stream URL with custom parameters. Currently Crossplan require that a global variable cpd_config is used to store these parameters as a string, which can then be decorated on to the stream url.

Integrating into your web player

  1. Create a new JavaScript file based on the sample file modifying-urls.js. Adapt to your purposes as necessary.

  2. Add a <script> tag referencing your new file. It must appear a.) in the <head> of your index.html and b.) before the tags for the Radioplayer web player.
    After your change it should look like this:

    <!-- Must be before radioplayer.js! -->
<script type="application/javascript" src="inject-cpd-config.js"></script>
<script type="module" src="/radioplayer.js"></script>
<script nomodule defer src="/radioplayer.legacy.js"></script>

  3. Test your console:

    1. Open it in a browser.
    2. Press play.
    3. Open the "Network" tab of your browser's developer tools
    4. Check if the HTTP request to your stream url contains the additional query params

Guide for sample file

As showcased in the sample JavaScript file, playback locking and modifying stream URLs works like this:

  1. Your JS code registers an event handler (for event radioplayer_readyToReceiveEvents)
  2. The web player dispatches the event once it has loaded all available stream URLs.
  3. Your event handler is triggered.
  4. Your JS code
    1. Assigns methods from global variable: StreamModifierUtils
    2. Injects the required query params to the initialised Player console. Which then uses them to decorate the stream url.
    3. Calling unlockPlayback then signals to the player that the script has executed and Play is safe to commence.

Using playback locking without modifying stream URLs

Syncing the cpd_config requires playback locking. However, playback locking can also be used on its own (without modifying stream URLs). If you only require playback locking, wait until the web player is ready to receive events (see above), then call the unlockPlay() function in the StreamModifierUtils

Common pitfalls

  1. The <script> tag of your JS code must appear a.) in the <head> of your index.html and b.) before the tags for the Radioplayer web player.
  2. Your query parameters take precedence over the parameters dynamically generated by Radioplayer - as such it is your responsibility to ensure they are valid and GDPR compliant.

Technical details:

  1. The web player waits up to 7 seconds for the "unlock playback" event. After 7 seconds it automatically unlocks playback.
  2. If several <script>s modify the stream URLs, their order of execution must be managed by you. The web player does not offer any Tag Manager functionality.
  3. Data exchange between the web player and your JavaScript file is done via JS events (see sample file).