All parameters listed below shall be added on Clappr.Player object instantiation. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
parameter1: "value1",
parameter2: "value2",
});You can set the player size setting width and height parameters.
You can specify where the player should be attached to using either the parentId, or parent option. parentId should be the id of the element you would like the player to be inserted into, or parent should be set to a reference to a dom element.
Add autoPlay: true if you want the video to automatically play after page load.
By default, Clappr player will do its best to detect if the browser can play video automatically. If you want to disable this behaviour, add disableCanAutoPlay: true parameter.
Add loop: true if you want the video to automatically replay after it ends.
Add chromeless: true if you want the player to act in chromeless mode.
You can force the player to use a specific language language and you can also provide your own translations.
var options = {
source: 'example.com/example.mpd',
language: 'pt-BR',
strings: {
'pt-BR': {
'live': 'ao vivo',
'back_to_live': 'voltar para o ao vivo',
'disabled': 'Desativado',
'playback_not_supported': 'Seu navegador não supporta a reprodução deste video. Por favor, tente usar um navegador diferente.'
}
}
}If you want to provide your translations, create a PR by editing the Strings plugin.
Add allowUserInteraction: true if you want the player to handle clicks/taps when in chromeless mode. By default it's set to false on desktop browsers, and true on mobile browsers (due to playback start only being allowed when started through user interaction).
Add disableKeyboardShortcuts: true if you want to disable keyboard control of the player. This is forced to true when allowUserInteraction is false.
Add mute: true if you want to start player with no sound.
Add mimeType: "mimetype-for-media" if you need to use a media url without extension.
Add actualLiveTime: true if you want the time in the seek bar to be according to actual time.
Add actualLiveServerTime: "2015/11/26 06:01:03" if you want the time in the seek bar to match with a specified time.
Add persistConfig: false if you don't want to persist player's volume through your videos, by default it saves. These configuration are being saved at user's browser (through localStorage).
Add playbackNotSupportedMessage: 'Please try on a different browser' to define a custom message to be displayed when a playback is not supported.
In case you're loading a on demand video (mp4), it's possible to define the way the video will be preloaded according to preload attribute options. Add preload: <type> on embed parameters. By default, Clappr will try to download only video metadata (preload: 'metadata').
The configuration for the playback, it's still only compatible with html5_video playback (and derived).
{
playback: {
preload: 'metadata',
controls: true,
playInline: true, // allows inline playback when running on iOS UIWebview
crossOrigin: 'use-credentials',
recycleVideo: Clappr.Browser.isMobile, // Recycle <video> element only for mobile. (default is false)
triggerFatalErrorOnResourceDenied: true, // Triggers playback fatal error if resource is denied. (default is false)
externalTracks: [ // Add external <track> (if supported by browser, see also https://www.w3.org/TR/html5/embedded-content-0.html#the-track-element)
{lang: 'en', label: 'English', src: 'http://example.com/en.vtt', kind: 'subtitles'},
{lang: 'fr', label: 'French', src: 'http://example.com/fr.vtt'} // 'kind' default value is 'subtitles'
]
}
}With HLS.JS playback, if triggerFatalErrorOnResourceDenied is set to true, it will triggers a playback fatal error event if decrypt key http response code is greater than or equal to 400. (Default behaviour is to automatically retry key request). This option is used to attempt to reproduce iOS devices behaviour which internally use html5 video playback.
All options to configure the HLS playback should be under playback. Any specific settings for hls.js should be in the option hlsjsConfig:
{
playback: {
hlsjsConfig: {
// hls.js specific options
}
}
}The default behavior for the HLS playback is to use hls.currentLevel to switch current level. To change this behaviour and force HLS playback to use hls.nextLevel, add hlsUseNextLevel: true to embed parameters. (default value is false)
Ex:
{
playback: {
hlsUseNextLevel: true
}
}The default behavior for the HLS playback is to keep buffering indefinitely, even on VoD. This replicates the behavior for progressive download, which continues buffering when pausing the video, thus making the video available for playback even on slow networks. To change this behavior, add maxMaxBufferLength: <value> to embed parameters, where value is in seconds.
{
playback: {
hlsjsConfig: {
maxMaxBufferLength: value
}
}
}Customize the labels and title:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
closedCaptionsConfig: {
title: 'Subtitles', // default is none
ariaLabel: 'Closed Captions', // Default is 'cc-button'
labelCallback: function (track) { return track.name }, // track is an object with id, name and track properties (track is TextTrack object)
},
});Enable Google Analytics events dispatch (play/pause/stop/buffering/etc) adding your gaAccount. Optionally, pass your favorite trackerName as gaTrackerName. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
gaAccount: 'UA-44332211-1',
gaTrackerName: 'MyPlayerInstance'
});Customize control bar colors adding mediacontrol hash. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}
});Result:
I'm sure you can do better than me.
For advanced configuration, you can create an entire MediaControl object. At its most basic,
you might consider subclassing the base MediaControl and using your own custom HTML and CSS.
// ES6-style code shown
class MyMediaControl extends Clappr.MediaControl {
get template() {
return Clappr.template(
`<div>My HTML here based on clappr/src/components/media_control/public/media-control.html</div>`
)
}
get stylesheet () {
return Clappr.Styler.getStyleFor(
`.my-css-class { /* based on clappr/src/components/media_control/public/media-control.scss */ }`
)
}
constructor(options) {
super(options);
}
}
let player = new Clappr.Player({
source: "http://your.video/here.mp4",
plugins: { core: MyMediaControl }
});If you want to disable media control auto hide, add hideMediaControl: false in your embed parameters.
If you want to change the default media control auto hide timeout value, add hideMediaControlDelay: 2000 in your embed parameters. (delay in milliseconds)
When embedded with width less than 320, volume bars are hidden. You can force this behavior for all sizes by adding hideVolumeBar: true.
Put watermark: http://url/img.png on your embed parameters to automatically add watermark on your video. Choose corner position by defining position parameter. Positions can be bottom-left, bottom-right, top-left and top-right. To define an URL to open when the watermark is clicked, use watermarkLink parameter. If the watermarkLink parameter not defined, the watermark will not be clickable. Example:
var player = new Clappr.Player({
source: "http://your.video/here.mp4",
watermark: "http://url/img.png", position: 'top-right',
watermarkLink: "http://example.net/"
});Define a poster image by adding poster: 'http://url/img.png' on your player options. It will appear after video embed, disappear on play and go back when user stops the video. For audio broadcasts, the poster stays up while playing.
Some audio-only sources (e.g. HLS) cannot be easily detected as such; for that you can add audioOnly: true to the options so clappr knows to treat the source as such.
Clappr has a native statistics plugin that accounts QoE metrics such playing time, rebuffering time, total rebuffers, etc. Metrics report happens periodically, learn how to access these numbers on Create your own plugin session.
By default if the URL contains a time then the media will seek to this point. E.g. example.com?t=100 would start the media at 100 seconds in.
To disable this add autoSeekFromUrl: false.
Add disableVideoTagContextMenu: true to disable the context menu (right click) on the HTML5 video element (in the case where a HTML5 playback is used).
By default the player will automatically exit full screen when the media ends. To disable this add exitFullscreenOnEnd: false on your player options.