clappr
Version:
An extensible media player for the web
1,033 lines (744 loc) • 200 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Player - Clappr</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
<link rel="icon" href="../assets/favicon.ico">
<script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
<div id="doc">
<div id="hd" class="yui3-g header">
<div class="yui3-u-3-4">
<h1><img src="https://cloud.githubusercontent.com/assets/244265/6373134/a845eb50-bce7-11e4-80f2-592ba29972ab.png" title="Clappr"></h1>
</div>
<div class="yui3-u-1-4 version">
<em>API Docs for: 0.2.41</em>
</div>
</div>
<div id="bd" class="yui3-g">
<div class="yui3-u-1-4">
<div id="docs-sidebar" class="sidebar apidocs">
<div id="api-list">
<h2 class="off-left">APIs</h2>
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
<li><a href="../classes/BaseObject.html">BaseObject</a></li>
<li><a href="../classes/Container.html">Container</a></li>
<li><a href="../classes/ContainerPlugin.html">ContainerPlugin</a></li>
<li><a href="../classes/Core.html">Core</a></li>
<li><a href="../classes/CoreFactory.html">CoreFactory</a></li>
<li><a href="../classes/Events.html">Events</a></li>
<li><a href="../classes/Loader.html">Loader</a></li>
<li><a href="../classes/Playback.html">Playback</a></li>
<li><a href="../classes/Player.html">Player</a></li>
<li><a href="../classes/UIContainerPlugin.html">UIContainerPlugin</a></li>
<li><a href="../classes/UIObject.html">UIObject</a></li>
</ul>
<ul id="api-modules" class="apis modules">
<li><a href="../modules/base.html">base</a></li>
<li><a href="../modules/components.html">components</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui3-u-3-4">
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited" checked>
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
<div class="apidocs">
<div id="docs-main">
<div class="content">
<h1>Player Class</h1>
<div class="box meta">
<div class="extends">
Extends <a href="../classes/BaseObject.html" class="crosslink">BaseObject</a>
</div>
<div class="foundat">
Defined in: <a href="../files/src_components_player.js.html#l18"><code>src/components/player.js:18</code></a>
</div>
Module: <a href="../modules/components.html">components</a>
</div>
<div class="box intro">
</div>
<div class="constructor">
<h2>Constructor</h2>
<div id="method_Player" class="method item">
<h3 class="name"><code>Player</code></h3>
<span class="paren">()</span>
<div class="meta">
<p>
Defined in
<a href="../files/src_components_player.js.html#l18"><code>src/components/player.js:18</code></a>
</p>
</div>
<div class="description">
</div>
<div class="example">
<h4>Example:</h4>
<div class="example-content">
<h3>Using the Player</h3>
<p>Add the following script on your HTML:</p>
<pre class="code prettyprint"><code class="language-html"><head>
<script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script>
</head>
</code></pre>
<p>Now, create the player:</p>
<pre class="code prettyprint"><code class="language-html"><body>
<div id="player"></div>
<script>
var player = new Clappr.Player({source: "http://your.video/here.mp4", parentId: "#player"});
</script>
</body>
</code></pre>
</div>
</div>
</div>
</div>
<div id="classdocs" class="tabview">
<ul class="api-class-tabs">
<li class="api-class-tab index"><a href="#index">Index</a></li>
<li class="api-class-tab methods"><a href="#methods">Methods</a></li>
<li class="api-class-tab properties"><a href="#properties">Properties</a></li>
<li class="api-class-tab events"><a href="#events">Events</a></li>
</ul>
<div>
<div id="index" class="api-class-tabpanel index">
<h2 class="off-left">Item Index</h2>
<div class="index-section methods">
<h3>Methods</h3>
<ul class="index-list methods extends">
<li class="index-item method">
<a href="#method_attachTo">attachTo</a>
</li>
<li class="index-item method">
<a href="#method_configure">configure</a>
</li>
<li class="index-item method inherited">
<a href="#method_constructor">constructor</a>
</li>
<li class="index-item method">
<a href="#method_destroy">destroy</a>
</li>
<li class="index-item method">
<a href="#method_getCurrentTime">getCurrentTime</a>
</li>
<li class="index-item method">
<a href="#method_getDuration">getDuration</a>
</li>
<li class="index-item method">
<a href="#method_getPlugin">getPlugin</a>
</li>
<li class="index-item method">
<a href="#method_getStartTimeOffset">getStartTimeOffset</a>
</li>
<li class="index-item method">
<a href="#method_getVolume">getVolume</a>
</li>
<li class="index-item method">
<a href="#method_isPlaying">isPlaying</a>
</li>
<li class="index-item method inherited">
<a href="#method_listenTo">listenTo</a>
</li>
<li class="index-item method inherited">
<a href="#method_listenToOnce">listenToOnce</a>
</li>
<li class="index-item method">
<a href="#method_load">load</a>
</li>
<li class="index-item method">
<a href="#method_mute">mute</a>
</li>
<li class="index-item method inherited">
<a href="#method_off">off</a>
</li>
<li class="index-item method inherited">
<a href="#method_on">on</a>
</li>
<li class="index-item method inherited">
<a href="#method_once">once</a>
</li>
<li class="index-item method">
<a href="#method_pause">pause</a>
</li>
<li class="index-item method">
<a href="#method_play">play</a>
</li>
<li class="index-item method">
<a href="#method_resize">resize</a>
</li>
<li class="index-item method">
<a href="#method_seek">seek</a>
</li>
<li class="index-item method">
<a href="#method_seekPercentage">seekPercentage</a>
</li>
<li class="index-item method">
<a href="#method_setParentId">setParentId</a>
</li>
<li class="index-item method">
<a href="#method_setVolume">setVolume</a>
</li>
<li class="index-item method">
<a href="#method_stop">stop</a>
</li>
<li class="index-item method inherited">
<a href="#method_stopListening">stopListening</a>
</li>
<li class="index-item method inherited">
<a href="#method_trigger">trigger</a>
</li>
<li class="index-item method">
<a href="#method_unmute">unmute</a>
</li>
</ul>
</div>
<div class="index-section properties">
<h3>Properties</h3>
<ul class="index-list properties extends">
<li class="index-item property">
<a href="#property_buffering">buffering</a>
</li>
<li class="index-item property">
<a href="#property_ended">ended</a>
</li>
<li class="index-item property">
<a href="#property_eventsMapping">eventsMapping</a>
</li>
<li class="index-item property inherited">
<a href="#property_uniqueId">uniqueId</a>
</li>
</ul>
</div>
<div class="index-section events">
<h3>Events</h3>
<ul class="index-list events extends">
<li class="index-item event inherited">
<a href="#event_CONTAINER_BITRATE">CONTAINER_BITRATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_HIGHDEFINITIONUPDATE">CONTAINER_HIGHDEFINITIONUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_LOADEDMETADATA">CONTAINER_LOADEDMETADATA</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_MEDIACONTROL_HIDE">CONTAINER_MEDIACONTROL_HIDE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_MEDIACONTROL_SHOW">CONTAINER_MEDIACONTROL_SHOW</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_OPTIONS_CHANGE">CONTAINER_OPTIONS_CHANGE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_PLAYBACKSTATE">CONTAINER_PLAYBACKSTATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_PROGRESS">CONTAINER_PROGRESS</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_READY">CONTAINER_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_SEEK">CONTAINER_SEEK</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_SETTINGSUPDATE">CONTAINER_SETTINGSUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_STATE_BUFFERFULL">CONTAINER_STATE_BUFFERFULL</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_STATE_BUFFERING">CONTAINER_STATE_BUFFERING</a>
</li>
<li class="index-item event inherited">
<a href="#event_CONTAINER_TIMEUPDATE">CONTAINER_TIMEUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_CORE_OPTIONS_CHANGE">CORE_OPTIONS_CHANGE</a>
</li>
<li class="index-item event inherited inherited">
<a href="#event_CORE_READY">CORE_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_CONTAINERCHANGED">MEDIACONTROL_CONTAINERCHANGED</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_FULLSCREEN">MEDIACONTROL_FULLSCREEN</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_HIDE">MEDIACONTROL_HIDE</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_MOUSELEAVE_SEEKBAR">MEDIACONTROL_MOUSELEAVE_SEEKBAR</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_MOUSEMOVE_SEEKBAR">MEDIACONTROL_MOUSEMOVE_SEEKBAR</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_NOTPLAYING">MEDIACONTROL_NOTPLAYING</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_PLAYING">MEDIACONTROL_PLAYING</a>
</li>
<li class="index-item event inherited">
<a href="#event_MEDIACONTROL_SHOW">MEDIACONTROL_SHOW</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_BITRATE">PLAYBACK_BITRATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_BUFFERFULL">PLAYBACK_BUFFERFULL</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_BUFFERING">PLAYBACK_BUFFERING</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_DVR">PLAYBACK_DVR</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_ENDED">PLAYBACK_ENDED</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_ERROR">PLAYBACK_ERROR</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_HIGHDEFINITIONUPDATE">PLAYBACK_HIGHDEFINITIONUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LEVEL_SWITCH_END">PLAYBACK_LEVEL_SWITCH_END</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LEVEL_SWITCH_START">PLAYBACK_LEVEL_SWITCH_START</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LEVELS_AVAILABLE">PLAYBACK_LEVELS_AVAILABLE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_LOADEDMETADATA">PLAYBACK_LOADEDMETADATA</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PAUSE">PLAYBACK_PAUSE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PLAY">PLAYBACK_PLAY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PLAYBACKSTATE">PLAYBACK_PLAYBACKSTATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_PROGRESS">PLAYBACK_PROGRESS</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_READY">PLAYBACK_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_SETTINGSUPDATE">PLAYBACK_SETTINGSUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_STOP">PLAYBACK_STOP</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYBACK_TIMEUPDATE">PLAYBACK_TIMEUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_ENDED">PLAYER_ENDED</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_ERROR">PLAYER_ERROR</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_FULLSCREEN">PLAYER_FULLSCREEN</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_PAUSE">PLAYER_PAUSE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_PLAY">PLAYER_PLAY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_READY">PLAYER_READY</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_RESIZE">PLAYER_RESIZE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_SEEK">PLAYER_SEEK</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_STOP">PLAYER_STOP</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_TIMEUPDATE">PLAYER_TIMEUPDATE</a>
</li>
<li class="index-item event inherited">
<a href="#event_PLAYER_VOLUMEUPDATE">PLAYER_VOLUMEUPDATE</a>
</li>
</ul>
</div>
</div>
<div id="methods" class="api-class-tabpanel">
<h2 class="off-left">Methods</h2>
<div id="method_attachTo" class="method item">
<h3 class="name"><code>attachTo</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>element</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_components_player.js.html#l210"><code>src/components/player.js:210</code></a>
</p>
</div>
<div class="description">
<p>You can use this method to attach the player to a given element. You don't need to do this when you specify it during the player instantiation passing the <code>parentId</code> param.</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">element</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>a given element.</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_configure" class="method item">
<h3 class="name"><code>configure</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>options</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>
Defined in
<a href="../files/src_components_player.js.html#l432"><code>src/components/player.js:432</code></a>
</p>
</div>
<div class="description">
<p>enables to configure a player after its creation</p>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">options</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>all the options to change in form of a javascript object</p>
</div>
</li>
</ul>
</div>
</div>
<div id="method_constructor" class="method item">
<h3 class="name"><code>constructor</code></h3>
<div class="args">
<span class="paren">(</span><ul class="args-list inline commas">
<li class="arg">
<code>options</code>
</li>
</ul><span class="paren">)</span>
</div>
<div class="meta">
<p>Inherited from
<a href="../classes/BaseObject.html#method_constructor">
BaseObject
</a>
but overwritten in
<a href="../files/src_components_player.js.html#l96"><code>src/components/player.js:96</code></a>
</p>
</div>
<div class="description">
<h2>Player's constructor</h2>
<p>You might pass the options object to build the player.</p>
<pre class="code prettyprint"><code class="language-javascript">var options = {source: "http://example.com/video.mp4", param1: "val1"};
var player = new Clappr.Player(options);
</code></pre>
</div>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">options</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<div class="param-description">
<p>Data
options to build a player instance</p>
</div>
<ul class="params-list">
<li class="param">
<code class="param-name optional">[width]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>player's width <strong>default</strong>: <code>640</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[height]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>player's height <strong>default</strong>: <code>360</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[parentId]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>the id of the element on the page that the player should be inserted into</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[parent]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>a reference to a dom element that the player should be inserted into</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[source]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>The media source URL, or {source: <<source URL>>, mimeType: <<source mime type>>}</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[sources]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>An array of media source URL's, or an array of {source: <<source URL>>, mimeType: <<source mime type>>}</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[autoPlay]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>automatically play after page load <strong>default</strong>: <code>false</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[loop]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>automatically replay after it ends <strong>default</strong>: <code>false</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[chromeless]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>player acts in chromeless mode <strong>default</strong>: <code>false</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[allowUserInteraction]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>whether or not the player should handle click events when in chromeless mode <strong>default</strong>: <code>false</code> on desktops browsers, <code>true</code> on mobile.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[disableKeyboardShortcuts]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>disable keyboard shortcuts. <strong>default</strong>: <code>false</code>. <code>true</code> if <code>allowUserInteraction</code> is <code>false</code>.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[muted]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>start the video muted <strong>default</strong>: <code>false</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[mimeType]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>add <code>mimeType: "application/vnd.apple.mpegurl"</code> if you need to use a url without extension.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[actualLiveTime]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>show duration and seek time relative to actual time.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[actualLiveServerTime]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>specify server time as a string, format: "2015/11/26 06:01:03". This option is meant to be used with actualLiveTime.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[persistConfig]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>persist player's settings (volume) through the same domain <strong>default</strong>: <code>true</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[preload]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>video will be preloaded according to <code>preload</code> attribute options <strong>default</strong>: <code>'metadata'</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[maxBufferLength]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number" class="crosslink external" target="_blank">Number</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>the default behavior for the <strong>HLS playback</strong> 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 <code>maxBufferLength</code> where <strong>value is in seconds</strong>.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[gaAccount]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>enable Google Analytics events dispatch <strong>(play/pause/stop/buffering/etc)</strong> by adding your <code>gaAccount</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[gaTrackerName]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>besides <code>gaAccount</code> you can optionally, pass your favorite trackerName as <code>gaTrackerName</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[mediacontrol]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object" class="crosslink external" target="_blank">Object</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>customize control bar colors, example: <code>mediacontrol: {seekbar: "#E113D3", buttons: "#66B2FF"}</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[hideMediaControl]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>control media control auto hide <strong>default</strong>: <code>true</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[hideVolumeBar]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>when embedded with width less than 320, volume bar will hide. You can force this behavior for all sizes by adding <code>true</code> <strong>default</strong>: <code>false</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[watermark]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>put <code>watermark: 'http://url/img.png'</code> on your embed parameters to automatically add watermark on your video. You can customize corner position by defining position parameter. Positions can be <code>bottom-left</code>, <code>bottom-right</code>, <code>top-left</code> and <code>top-right</code>.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[watermarkLink]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p><code>watermarkLink: 'http://example.net/'</code> - define URL to open when the watermark is clicked. If not provided watermark will not be clickable.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[disableVideoTagContextMenu]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>disables the context menu (right click) on the video element if a HTML5Video playback is used.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[autoSeekFromUrl]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Automatically seek to the seconds provided in the url (e.g <a href="http://example.com?t=100">example.com?t=100</a>) <strong>default</strong>: <code>true</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[exitFullscreenOnEnd]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean" class="crosslink external" target="_blank">Boolean</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>Automatically exit full screen when the media finishes. <strong>default</strong>: <code>true</code></p>
</div>
</li>
<li class="param">
<code class="param-name optional">[poster]</code>
<span class="type"><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String" class="crosslink external" target="_blank">String</a></span>
<span class="flag optional" title="This parameter is optional.">optional</span>
<div class="param-description">
<p>define a poster by adding its address <code>poster: 'http://url/img.png'</code>. It will appear after video embed, disappear on play and go back when user stops the video.</p>
</div>
</li>
<li class="param">
<code class="param-name optional">[playbackNotSupportedMessage]</code>