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.

Examples

Embed code

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

Preview

Embed code

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

Preview

Using the API

HTML

<script src="//player.clevercast.com/js/api.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, 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'
	}
});

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)
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
playbackRate None | rate:Number Set or get the playback rate
showControls None Show the controls
hideControls None Hide the controls
requestFullscreen None Request the player to go fullscreen. Does not work in all browsers.
exitFullscreen None Request the player to leave fullscreen.
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

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.
action currentTime:Number, plugin:String, action:String | action:Object Fires on action.

Example

Methods

Event log


					

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
aboutlink '//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' on metadata off
start_level -1 Start level index, use -1 for automatic selection
autoplay false Autoplay the media
playsinline false Play inside page on mobile devices
controls true Show player controls
picture_in_picture false Show Picture-in-Picture button in controls
volume 1.0 Start volume
muted false Start muted
show_title false Show name as title
starttime 0.0 Start at time
loop false Loop media
captions_default '' Default subtitle code
captions_default_show false Show the default subtitle from start
comm_url_enable true Enable ad tag URL request (*)
comm_url '' Ad tag URL (*)
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

* Can only be set when enabled in Clevercast.