Introduction

The main container must include the class onnetworkcustomplayercontainer and a unique identifier (ID), which will be referenced using a parameter in the embed code. Once the player is prepared, the following parameters must be added to the embed code: &isCpl=1&cpcId="ID_of_the_container_with_class_onnetworkcustomplayercontainer". Below is an example.
The custom player in the mobile version should be tested on a physical device, as it does not function correctly in browser emulators.

Example custom player code.

HTML


<div class="audio-container onnetworkcustomplayercontainer" id="testcontainercpl">
  <div class="title onnetworkcustomplayertitle"></div>
  <div class="audio-player">
    <button class="audio-btn playpause-button onnetworkcustomplaypausebutton"
    >
      <svg class="play">
        <!-- PLAY ICON SVG PATHS -->
      </svg>
      <svg class="pause">
        <!-- PAUSE ICON SVG PATHS -->
      </svg>
    </button>

    <div class="seek-bar-timeline onnetworkcustomplayerplaybarcontainer">
      <div class="seek-bar-line onnetworkcustomplayerplaybar"></div>
      <div class="seek-bar-dot onnetworkcustomplayerplayhead"></div>
    </div>

    <button class="audio-btn mute-button onnetworkcustommutebutton">
      <svg class="muteicon">
        <!-- MUTE ICON SVG PATHS -->
      </svg>
      <svg class="unmuteicon">
        <!-- UNMUTE ICON SVG PATHS -->
      </svg>
    </button>
  </div>
</div>
<script type="text/javascript" src="https://video.onnetwork.tv/embed.php?sid=XXXXXXXXXX==&isCpl=1&cpcId=testowykontenercpl"></script>


.audio-container {
  width: 99%;
  min-width: 220px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  border-radius: 0px;
  padding: 5px;
  border: 1px solid black;
  flex-wrap: wrap;
}
.title {
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
  padding: 5px 0 0 5px;
  font-family: sans-serif;
}
.audio-player {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
}
.audio-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 25px;
  height: 25px;
}
.seek-bar-timeline {
  width: 95%;
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  position: relative;
  cursor: pointer;
  background-color: black;
}
.seek-bar-line {
  height: 4px;
  background-color: red;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.seek-bar-dot {
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.playpause-button {
  display: block;
  background-size: 100%;
  margin: 0;
  width: 25px;
  height: 25px;
  transition: 0.1s;
  background-repeat: no-repeat;
}
.playpause-button svg {
  display: none;
  pointer-events: none;
}
.playpause-button.paused svg.pause,
.playpause-button.playing svg.play {
  display: none;
}
.playpause-button.paused svg.play,
.playpause-button.playing svg.pause {
  display: block;
}
.mute-button {
  display: block;
  background-size: 100%;
  margin: 0;
  width: 25px;
  height: 25px;
  transition: 0.1s;
  background-repeat: no-repeat;
}
.mute-button svg {
  display: none;
  pointer-events: none;
}
.mute-button:not(.muted) .muteicon,
.mute-button.muted .unmuteicon {
  display: block;
}
.mute-button:not(.muted) .unmuteicon,
.mute-button.muted .muteicon {
  display: none;
}

A list of defined functional classes for the Onnetwork Custom Player.
All these CSS classes are applied to HTML elements, which then serve a specific function. Here is the list of classes:

Classes related to controls

Name	Functionality
onnetworkcustomplaypausebutton	The element serves as a play/pause button.
onnetworkcustomplaystopbutton	The element serves as a play/stop button.
onnetworkcustomplayerplaybar	The element serves as the playbar (playback bar).
onnetworkcustomplayerplayrange	The element serves as the progress bar indicating the portion of the media played so far.
onnetworkcustomplayerplayhead	The element serves as the indicator (scrubber) on the playback bar.
onnetworkcustommutebutton	The element functions as a MUTE button.
onnetworkcustompseudomutebutton	The element functions as a PSEUDOMUTE button.
onnetworkcustomplaypause1button	The element functions as a PAUSE1BUTTON.
onnetworkcustomplaybutton	The element serves as a play button.
onnetworkcustompausebutton	The element serves as a pause button.
onnetworkcustomstopbutton	The element serves as a stop button.
onnetworkcustomseekbutton	The element serves as a seek button.
onnetworkcustomplayerskipbutton	The element serves as a skip button.
onnetworkcustomplayerplaybarcontainer	The element functions as a container for the media duration bar.
onnetworkcustomclosebutton	The element functions as a player close button.
onnetworkcustomclosepausebutton	The element functions as a player close button with pause.
onnetworkcustomplayervolumecontrol	The element functions as the entire volume bar.
onnetworkcustomplayervolumevalue	The element functions as the current volume level bar.
onnetworkcustomplayervolumehead	The element serves as the indicator (slider handle) on the volume bar.
onnetworkcustomplayertpd	The element is used to change the playerdata value for the parent element (e.g., a dropdown menu).
onnetworkcustomplayerusermenuitem	It is used to mark the element as a list item and manage the element's visibility when the menu state changes.

Classes that accept text values from the media

Name	Functionality
onnetworkcustomplayerremainingtime	The element accepts the remaining time value until the end of the audio content
onnetworkcustomplayerduration	The element accepts the duration value of the audio content
onnetworkcustomplayertitle	The element accepts the title of the audio content as text
onnetworkcustomplayerauthor	The element accepts the author’s name of the content
onnetworkcustomplayerdate	The element accepts the content’s upload date in numeric form (e.g., 02.08.2024)
onnetworkcustomplayerdatenom	The element accepts the content’s upload date in the nominative case (e.g., 2 August 2024)
onnetworkcustomplayerdategen	The element accepts the content’s upload date in the genitive case (e.g., 2nd of August 2024)
onnetworkcustomplayercurrenttime	The element accepts the current playback time value of the content
onnetworkcustomplayeradremaining	The element accepts the remaining time value until the end of the advertisement
onnetworkcustomplayerspontext	The element accepts text indicating the sponsor

Classes related to content sharing

Name	Functionality
onnetworkcustomplayerfbshare	The element redirects to Facebook
onnetworkcustomplayerpnshare	The element redirects to Pinterest
onnetworkcustomplayerlnshare	The element redirects to LinkedIn
onnetworkcustomplayertwshare	The element redirects to X (Twitter)
onnetworkcustomplayerurlcopy	The element copies the URL where the player is embedded
onnetworkcustomplayerredirect	The element redirects to the URL defined in the content
onnetworkcustomplayermobshare	The element functions as a sharing feature on mobile devices
onnetworkcustomplayermsgsend	The element sends the content link via SMS
onnetworkcustomplayerwappsend	The element shares the content link via WhatsApp
onnetworkcustomplayerytwatch	The element redirects to the same content hosted on YouTube
onnetworkcustomplayerspwatch	The element redirects to the podcast on the Spotify platform
onnetworkcustomplayerapwatch	The element redirects to the podcast on the Apple Podcast platform
onnetworkcustomplayergpwatch	The element redirects to the podcast on the Google Podcast platform

Others

Name	Functionality
onnetworkcustomplayerseclogo	The element accepts the sponsor's logo URL as a background-image
onnetworkcustomplayerposter	The element accepts the content poster image as a background-image
onnetworkcustomplayersda70ph	Marks an element that should receive styles related to dash-offset

Example of a custom player: