dotstudioPRO Player Documentation

Usage

In order to embed the dotstudioPRO player, first ensure the player script is loaded onto your page:

<script type="text/javascript" src="https://www.dplayer.pro/dotplayer.js"></script>

Embedding the script above will expose the DotPlayer libary. Next, mount a player instance by calling the library's mount() method:

DotPlayer.mount({ video_id: "54d11dda97f81567407b23c6", company_id: "54d11dda97f81567407b23c6" })
  .then(async (player) => { // after this, the React Application has successfully mounted
    await player.isPlayerLoaded(); // but only after this is the player is done rendering
    await player.load('5f7f1d542a7c8b7c8679a902') // other player methods can now be used
});

The mount() method receives a resolved promise when the React app simply mounts successfully. It is highly recommended to await player.isPlayerLoaded to ensure you do not attempt to operate on the player prior to it becoming available. The player may be mounted without passing it a video_id to "preload" the player code and speed up load times when it is finally required.

In addition to passing the mandatory company_id parameter, a number of optional parameters exist that can be passed to the player during mounting. These are documented further below.

Player Methods

After mounting, some player methods are exposed to the window via `window.DotPlayer`.

Change video

To load a new video into the player, use the available `load` method. The load method requires one parameter - the dotstudioPRO Video ID.

await player.load('5f691d0f1cc5be21fb199b72');

Load video by URL

To load an HLS stream with a VMAP directly into the player, use the available `loadByUrl` method. The `loadByUrl` method requires one parameters - the HLS playback URL. There is an optional second parameter available which can be used to pass a VMAP URL to the player.

await player.loadByUrl('https://my.site.com/video/123.m3u8', 'https://my.site.com/vmap/123');

HTML5 Player Methods

All standard VideoJS player methods are exposed after mounting to the player instance's vjs class. Example usage:

player.vjs.on('play', function() {
  console.log("Player onPlay event.")
});

Dispose

To safely dispose of the player when it is no longer needed, use the library's available `unmount` method..

DotPlayer.unmount();

Optional Configuration

video_id

autostart

muted

controls

target

channel_id

channel_title

dspro_channel_id

inline

skin

theme

fluid

springserve

Full Example Embed

  <script type="text/javascript" src="https://www.dplayer.pro/dotplayer.js"></script>
  <div id="my-player-div" style="width:640px; height: 360px;"><div/>

  <script type="text/javascript">
  DotPlayer.mount({
    video_id: "54d11dda97f81567407b23c6",
    company_id: "54d11dda97f81567407b23c6",
    autostart: true,
    muted: true,
    controls: true,
    target: "#my-player-div",
    channel_id: "5aab9759ecad8d626fa96393",
    channel_title: "My Cool Channel",
    dspro_channel_id: "5710181383058e4930798606",
    fluid: false,
    skin: true,
    theme: {
      fontColor: "#ffffff",
      fontColorHover: "#33B275",
      progressSliderMain: "#33B275",
      progressSliderBackground: "#dddddd",
      controlBar: "#000000"
    },
    springserve: {
      user_cookieid: "abcd-efgh-ijkl-mnop"
    }
  }).then(async (player) => {
    await player.isPlayerLoaded();
  });;
  </script>