Skip to content

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

<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=W9m0eR" 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: Please contact support or visit the price calculator for more information.

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




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' on metadata off
start_level -1 Start level index, use -1 for automatic selection
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
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_store true Keep and re-use user selected text track session storage (initial option only)
captions_default_show false Show the default subtitle from start
captions_color #FFF Captions foreground color, valid values: #000, #00F, #0FF, #0F0, #F0F, #F00, #FFF, #FF0
captions_bg_color #000 Captions background color, valid values: #000, #00F, #0FF, #0F0, #F0F, #F00, #FFF, #FF0
captions_bg_opacity #000 Captions background opacity, valid values: 0, 0.5, 1
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.