Player

Quick start

There are a two methods to use the Clevercast Player:

The most easy way to embed the player in your page is by adding an <iframe> with options as URL parameters. You can always find the embed code for your item, event or webcast in the Clevercast platform.

When you need more control, you can use the JavaScript API. This enables you to listen for events and load new options dynamically.

Note about autoplay: most browsers do not allow content to play automatically with sound. When you enable autoplay, we strongly advise you to also enable muted. For more information, click here.

Examples

ItemEvent

<iframe width="854" height="480" src="https://player.clevercast.com/?account_id=Wjb45d&amp;item_id=VzzgGr" style="border: 0" allow="autoplay; fullscreen" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

<iframe width="854" height="480" src="https://player.clevercast.com/?account_id=271mkz&amp;event_id=27yQlz" style="border: 0" allow="autoplay; fullscreen" allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

Using the API

HTML

<script src="https://player.clevercast.com/js/api.min.js"></script>
<div id="player"></div>

JavaScript

When using the API, you can pass layout options. By default, a fixed width and height is used:

var player = new RMP({
  'id':                      'player',
  'width':                   854,
  'height':                  480,
  'options': {
    'account_id':            'Wjb45d',
    'item_id':               'VzzgGr' // or `event_id` for live, see options
  }
});

Or, if you want the player to behave responsive (16 by 9), you can instead enable the responsive parameter:

var player = new RMP({
  'id':                      'player',
  'responsive':              true,
  'options': {
    'account_id':            'Wjb45d',
    'item_id':               'VzzgGr'
  }
});

If you want the player to follow while the user scrolls down, you can enable the autoscrollspy parameter (requires responsive):

var player = new RMP({
  'id':                      'player',
  'responsive':              true,
  'autoscrollspy':           true,
  'options': {
    'account_id':            'Wjb45d',
    'item_id':               'VzzgGr'
  }
});

Or, if you want the player to auto play when visible, you can enable the autoscrollplay parameter (requires responsive):

var player = new RMP({
  'id':                      'player',
  'responsive':              true,
  'autoscrollplay':          true,
  'options': {
    'account_id':            'Wjb45d',
    'item_id':               'VzzgGr'
  }
});

To add a separate captions display:

var captions = new RMCP({
  'id':                      'captions',
  'rmp':                     player,     // The instantiated RMP object to attach to.
  'options': {
      'captions_default':    'su',       // The default captions language to open with (defaults to the first)
      'color':               'red',      // Basic styling of the captions
      'bg_color':            'green',
      'active_cue_color':    'turquoise',
      'active_cue_bg_color': 'darkblue',
      'font_family':         'Tex Gyre Pagella',
      'font_size':           '1.5rem',
      'show_select':         true,       // Whether to show the caption language selection

      // Custom CSS can be used for complete control
      'custom_css': `
        body {
          padding: 1rem;
        }
    `,
  }
});

Methods

Name	Parameters	Description
addEventListener	event:String, callback:Function	Add an event listener, see below for a list of events
removeEventListener	event:String, callback:Function	Remove an event listener, see below for a list of events
load	options:Object	Load new options (see options below)
play	None | position:Number	Start playback, optionally seek to given position
pause	None | position:Number	Pause playback, optionally seek to given position
seek	position:Number	Seek to given position
playing	None	Returns true when video is playing, false when it is not
adPlaying	None	Returns true when ad video is playing, false when it is not
currentTime	None	Returns the current time
currentAbsoluteTime	None	Returns the absolute current time (only applicable to live streams)
currentType	None	Returns the current type
duration	None	Returns the current duration
volume	None | volume:Number	Set or get the volume
muted	None | isMuted:Boolean	Set or get the muted volume state
audioTrackList	None	Get the list of audio tracks
audioTrack	None | audioTrack:String	Set or get the current audio track
captionsTrackList	None	Get the list of captions tracks
captionsTrack	None | captionsTrack:String	Set or get the current captions track
playbackRate	None | rate:Number	Set or get the playback rate
liveStatus	status:Number	Get the live event status NONE = -1, WAITING = 0, STARTED = 1, PAUSED = 2, ENDED = 3
showControls	None	Show the controls
hideControls	None	Hide the controls
requestScrollspy	None	Request the player to go in scrollspy mode
exitScrollspy	None	Request the player to leave scrollspy mode
showShareDialog	None	Show the share dialog
hideShareDialog	None	Hide the share dialog
showRelatedDialog	None	Show the related dialog
hideRelatedDialog	None	Hide the related dialog
showTopMessage	msg:String, type:String	Show message on top of player Set type to warning or leave empty
hideTopMessage	None	Hide message on top of player

Events

Name	Callback parameters	Description
ready	None	Fires when the player is ready.
error	error:Object	Fires when an error in encountered.
loadedmetadata	None	Fires when the video metadata is loaded.
waiting	None	Fires when the video is waiting for the buffer.
canplay	None	Fires when the video can be played (is buffered).
play	currentTime:Number	Fires when the video has been started or is no longer paused.
pause	currentTime:Number	Fires when the video has been paused.
seeked	currentTime:Number	Fires when the user is finished moving/skipping to a new position in the video.
ended	currentTime:Number	Fires when the video ended.
fullscreenchange	isFullscreen:Boolean, isFake:Boolean	Fires on fullscreen change. Some devices (iOS) require a fake fullscreen, this will result in the player filling the document window.
scrollspychange	isScrollspy:Boolean	Fires on scrollspy change.
structureddata	data:Object	Fires when player fetched the data for an item or event from the Clevercast platform. data contains: name, description, thumbnailUrl, uploadDate, duration
livestatuschange	status:Number	Fires on new live event status change.
analytics	data:Object	Fires on analytics request. data contains: path, params, success
action	currentTime:Number, plugin:String, action:String | action:Object

Example

load() play() pause() seek(10) currentTime() currentType() duration() volume(0.5) muted(true) playbackRate(2.0) showControls hideControls requestScrollspy exitScrollspy

Options

Option	Default value	Description
account_id	''	Account ID
item_id	''	Item ID
event_id	''	Event ID
smartlist_id	''	Smartlist ID
playlist_id	''	Playlist ID
webcast_id	''	Webcast ID
registrant_id	''	Registrant ID
player_id	''	Player ID
abouttext	'Clevercast Player'	Top text in context menu, leave empty to disable the menu
aboutlink	'https://www.clevercast.com'	Top link in context menu
continuous	false	Autoplay next playlist item
hmac	''	HMAC string to pass to the redirect service
expires	''	Expire time to pass to the redirect service
back_button	true	Show back button (on media switch)
autoload	'on'	Valid values: on, metadata, off
start_level	-1	Start level index, use -1 for automatic selection
max_level_res	-1	Maximum level resolution in the form of e.g. 720p, 1080p, use -1 for no limit. NB This will not work on iOS.
snapshot	''	URL to poster image
autoplay	false	Autoplay the media
playsinline	false	Play inside page on mobile devices
controls	true	Show player controls
controls_inactivity_timeout	2000	Number of milliseconds to wait after inactivity before hiding controls
language_instructions	false	Show language instructions
language_instructions_delay	6000	Number of milliseconds to wait before showing language instructions
language_instructions_timeout	8000	Number of milliseconds to wait before hiding language instructions
unplayed_seek	true	Allow seeking to unplayed position
picture_in_picture	false	Show Picture-in-Picture button in controls
fullscreen	true	Show Fullscreen button in controls
disable_pause	false	Disable pausing the video and hide play button in controls (ignored with native controls). Best used in combination with playsinline on iOS.
volume	1.0	Start volume
muted	false	Start muted
muted_instructions	false	Show muted instructions
muted_instructions_delay	6000	Number of milliseconds to wait before showing muted instructions
muted_instructions_timeout	8000	Number of milliseconds to wait before hiding muted instructions
show_title	false	Show name as title
starttime	0.0	Start at time
loop	false	Loop media
audio_default	''	Default audio track: leave empty, browser or set to ISO-639-1 language code (for example en)
audio_default_store	true	Keep and re-use user selected audio track session storage (initial option only)
captions_default	''	Default text track: leave empty, browser or set to ISO-639-1 language code (for example en)
captions_default_show	false	Show the default subtitle from start
captions_default_store	true	Keep and re-use user selected text track session storage (initial option only)
captions_color	'rgba(255, 255, 255, 1.0)'	Captions foreground color
captions_bg_color	'rgba(0, 0, 0, 0.8)'	Captions background color
captions_edge_style	'none'	Captions edge syle, valid values: none, raised, depressed, uniform, dropshadow
captions_font_family	'proportionalSansSerif'	Captions font family, valid values: proportionalSansSerif, monospaceSansSerif, proportionalSerif, monospaceSerif, casual, script, small-caps
captions_font_percent	1.00	Captions font size percent, valid values: 0.50, 0.75, 1.00, 1.25, 1.50, 1.75, 2.00, 3.00, 4.00
comm_url_enable	true	Enable ad tag URL request (*)
comm_url	''	Ad tag URL (*)
comm_url_prefetch	true	Use the API to prefetch the ad URL when available
comm_url_credentials	true	Send credentials and cookies to ad tag URL
comm_min_duration	0.0	Minimum item duration required to play ad (*)
playback_rates	[]	Allow setting playback rate with controls, example: [ 0.5, 1.0, 1.5 ]
chromecast	false	Enable Chromecast support
airplay	false	Enable AirPlay support

* Can only be set when "Allow Ad URL Override" is enabled for your player in Clevercast, this is disabled by default.