/**
* ## Player's constructor
*
* You might pass the options object to build the player.
* ```javascript
* var options = {source: "http://example.com/video.mp4", param1: "val1"};
* var player = new Clappr.Player(options);
* ```
*
* @method constructor
* @param {Object} options Data
* options to build a player instance
* @param {Number} [options.width]
* player's width **default**: `640`
* @param {Number} [options.height]
* player's height **default**: `360`
* @param {String} [options.parentId]
* the id of the element on the page that the player should be inserted into
* @param {Object} [options.parent]
* a reference to a dom element that the player should be inserted into
* @param {String} [options.source]
* The media source URL, or {source: <<source URL>>, mimeType: <<source mime type>>}
* @param {Object} [options.sources]
* An array of media source URL's, or an array of {source: <<source URL>>, mimeType: <<source mime type>>}
* @param {Boolean} [options.autoPlay]
* automatically play after page load **default**: `false`
* @param {Boolean} [options.loop]
* automatically replay after it ends **default**: `false`
* @param {Boolean} [options.chromeless]
* player acts in chromeless mode **default**: `false`
* @param {Boolean} [options.allowUserInteraction]
* whether or not the player should handle click events when in chromeless mode **default**: `false` on desktops browsers, `true` on mobile.
* @param {Boolean} [options.disableKeyboardShortcuts]
* disable keyboard shortcuts. **default**: `false`. `true` if `allowUserInteraction` is `false`.
* @param {Boolean} [options.muted]
* start the video muted **default**: `false`
* @param {String} [options.mimeType]
* add `mimeType: "application/vnd.apple.mpegurl"` if you need to use a url without extension.
* @param {String} [options.actualLiveTime]
* show duration and seek time relative to actual time.
* @param {String} [options.actualLiveServerTime]
* specify server time as a string, format: "2015/11/26 06:01:03". This option is meant to be used with actualLiveTime.
* @param {Boolean} [options.persistConfig]
* persist player's settings (volume) through the same domain **default**: `true`
* @param {String} [options.preload]
* video will be preloaded according to `preload` attribute options **default**: `'metadata'`
* @param {Number} [options.maxBufferLength]
* 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 use `maxBufferLength` where **value is in seconds**.
* @param {String} [options.gaAccount]
* enable Google Analytics events dispatch **(play/pause/stop/buffering/etc)** by adding your `gaAccount`
* @param {String} [options.gaTrackerName]
* besides `gaAccount` you can optionally, pass your favorite trackerName as `gaTrackerName`
* @param {Object} [options.mediacontrol]
* customize control bar colors, example: `mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}`
* @param {Boolean} [options.hideMediaControl]
* control media control auto hide **default**: `true`
* @param {Boolean} [options.hideVolumeBar]
* when embedded with width less than 320, volume bar will hide. You can force this behavior for all sizes by adding `true` **default**: `false`
* @param {String} [options.watermark]
* put `watermark: 'http://url/img.png'` on your embed parameters to automatically add watermark on your video.
* You can customize corner position by defining position parameter. Positions can be `bottom-left`, `bottom-right`, `top-left` and `top-right`.
* @param {String} [options.watermarkLink]
* `watermarkLink: 'http://example.net/'` - define URL to open when the watermark is clicked. If not provided watermark will not be clickable.
* @param {Boolean} [options.disableVideoTagContextMenu]
* disables the context menu (right click) on the video element if a HTML5Video playback is used.
* @param {Boolean} [options.autoSeekFromUrl]
* Automatically seek to the seconds provided in the url (e.g example.com?t=100) **default**: `true`
* @param {Boolean} [options.exitFullscreenOnEnd]
* Automatically exit full screen when the media finishes. **default**: `true`
* @param {String} [options.poster]
* define a poster by adding its address `poster: 'http://url/img.png'`. It will appear after video embed, disappear on play and go back when user stops the video.
* @param {String} [options.playbackNotSupportedMessage]
* define a custom message to be displayed when a playback is not supported.
* @param {Object} [options.events]
* Specify listeners which will be registered with their corresponding player events.
* E.g. onReady -> "PLAYER_READY", onTimeUpdate -> "PLAYER_TIMEUPDATE"
*/
constructor(options) {
super(options)
var defaultOptions = {playerId: uniqueId(""), persistConfig: true, width: 640, height: 360, baseUrl: baseUrl, allowUserInteraction: Browser.isMobile}
this.options = $.extend(defaultOptions, options)
this.options.sources = this._normalizeSources(options)
if (!this.options.chromeless) {
// "allowUserInteraction" cannot be false if not in chromeless mode.
this.options.allowUserInteraction = true
}
if (!this.options.allowUserInteraction) {
// if user iteraction is not allowed ensure keyboard shortcuts are disabled
this.options.disableKeyboardShortcuts = true
}
this._registerOptionEventListeners()
this._coreFactory = new CoreFactory(this)
this.playerInfo = PlayerInfo.getInstance(this.options.playerId)
this.playerInfo.currentSize = {width: options.width, height: options.height}
this.playerInfo.options = this.options
if (this.options.parentId) {
this.setParentId(this.options.parentId)
}
else if (this.options.parent) {
this.attachTo(this.options.parent)
}
}
/**
* adds all the external plugins that were passed through `options.plugins`
* @method addExternalPlugins
* @private
* @param {Object} plugins the config object with all plugins
*/
addExternalPlugins(plugins) {
plugins = this.groupPluginsByType(plugins)
var pluginName = function(plugin) { return plugin.prototype.name }
if (plugins.playback) { this.playbackPlugins = uniq(plugins.playback.concat(this.playbackPlugins), pluginName) }
if (plugins.container) { this.containerPlugins = uniq(plugins.container.concat(this.containerPlugins), pluginName) }
if (plugins.core) { this.corePlugins = uniq(plugins.core.concat(this.corePlugins), pluginName) }
PlayerInfo.getInstance(this.playerId).playbackPlugins = this.playbackPlugins
}
constructor(options) {
super(options)
this.playerInfo = PlayerInfo.getInstance(options.playerId)
this.options = options
this.plugins = []
this.containers = []
this.setupMediaControl(null)
//FIXME fullscreen api sucks
$(document).bind('fullscreenchange', () => this.exit())
$(document).bind('MSFullscreenChange', () => this.exit())
$(document).bind('mozfullscreenchange', () => this.exit())
}
constructor(options) {
super(options)
this.playerInfo = PlayerInfo.getInstance(options.playerId)
this.firstResize = true
this.options = options
this.plugins = []
this.containers = []
this.setupMediaControl(null)
//FIXME fullscreen api sucks
this._boundFullscreenHandler = () => this.handleFullscreenChange()
$(document).bind('fullscreenchange', this._boundFullscreenHandler)
$(document).bind('MSFullscreenChange', this._boundFullscreenHandler)
$(document).bind('mozfullscreenchange', this._boundFullscreenHandler)
}
/**
* ## Player's constructor
*
* You might pass the options object to build the player.
* ```javascript
* var options = {source: "http://example.com/video.mp4", param1: "val1"};
* var player = new Clappr.Player(options);
* ```
*
* @method constructor
* @param {Object} options Data
* options to build a player instance
* @param {Number} [options.width]
* player's width **default**: `640`
* @param {Number} [options.height]
* player's height **default**: `360`
* @param {String} [options.parentId]
* the id of the element on the page that the player should be inserted into
* @param {Object} [options.parent]
* a reference to a dom element that the player should be inserted into
* @param {String} [options.source]
* The media source URL, or {source: <<source URL>>, mimeType: <<source mime type>>}
* @param {Object} [options.sources]
* An array of media source URL's, or an array of {source: <<source URL>>, mimeType: <<source mime type>>}
* @param {Boolean} [options.autoPlay]
* automatically play after page load **default**: `false`
* @param {Boolean} [options.loop]
* automatically replay after it ends **default**: `false`
* @param {Boolean} [options.chromeless]
* player acts in chromeless mode **default**: `false`
* @param {Boolean} [options.muted]
* start the video muted **default**: `false`
* @param {String} [options.mimeType]
* add `mimeType: "application/vnd.apple.mpegurl"` if you need to use a url without extension.
* @param {String} [options.actualLiveTime]
* show duration and seek time relative to actual time.
* @param {String} [options.actualLiveServerTime]
* specify server time as a string, format: "2015/11/26 06:01:03". This option is meant to be used with actualLiveTime.
* @param {Boolean} [options.persistConfig]
* persist player's settings (volume) through the same domain **default**: `true`
* @param {String} [options.preload]
* video will be preloaded according to `preload` attribute options **default**: `'metadata'`
* @param {Number} [options.maxBufferLength]
* 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 use `maxBufferLength` where **value is in seconds**.
* @param {String} [options.gaAccount]
* enable Google Analytics events dispatch **(play/pause/stop/buffering/etc)** by adding your `gaAccount`
* @param {String} [options.gaTrackerName]
* besides `gaAccount` you can optionally, pass your favorite trackerName as `gaTrackerName`
* @param {Object} [options.mediacontrol]
* customize control bar colors, example: `mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}`
* @param {Boolean} [options.hideMediaControl]
* control media control auto hide **default**: `true`
* @param {Boolean} [options.hideVolumeBar]
* when embedded with width less than 320, volume bar will hide. You can force this behavior for all sizes by adding `true` **default**: `false`
* @param {String} [options.watermark]
* put `watermark: 'http://url/img.png'` on your embed parameters to automatically add watermark on your video. You can customize corner position by defining position parameter. Positions can be `bottom-left`, `bottom-right`, `top-left` and `top-right`.
* @param {Boolean} [options.disableVideoTagContextMenu]
* disables the context menu (right click) on the video element if a HTML5Video playback is used.
* @param {Boolean} [options.autoSeekFromUrl]
* Automatically seek to the seconds provided in the url (e.g example.com?t=100) **default**: `true`
* @param {String} [options.poster]
* define a poster by adding its address `poster: 'http://url/img.png'`. It will appear after video embed, disappear on play and go back when user stops the video.
* @param {String} [options.playbackNotSupportedMessage]
* define a custom message to be displayed when a playback is not supported.
* @param {Object} [options.events]
* Specify listeners which will be registered with their corresponding player events.
* E.g. onReady -> "PLAYER_READY", onTimeUpdate -> "PLAYER_TIMEUPDATE"
*/
constructor(options) {
super(options)
var defaultOptions = {playerId: uniqueId(""), persistConfig: true, width: 640, height: 360, baseUrl: baseUrl}
this.options = $.extend(defaultOptions, options)
this.options.sources = this.normalizeSources(options)
this.registerOptionEventListeners()
this.coreFactory = new CoreFactory(this)
this.playerInfo = PlayerInfo.getInstance(this.options.playerId)
this.playerInfo.currentSize = {width: options.width, height: options.height}
this.playerInfo.options = this.options
if (this.options.parentId) {
this.setParentId(this.options.parentId)
}
else if (this.options.parent) {
this.attachTo(this.options.parent)
}
}