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
- Type: String
- Valid values: "MongoObjectID"
- Default value: null
- To load a specific video from the dotstudioPRO CMS, it's ID must be passed to the mount() or load() methods.
autostart
- Type: Boolean
- Valid values: true or false
- Default value: false
- Defines whether the player should attempt to automatically begin video playback when the video asset is loaded.
- Please note that all major browsers disallow auto playing videos with sound. If you pass a value of `true` the player will attempt to begin playback automatically but the volume will be muted by default.
- The Chrome browser is able to learn the user's preference on return page visits to your domain and may eventually allow autoplay with sound on, however this is up to the user.
muted
- Type: Boolean
- Valid values: true or false
- Default value: false
- Defines whether the player should begin playback muted.
controls
- Type: Boolean
- Valid values: true or false
- Default value: true
- Defines whether the player controls should be visible.
target
- Type: String
- Valid values: .classSelector or #idSelector
- Default value: null
- Use this to specify a div for the player to render in. If this is not provided the player will get appended to the page body.
channel_id
- Type: String
- Valid values: "MongoObjectID"
- Default value: null
- If the player was rendered from a channel page, the Spotlight Channel ID should be provided during mounting to capture additional analytics.
- Always send the parent channel ID, even if looking at a season of a series.
channel_title
- Type: String
- Valid values: "Title of My Channel"
- Default value: null
- If the player was rendered from a channel page, the Channel Title should be provided during mounting to capture additional analytics.
dspro_channel_id
- Type: String
- Valid values: "MongoObjectID"
- Default value: null
- If the player was rendered from a channel page, the dotstudioPRO Channel ID can be provided during mounting to capture additional analytics.
- Always send the parent channel ID, even if looking at a season of a series.
inline
- Type: Boolean
- Valid values: true or false
- Default value: false
- Allows to play inline, and will not automatically enter fullscreen mode when playback begins.
skin
- Type: Boolean
- Valid values: true or false
- Default value: true
- Defines whether the dotstudioPRO skin should be loaded.
theme
- Type: Object
- Sample object & default values:
- The theme object will only accept valid hexadecimal color codes.
{
fontColor: "#ffffff", // main icon color
fontColorHover: "#33B275", // icon color when hovered over
progressSliderMain: "#33B275", // progress slider color
progressSliderBackground: "#aaaaaa", // progress slider background color
controlBar: "#000000", // control bar gradient background color
}
fluid
- Type: Boolean
- Valid values: true or false
- Default value: true
- Fluid mode players will force a 16x9 aspect ratio with a variable width. Non-fluid players will fill the width and height of the parent container.
springserve
- Type: Object
- Default value: null
- Options for Springserve ad servers
- Sample object:
{
"user_cookieid": "" // Passes a `user_cookieid` macro value to video playback urls (m3u8s) and calls to our VMAP route.
}
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>