Web component player

Introduction

Web Components is a suite of different technologies allowing you to create reusable custom elements - with their functionality encapsulated away from the rest of your code - and utilize them in your web apps.

With Radiant Media Player 10.2.0, it is now possible to use our player through a custom element <radiant-media-player>. It also takes advantages of Shadow DOM, an encapsulated "shadow" DOM tree for the player - which is rendered separately from the main document DOM. In this way, you can keep the player features private, so they can be scripted and styled without the fear of collision with other parts of the document.

The set up

First you will need to define player settings as JSON through a <script> tag with a specific id. The JSON data will also need to reference a path to a specific player build. Both player JavaScript and CSS must be referenced. These files will automatically be loaded within the Shadow DOM that will be appended to the <radiant-media-player> tag (open mode). The <radiant-media-player> tag must have both a data-id property and a data-settings-id property. The data-id property references the player instance (for example if you have multiple players on the same page, each <radiant-media-player> tag must have a unique data-id). The data-settings-id references the player settings for the current instance as defined in the JSON <script> tag.

Eventually you will have to add the rmp.custom-element.min.js file that contains definition for the <radiant-media-player> custom element.

You can use our could player or self-hosted player when using Radiant Media Player as a custom element.

Example with our cloud player

<script type="application/json" id="rmp-settings">
{
  "jsPlayerUri": "https://cdn.radiantmediatechs.com/rmp/10.4.1/js/wc.rmp.min.js",
  "cssPlayerUri": "https://cdn.radiantmediatechs.com/rmp/10.4.1/js/wc.rmp.min.css",
  "licenseKey": "your-license-key", 
  "src": {"hls": "https://your-hls-url.m3u8"},
  "width": 640,
  "height": 360
}
</script>
<radiant-media-player data-id="rmp" data-settings-id="rmp-settings"></radiant-media-player>
<script src="https://cdn.radiantmediatechs.com/rmp/10.4.1/js/rmp.custom-element.min.js"></script>

Example with our self-hosted player

<script type="application/json" id="rmp-settings">
{
  "jsPlayerUri": "path-to-self-hosted-player/dist/wc.rmp.min.js",
  "cssPlayerUri": "path-to-self-hosted-player/dist/wc.rmp.min.css",
  "licenseKey": "your-license-key", 
  "pathToRmpFiles": "path-to-self-hosted-player/",
  "src": {"hls": "https://your-hls-url.m3u8"},
  "width": 640,
  "height": 360
}
</script>
<radiant-media-player data-id="rmp" data-settings-id="rmp-settings"></radiant-media-player>
<script src="path-to-self-hosted-player/dist/rmp.custom-element.min.js"></script>