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

Each page that you want to embed media on will need to include the embed library. You can do this by adding the following line to the <head> of your page.

<script src="https://embed.mediamanager.io/player.js"></script>

Basic Usage

You can then place the embed code anywhere within the <body> of your page. The bare minimum require is to provide a media token which can be found on the media page.

<div>
  <script>
    mediamanager().setup({
      token: "4f58af97-51df-44ff-83ba-c7308bd88aac",
    });
  </script>
</div>

Alternatively you can specify a particular element to embed the media in:

<div id="media-manager-embed-5"></div>
<script>
  mediamanager("media-manager-embed-5").setup({
    token: "4f58af97-51df-44ff-83ba-c7308bd88aac",
  });
</script>

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.

Option	Default Value	Notes
`token`	none	The only required option. Your media token.
`type`	`video`	Will default to video but can be set to audio when embedding an audio item.
`aspectRatio`	`'16:9'`	Maintains proportions when width is a percentage. Will not be used if the player is a static size.
`height`	none	The desired height of your video player (in pixels). Should be omitted when `aspectRatio` is configured.
`width`	`'100%'`	The desired width of your video player (in pixels or percentage).
`autoStart`	`false`	Whether the player will attempt to begin playback automatically when a page is loaded. Set to `viewable` to have player autostart if 50% is viewable.
`pip`	`true`	Adds a Picture in Picture icon and right click menu options to supported desktop browsers only.
`controls`	`true`	Whether to display the video controls (control bar and display icons).
`logo`	`true`	Whether to display your brand logo in the player control bar.
`displayTitle`	`false`	Whether to display the title of your video inside your player.
`displayDescription`	`false`	Whether to display the description of your video inside your player.
`playbackRateControls`	`true`	Whether to display a settings menu to adjust playback speed. If true, the pre-defined options available in the menu are 0.5x, 1x, 1.25x, 1.5x, and 2x
`cast`	`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.
`floating`	`false`	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.
`live`	`false`	Changes the player appearance and behavior to simulate a live broadcast.
`sharing`	`false`	When true displays a share button on the player for Twitter, Facebook, LinkedIn and Email.
`downloadable`	`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.
`skipTo`	`0`	The number of seconds at which to start video playback.
`mute`	`false`	Configures if the player should be muted during playback. If a user overrides this property, the user’s action will persist for the duration of the user session. For example, if all players are configured with `mute: true` and a user unmutes a player, each subsequent player that the user encounters will start unmuted.
`skipRecap`	`true`	Whether to display the skip recap buttons if configured on the video.
`skipIntro`	`true`	Whether to display the skip intro buttons if configured on the video.
`overrideTitle`	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.
`overrideDescription`	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.
`overrideImage`	none	Pass a URL of a publically accessible image as a string to override the video thumbnail as configured within Media Manager.
`overrideColor`	none	Pass a RGB HEX colour as a string to override the brand options for your player.
`displayCustomButton`	`true`	Show or hide the optional call-to-action button in the player.
`customButtonTitle`	`false`	Set the button title, will override the value in Media Manager.
`customButtonUrl`	`false`	Set the button URL, will override the value in Media Manager.

Example Video Embed with Options

<div id="full-options-example"></div>
<script>
  mediamanager("full-options-example").setup({
    // The only required parameter
    token: "my-video-token",
    overrideTitle: "My Custom Video Title",
    overrideDescription: "My Custom Video Description",
    // Show the video title
    displayTitle: true,
    // Show the video description
    displayDescription: true,
    // Enable floating
    floating: true,
    // Enable sharing
    sharing: true,
    // Start the video at 30 seconds.
    skipTo: 30,
  });
</script>

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 setEventListener method. Event listeners need to be added before call the setup method.

<div id="events-example"></div>
<script>
  const myEmbed = mediamanager("events-example");

  myEmbed.setEventListener.on("ready", function () {
    console.log("My video is ready to be played!");
  });

  myEmbed.setEventListener.on("play", function () {
    console.log("My video is playing!");
  });

  myEmbed.setEventListener.on("pause", function () {
    console.log("My video is paused!");
  });

  myEmbed.setEventListener.on("complete", function () {
    console.log("My video has finished!");
  });

  myEmbed.setup({
    token: "my-video-token",
  });
</script>

Available Events

play - Fired when the media starts playing.
pause - Fired when the media is paused.
complete - Fired when the media has finished playing.
ready - Fired when the media is ready to be played.
seek - Fired when the media is seeked.
timeupdate - Fired when the media time is updated. Can be fired multiple times per second.
setupError - Fired when the player fails to setup. This can be caused by a missing or invalid token.
remove - Fired when the player is removed from the DOM.
all - Fired when any event is fired. Can degrade performance.
controls - Fired when the controls are shown or hidden.
displayClick - Fired when the display is clicked.
error - Fired when an error occurs.
levelsChanged - Fired when the media quality levels change.
fullscreen - Fired when the player enters or exits fullscreen.
mute - Fired when the player is muted or unmuted.
volume - Fired when the player volume is changed.

Direct Player Interaction

It is also possible to directly interact with the player. Once the setup method has been called you can access the player instance using the control method. In the example below we are adding our own button outside the player which will play/pause the media when clicked.

<div class="my-classes">
  <div id="control-test"></div>
  <script>
    const myEmbed2 = mediamanager("control-test");

    myEmbed2.setup({
      token: "my-media-token",
    });
  </script>

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

  <script>
    document
      .getElementById("embed-control")
      .addEventListener("click", function () {
        const eventInterface = myEmbed2.control();

        if (eventInterface.getState() === "playing") {
          eventInterface.pause();
        } else {
          eventInterface.play();
        }
      });
  </script>
</div>

You can find a full list of available methods in the JW Player API docs.