Advanced Embed

If you need full control over your media embed then you can use our embed library. You get full access to our setup options listed below and can use them to create a custom player that fits your needs.

Embed Library

The primary way of using the player is via installing the package from NPM. You can install the package using the following command:

npm install @mediamanager.io/embed

And then in your component:

import @mediamanager.io/embed

Otherwise you can link to the assets directly from the CDN:

<script type="module" src="https://embedv3.mediamanager.io/player.js"></script>

Basic Usage

You can create a player by using the media-manager-player element. The bare minimum require is to provide a media token which can be found on the media page.

<div>
  <media-manager-player
    token="107ad830-768b-4724-8649-607e2965f9d4"
  ></media-manager-player>
</div>

Basic use (React)

If you are using React you can use the following code to create a player. Please note that you will need to ensure player is only loaded once the component has mounted on the client.

"use client";

import React, { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    import("@mediamanager.io/embed");
  });
  return (
    <div>
      <media-manager-player token="66f56f08-18d3-4cd0-9cff-967bbe8ca6b7"></media-manager-player>
    </div>
  );
}

Setup Options

If you want more control over your player you can use the included setup options to customise the appearance or behavior. Below are the full list of options and their default values.

They can be added to the element as you would any other attribute:

<div>
  <media-manager-player
    token="107ad830-768b-4724-8649-607e2965f9d4"
    canFloat="false"
    showControls="false"
  ></media-manager-player>
</div>

Option	Type and Default Value	Notes
`token`	`string`, none	The only required option. Your media token.
`islikelive`	`boolean`, `false`	Changes the player appearance and behavior to simulate a live broadcast.
`showcontrols`	`boolean`, `true`	Whether to display the video controls (control bar and display icons).
`showdescription`	`boolean`, `true`	Whether to display the description of your video inside your player.
`showbrandlogo`	`boolean`, `true`	Whether to display your brand logo in the player control bar.
`showpictureinpicturecontrols`	`boolean`, `true`	Adds a Picture in Picture icon and right click menu options to supported desktop browsers only.
`showplaybackratecontrols`	`boolean`, `true`	Whether to display a settings menu to adjust playback speed.
`showsharingbuttons`	`boolean`, `false`	When true displays a share button on the player for Twitter, Facebook, LinkedIn and Email.
`showtitle`	`boolean`, `true`	Whether to display the title of your video inside your player.
`shouldautostart`	`boolean`, `false`	Whether the player will attempt to begin playback automatically when a page is loaded.
`isdownloadable`	`boolean`, `true`	When true will respect the download status of a video and show a download icon if enabled. Can be set to false to ignore the parent video records state.
`canbecast`	`boolean`, `true`	Casting enables a viewer to use Google Cast or Apple AirPlay technologies to stream video and audio content to a compatible TV or sound system. By enabling the casting feature for a player, a viewer can tap an icon in the control bar to stream your content on a cast-compatible device. If no compatible device is detected by the player, no cast icon appears.
`canfloat`	`boolean`, `true`	Keeps the player visible when the original player location is scrolled out of view by minimizing it to a corner of the screen. On devices in portrait orientation, the player becomes fixed to the top of the page using its original dimensions. When floating, the viewer can drag the player to reposition it.
`ismuted`	`boolean`, `false`	Configures if the player should be initially muted during playback.
`skiprecap`	`boolean`, `true`	Whether to display the skip recap buttons if configured on the video.
`skipintro`	`boolean`, `true`	Whether to display the skip intro buttons if configured on the video.
`skipto`	`number`, `0`	The number of seconds at which to start video playback
`aspectratio`	`string`, `16/9`	Maintains proportions when width is a percentage. Will not be used if the player is a static size.
`height`	`string`, none	The desired height of your video player (in pixels). Should be omitted when `aspectRatio` is configured.
`width`	`string`, `100%`	The desired width of your video player (in pixels or percentage).
`overridedescription`	`string`, none	Pass a string to override the video description as configured within Media Manager. Can be used in conjunction with displayDescription to display a custom video description.
`overridetitle`	`string`, none	Pass a string to override the video title as configured within Media Manager. Can be used in conjunction with displayTitle to display a custom video title.
`overridethumbnail`	`string`, none	Pass a URL of a publicly accessible image as a string to override the video thumbnail as configured within Media Manager.
`custombuttonimage`	`string`, none	Set a custom image for the button
`custombuttontitle`	`string`, none	Set the button title, will override the value in Media Manager.
`custombuttonurl`	`string`, none	Set the button URL, will override the value in Media Manager.
`showcustombutton`	`string`, `true`	If you have provided a custom button but need to manually override it, use this option.

Example Video Embed with Options

<div>
  <media-manager-player
    token="d0e2f9d8-27ba-4823-99e0-8f6651d25b31"
    showcontrols="true"
    canfloat="true"
  ></media-manager-player>
</div>

Player Events

The player will emit events that you can listen to and respond to. These events are emitted on the player element and can be listened to using the addEventListener method.

const mediaManagerPlayer = document.querySelector("media-manager-player");

// listen to an event from the component
mediaManagerPlayer?.addEventListener("timeupdate", (time) => {
  console.log("timer update", time.timeStamp);
});

If you have multiple players on the page you can do either of these:

Pass an id to the player and use getElementById or similar.

<media-manager-player id="my-player-id"></media-manager-player>

<script>
  const player = document.getElementById("my-player-id");
</script>

Use the token attribute directly

<media-manager-player
  token="107ad830-768b-4724-8649-607e2965f9d4"
></media-manager-player>
<script>
  const player = document.querySelector(
    'media-manager-player[token="107ad830-768b-4724-8649-607e2965f9d4"]',
  );
</script>

Available Events

Version 3 of the MediaManager player is a wrapper of media-chrome and mux-video, which itself is an augmentation of the HTML <video> element. As such, it emits all the events that the <video> element does.

const mediaElementEvents = [
  "abort",
  "canplay",
  "canplaythrough",
  "durationchange",
  "emptied",
  "ended",
  "error",
  "loadeddata",
  "loadedmetadata",
  "loadstart",
  "pause",
  "play",
  "playing",
  "progress",
  "ratechange",
  "seeked",
  "seeking",
  "stalled",
  "suspend",
  "timeupdate",
  "volumechange",
  "waiting",
];

mediaElementEvents.forEach((event) => {
  mediaManagerPlayer.addEventListener(event, (event) => {
    console.log(event.type);
  });
});

Direct Player Interaction

It is also possible to directly interact with the player. In the example below we are adding our own button outside the player which will play/pause the media when clicked.

  <button id="embed-control" type="button">Play/Pause</button>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
        const playPauseButton = document.getElementById(
          "embed-control-playpause",
        );
        playPauseButton.addEventListener("click", function () {
          const isPaused = mediaManagerPlayer.shadowRoot
            .querySelector("media-controller")
            .hasAttribute("mediapaused");

          if (isPaused) {
            mediaManagerPlayer.dispatchEvent(new CustomEvent("play"));
          }
          if (!isPaused) {
            mediaManagerPlayer.dispatchEvent(new CustomEvent("pause"));
          }
        });
    });
  </script>
</div>

Available events you can hook into are listed below

Option	Notes
`play`	plays the video
`pause`	pauses the video
`mute`	turns sound off
`seek`	seeks to a different part of the video, see example below
`getchapters`	sends an event which, if the video has chapters, will return the chapters in the `chaptersupdated` event. See example below.

Seek Example

mediaManagerPlayer.dispatchEvent(
  new CustomEvent("seek", { detail: { timestamp: 300 } }),
);

Get chapters example

const getChaptersButton = document.querySelector("button.get-chapters");

getChaptersButton.addEventListener("click", function () {
  mediaManagerPlayer.dispatchEvent(new CustomEvent("getchapters"));
});
mediaManagerPlayer.addEventListener("chaptersupdated", (event) => {
  console.log(event.detail); // will return the chapters if they exist
});

Getting the duration of play

To get the duration of play, you can get this from the mediatime attribute:

mediaManagerPlayer.getAttribute("mediatime");

Create a button using the `<slot>` element

You can also use the <slot> element to create a button inside the player instead of using the options.

<media-manager-player>
  <button slot="about-button">Click me</button>
</media-manager-player>