Skip to content

Web Component

As an alternative to the Player and the iframe solutions that we have, we now had something that may be called a middleway enabling the dynamic of a SDK through the simplicity of an iframe.

A web component creates a custom HTML element, which you in its simplest implementation can use just as you would have used the iframe solution.

Please note that this is a pretty modern web standard and therefore not supported in older browsers. It is supported in all the major browsers a few years back, though look at the browser compatibility chart and consider a polyfill if needed, to support older ones as well.

Installation

To be able to create your custom HTML element, i.e. the player component, you need to include the JavaScript defining it, either in your bundle or as a separate import on your side.

To install the component into your bundle from npm you may run 

npm install @redbeemedia/javascript-player-web-component

Usage

Exactly as with standard HTML elements you can create your custom element from either JavaScript or directly in the HTML.

JavaScript Example

import "@redbeemedia/javascript-player-web-component";
import "@redbeemedia/javascript-player-web-component/style.css";

const playerComponent = document.createElement("redbee-player");
playerComponent.setAttribute(
  "assetpage", 
  "https://redbeemediatv.enigmatv.io/asset/3239747_E7EFE2"
);
document.body.appendChild(playerComponent);

HTML Example

<script src="https://cdn.jsdelivr.net/npm/@redbeemedia/javascript-player-web-component@latest/dist/rbm-player-component.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redbeemedia/javascript-player-web-component@latest/style.css">

<redbee-player 
  assetpage="https://redbeemediatv.enigmatv.io/asset/3239747_E7EFE2">
</redbee-player>

Available Options

Simplest path

  • assetpage, A url to an asset detail page in the White Label solution. The simplest solution. Will replicate the behavior from an iframe initiation.

Flexibility

  • customer
  • businessunit
  • exposurebaseurl
  • assetid
  • sessiontoken

(If you initiailize the player without sessionToken, the SDK will automatically try to do an anonymous login towards the platform.)

Player options

  • autoplay, default true
  • muted, default false
  • disablecast, default false
  • audioonly, default false, will play an audio stream without any video being played.
  • starttime, defaults to the start of a VOD or the edge of a live stream.

  • poster, set which image to be used when autoplay is blocked or during audio only playback.

  • analytics-disable, default false

  • analytics-baseurl, default the value of exposurebaseurl. For scaling purpose Red Bee may tell you to set this one with a given value.

  • skin-disable, default false

  • skin-metadata, default true, to disable the metadata to be shown in the skin
  • skin-wallclock, default false, to show wall clock time where applicable rather than relative time.
  • skin-timezone, to show a set timezone in the wall clock time rather than the visitor's.

Events

The basic idea is that the web component will expose all the events that the player triggers, though through the native HTML element EventListener API that exists. The data object will always be provided on the detail property of the event.

const playerComponent = document.querySelector("redbee-player"); // or use the element variable created in the usage example in this document
playerComponent.addEventListener("player:timeupdate", (e) => {
  console.log("Provided data", e.detail);
});

Advanced Usage

Even though the main focus for the web component is to enhance the simplified implementation experience over the iframe solution - there is a possibility to get the player instance itself dispatched from the component, to interact with in the same way as you would with the JavaScript SDK.

const playerComponent = document.querySelector("redbee-player"); // or use the element variable created in the usage example in this document
playerComponent.addEventListener("loaded", (e) => {
  console.log("Player instance", e.detail.playerInstance);
  // now you can interact with the player instance e.g.
  playerInstance.seekTo({ time: 300 });
});

Release Notes

v0.32.4 (27 August, 2021)

  • Version number is now aligned with the Player SDK version within.
  • Player version v0.32.4, see the player release notes

v0.9.3 (14 July, 2021)

v0.9.1 (7 July, 2021)

v0.9.0 (2 July, 2021)

v0.8.0 (9 June, 2021)

v0.7.1 (24 May, 2021)

v0.6.1 (26 April, 2021)

v0.5.0 (7 April, 2021)

v0.4.1 (30 Mar, 2021)

v0.3.0 (24 Mar, 2021)

v0.2.0 (2 Mar, 2021)