@oat-sa/tao-core-ui 1.5.4 → 1.6.3

package/dist/mediaplayer.js

@@ -1,4 +1,4 @@
-define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/mimetype', 'core/store', 'handlebars', 'i18n', 'lib/dompurify/purify', 'css!ui/mediaplayer/css/player.css', 'nouislider'], function ($$1, _, async, UrlParser, eventifier, mimetype, store, Handlebars, __, DOMPurify, player_css, nouislider) { 'use strict';
+define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/mimetype', 'core/store', 'ui/mediaplayer/support', 'ui/mediaplayer/players', 'handlebars', 'i18n', 'lib/dompurify/purify', 'css!ui/mediaplayer/css/player.css', 'nouislider'], function ($$1, _, async, UrlParser, eventifier, mimetype, store, support, players, Handlebars, __, DOMPurify, player_css, nouislider) { 'use strict';
 
   $$1 = $$1 && $$1.hasOwnProperty('default') ? $$1['default'] : $$1;
   _ = _ && _.hasOwnProperty('default') ? _['default'] : _;
@@ -7,6 +7,8 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
   eventifier = eventifier && eventifier.hasOwnProperty('default') ? eventifier['default'] : eventifier;
   mimetype = mimetype && mimetype.hasOwnProperty('default') ? mimetype['default'] : mimetype;
   store = store && store.hasOwnProperty('default') ? store['default'] : store;
+  support = support && support.hasOwnProperty('default') ? support['default'] : support;
+  players = players && players.hasOwnProperty('default') ? players['default'] : players;
   Handlebars = Handlebars && Handlebars.hasOwnProperty('default') ? Handlebars['default'] : Handlebars;
   __ = __ && __.hasOwnProperty('default') ? __['default'] : __;
   DOMPurify = DOMPurify && DOMPurify.hasOwnProperty('default') ? DOMPurify['default'] : DOMPurify;
@@ -125,146 +127,36 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
   var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
     this.compilerInfo = [4,'>= 1.0.0'];
   helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
-    var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;
-
-  function program1(depth0,data) {
-    
-    var buffer = "", stack1;
-    buffer += "\n        ";
-    stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.is)),stack1 == null || stack1 === false ? stack1 : stack1.youtube), {hash:{},inverse:self.program(5, program5, data),fn:self.program(2, program2, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\n    ";
-    return buffer;
-    }
-  function program2(depth0,data) {
-    
-    var buffer = "", stack1;
-    buffer += "\n            ";
-    stack1 = helpers.each.call(depth0, (depth0 && depth0.sources), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\n        ";
-    return buffer;
-    }
-  function program3(depth0,data) {
-    
-    var buffer = "", stack1, helper;
-    buffer += "\n        <div class=\"media video youtube\" data-video-src=\"";
-    if (helper = helpers.src) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.src); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\" data-video-id=\"";
-    if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\" data-type=\"youtube\"></div>\n            ";
-    return buffer;
-    }
-
-  function program5(depth0,data) {
-    
-    var buffer = "", stack1, helper, options;
-    buffer += "\n        <video class=\"media video\" poster=\"";
-    if (helper = helpers.poster) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.poster); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\" controls ";
-    stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.is)),stack1 == null || stack1 === false ? stack1 : stack1.cors), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += ">\n            ";
-    stack1 = helpers.each.call(depth0, (depth0 && depth0.sources), {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\n\n            "
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Your browser doesn’t support the video player.", options) : helperMissing.call(depth0, "__", "Your browser doesn’t support the video player.", options)))
-      + "\n            ";
-    stack1 = helpers['if'].call(depth0, (depth0 && depth0.link), {hash:{},inverse:self.noop,fn:self.program(10, program10, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\n        </video>\n        ";
-    return buffer;
-    }
-  function program6(depth0,data) {
-    
-    
-    return "crossorigin";
-    }
-
-  function program8(depth0,data) {
-    
-    var buffer = "", stack1, helper;
-    buffer += "\n            <source src=\"";
-    if (helper = helpers.src) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.src); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\" type=\"";
-    if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\">\n            ";
-    return buffer;
-    }
-
-  function program10(depth0,data) {
-    
-    var buffer = "", stack1, helper, options;
-    buffer += "\n            <a href=\"";
-    if (helper = helpers.link) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.link); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\">"
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Please download the video and view offline.", options) : helperMissing.call(depth0, "__", "Please download the video and view offline.", options)))
-      + "</a>\n            ";
-    return buffer;
-    }
+    var buffer = "", stack1, helper, options, functionType="function", escapeExpression=this.escapeExpression, helperMissing=helpers.helperMissing;
 
-  function program12(depth0,data) {
-    
-    var buffer = "", stack1, helper, options;
-    buffer += "\n        <audio class=\"media audio\" controls ";
-    stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.is)),stack1 == null || stack1 === false ? stack1 : stack1.cors), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += ">\n            ";
-    stack1 = helpers.each.call(depth0, (depth0 && depth0.sources), {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\n\n            "
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Your browser doesn’t support the audio player.", options) : helperMissing.call(depth0, "__", "Your browser doesn’t support the audio player.", options)))
-      + "\n            ";
-    stack1 = helpers['if'].call(depth0, (depth0 && depth0.link), {hash:{},inverse:self.noop,fn:self.program(13, program13, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\n        </audio>\n    ";
-    return buffer;
-    }
-  function program13(depth0,data) {
-    
-    var buffer = "", stack1, helper, options;
-    buffer += "\n            <a href=\"";
-    if (helper = helpers.link) { stack1 = helper.call(depth0, {hash:{},data:data}); }
-    else { helper = (depth0 && depth0.link); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
-    buffer += escapeExpression(stack1)
-      + "\">"
-      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Please download the track and listen offline.", options) : helperMissing.call(depth0, "__", "Please download the track and listen offline.", options)))
-      + "</a>\n            ";
-    return buffer;
-    }
 
     buffer += "<div class=\"mediaplayer ";
     if (helper = helpers.type) { stack1 = helper.call(depth0, {hash:{},data:data}); }
     else { helper = (depth0 && depth0.type); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
     buffer += escapeExpression(stack1)
-      + "\">\n    <div class=\"player\">\n    ";
-    stack1 = helpers['if'].call(depth0, ((stack1 = (depth0 && depth0.is)),stack1 == null || stack1 === false ? stack1 : stack1.video), {hash:{},inverse:self.program(12, program12, data),fn:self.program(1, program1, data),data:data});
-    if(stack1 || stack1 === 0) { buffer += stack1; }
-    buffer += "\n        <div class=\"overlay\">\n            <a class=\"action play\" data-control=\"play\"><span class=\"icon icon-play\" title=\""
+      + "\">\n    <div class=\"player\">\n        <div class=\"player-overlay\">\n            <a class=\"action play\" data-control=\"play\"><span class=\"icon icon-play\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
       + "\"></span></a>\n            <a class=\"action play\" data-control=\"pause\"><span class=\"icon icon-pause\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Pause", options) : helperMissing.call(depth0, "__", "Pause", options)))
-      + "\"></span></a>\n        </div>\n    </div>\n    <div class=\"controls\">\n        <div class=\"bar\">\n            <div class=\"control actions playback\">\n                <a class=\"action play\" data-control=\"play\" title=\""
+      + "\"></span></a>\n            <a class=\"action reload\" data-control=\"start\">\n                <span class=\"icon icon-play\" title=\""
+      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Start", options) : helperMissing.call(depth0, "__", "Start", options)))
+      + "\"></span>\n                <div class=\"message\">"
+      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to start", options) : helperMissing.call(depth0, "__", "Click to start", options)))
+      + "</div>\n            </a>\n            <a class=\"action reload\" data-control=\"reload\">\n                <div class=\"icon icon-reload\" title=\""
+      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Reload", options) : helperMissing.call(depth0, "__", "Reload", options)))
+      + "\"></div>\n                <div class=\"message\">"
+      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "You are encountering a prolonged connectivity loss.", options) : helperMissing.call(depth0, "__", "You are encountering a prolonged connectivity loss.", options)))
+      + " "
+      + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Click to reload.", options) : helperMissing.call(depth0, "__", "Click to reload.", options)))
+      + "</div>\n            </a>\n        </div>\n    </div>\n    <div class=\"controls\">\n        <div class=\"bar\">\n            <div class=\"control actions playback\">\n                <a class=\"action play\" data-control=\"play\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Play", options) : helperMissing.call(depth0, "__", "Play", options)))
       + "\"><span class=\"icon icon-play\"></span></a>\n                <a class=\"action play\" data-control=\"pause\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Pause", options) : helperMissing.call(depth0, "__", "Pause", options)))
       + "\"><span class=\"icon icon-pause\"></span></a>\n            </div>\n            <div class=\"control seek\"><div class=\"slider\"></div></div>\n            <div class=\"control infos timer\">\n                <span class=\"info time\" data-control=\"time-cur\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Current playback position", options) : helperMissing.call(depth0, "__", "Current playback position", options)))
-      + "\">00:00</span>\n                <span class=\"info time\" data-control=\"time-end\" title=\""
+      + "\">--:--</span>\n                <span class=\"info time\" data-control=\"time-end\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Total duration", options) : helperMissing.call(depth0, "__", "Total duration", options)))
-      + "\">00:00</span>\n            </div>\n            <div class=\"control actions sound\">\n                <div class=\"volume\"><div class=\"slider\"></div></div>\n                <a class=\"action mute\" data-control=\"mute\" title=\""
+      + "\">--:--</span>\n            </div>\n            <div class=\"control actions sound\">\n                <div class=\"volume\"><div class=\"slider\"></div></div>\n                <a class=\"action mute\" data-control=\"mute\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Mute", options) : helperMissing.call(depth0, "__", "Mute", options)))
       + "\"><span class=\"icon icon-sound\"></span></a>\n                <a class=\"action mute\" data-control=\"unmute\" title=\""
       + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Restore sound", options) : helperMissing.call(depth0, "__", "Restore sound", options)))
@@ -293,151 +185,88 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
    * along with this program; if not, write to the Free Software
    * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
    *
-   * Copyright (c) 2015 (original work) Open Assessment Technologies SA ;
+   * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
    */
   /**
    * CSS namespace
    * @type {String}
-   * @private
-   */
-
-  var _ns = '.mediaplayer';
-  /**
-   * A Regex to extract ID from Youtube URLs
-   * @type {RegExp}
-   * @private
    */
 
-  var _reYoutube = /([?&\/]v[=\/])([\w-]+)([&\/]?)/;
-  /**
-   * A Regex to detect Apple mobile browsers
-   * @type {RegExp}
-   * @private
-   */
-
-  var _reAppleMobiles = /ip(hone|od)/i;
-  /**
-   * Array slice method needed to slice arguments
-   * @type {Function}
-   * @private
-   */
-
-  var _slice = [].slice;
+  var ns = '.mediaplayer';
   /**
    * Minimum value of the volume
    * @type {Number}
-   * @private
    */
 
-  var _volumeMin = 0;
+  var volumeMin = 0;
   /**
    * Maximum value of the volume
    * @type {Number}
-   * @private
-   */
-
-  var _volumeMax = 100;
-  /**
-   * Range value of the volume
-   * @type {Number}
-   * @private
    */
 
-  var _volumeRange = _volumeMax - _volumeMin;
+  var volumeMax = 100;
   /**
-   * Threshold (minium requires space above the player) to display the volume
+   * Threshold (minimum required space above the player) to display the volume
    * above the bar.
    * @type {Number}
    */
 
-
   var volumePositionThreshold = 200;
   /**
    * Some default values
    * @type {Object}
-   * @private
    */
 
-  var _defaults = {
+  var defaults = {
     type: 'video/mp4',
     video: {
-      width: 480,
-      height: 270,
-      minWidth: 200,
-      minHeight: 200
+      width: '100%',
+      height: 'auto'
     },
     audio: {
-      width: 400,
-      height: 30,
-      minWidth: 200,
-      minHeight: 36
+      width: '100%',
+      height: 'auto'
+    },
+    youtube: {
+      width: 640,
+      height: 360
     },
     options: {
-      volume: Math.floor(_volumeRange * 0.8),
+      volume: 80,
       startMuted: false,
       maxPlays: 0,
       replayTimeout: 0,
       canPause: true,
       canSeek: true,
       loop: false,
-      autoStart: false
+      autoStart: false,
+      preview: true,
+      debug: false
     }
   };
-  /**
-   * A list of MIME types with codec declaration
-   * @type {Object}
-   * @private
-   */
-
-  var _mimeTypes = {
-    // video
-    'video/webm': 'video/webm; codecs="vp8, vorbis"',
-    'video/mp4': 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
-    'video/ogg': 'video/ogg; codecs="theora, vorbis"',
-    // audio
-    'audio/mpeg': 'audio/mpeg;',
-    'audio/mp4': 'audio/mp4; codecs="mp4a.40.5"',
-    'audio/ogg': 'audio/ogg; codecs="vorbis"',
-    'audio/wav': 'audio/wav; codecs="1"'
-  };
-  /**
-   * Extracts the ID of a Youtube video from an URL
-   * @param {String} url
-   * @returns {String}
-   * @private
-   */
-
-  var _extractYoutubeId = function _extractYoutubeId(url) {
-    var res = _reYoutube.exec(url);
-
-    return res && res[2] || url;
-  };
   /**
    * Ensures a value is a number
    * @param {Number|String} value
    * @returns {Number}
-   * @private
    */
 
-
-  var _ensureNumber = function _ensureNumber(value) {
-    value = parseFloat(value);
-    return isFinite(value) ? value : 0;
+  var ensureNumber = function ensureNumber(value) {
+    var floatValue = parseFloat(value);
+    return isFinite(floatValue) ? floatValue : 0;
   };
   /**
    * Format a number to string with leading zeros
    * @param {Number} n
    * @param {Number} len
    * @returns {String}
-   * @private
    */
 
 
-  var _leadingZero = function _leadingZero(n, len) {
+  var leadingZero = function leadingZero(n, len) {
     var value = n.toString();
 
     while (value.length < len) {
-      value = '0' + value;
+      value = "0".concat(value);
     }
 
     return value;
@@ -446,11 +275,10 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
    * Formats a time value to string
    * @param {Number} time
    * @returns {String}
-   * @private
    */
 
 
-  var _timerFormat = function _timerFormat(time) {
+  var timerFormat = function timerFormat(time) {
     var seconds = Math.floor(time % 60);
     var minutes = Math.floor(time / 60) % 60;
     var hours = Math.floor(time / 3600);
@@ -460,30 +288,28 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
       parts.push(hours);
     }
 
-    parts.push(_leadingZero(minutes, 2));
-    parts.push(_leadingZero(seconds, 2));
+    parts.push(leadingZero(minutes, 2));
+    parts.push(leadingZero(seconds, 2));
     return parts.join(':');
   };
   /**
    * Checks if a type needs to be adjusted
    * @param {String} type
    * @returns {Boolean}
-   * @private
    */
 
 
-  var _needTypeAdjust = function _needTypeAdjust(type) {
+  var needTypeAdjust = function needTypeAdjust(type) {
     return 'string' === typeof type && type.indexOf('application') === 0;
   };
   /**
    * Adjust bad type by apllying heuristic on URI
    * @param {Object|String} source
    * @returns {String}
-   * @private
    */
 
 
-  var _getAdjustedType = function _getAdjustedType(source) {
+  var getAdjustedType = function getAdjustedType(source) {
     var type = 'video/ogg';
     var url = source && source.src || source;
     var ext = url && url.substr(-4);
@@ -498,11 +324,10 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
    * Extract a list of media sources from a config object
    * @param {Object} config
    * @returns {Array}
-   * @private
    */
 
 
-  var _configToSources = function _configToSources(config) {
+  var configToSources = function configToSources(config) {
     var sources = config.sources || [];
     var url = config.url;
 
@@ -522,1973 +347,1495 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
   };
   /**
    * Checks if the browser can play media
-   * @param {HTMLMediaElement} media The media element on which check support
-   * @param {String} [mimeType] An optional MIME type to precise the support
+   * @param {String} sizeProps Width or Height
    * @returns {Boolean}
-   * @private
    */
 
 
-  var _checkSupport = function _checkSupport(media, mimeType) {
-    var support = !!media.canPlayType;
-
-    if (mimeType && support) {
-      support = !!media.canPlayType(_mimeTypes[mimeType] || mimeType).replace(/no/, '');
-    }
-
-    return support;
+  var isResponsiveSize = function isResponsiveSize(sizeProps) {
+    return /%/.test(sizeProps) || sizeProps === 'auto';
   };
   /**
-   * Support dection
-   * @type {Object}
-   * @private
+   * Builds a media player instance
+   * @param {Object} config
+   * @param {String} config.type - The type of media to play, say `audio`, `video`, or `youtube`. The default is `video`.
+   * It might also contain the MIME type of the media as a shorthand.
+   * @param {String|Array} [config.url] - The URL to the media. If several media are proposed as alternatives,
+   * please look at the `sources` option instead.
+   * @param {String} [config.mimeType] - The MIME type of the media. If omitted, the player will try to extract it
+   * from the `type` property, otherwise it will request the server to get the content-type.
+   * @param {Array} [config.sources] - A list of URL if several media can be proposed. Each entry may be either a
+   * string (single URL), or an object containing both the URL and the MIME type ({src: string, type: string}).
+   * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
+   * @param {Boolean} [config.canSeek] - The player allows to reach an arbitrary position within the media using the duration bar
+   * @param {Boolean} [config.loop] - The media will be played continuously
+   * @param {Boolean} [config.canPause] - The player can be paused
+   * @param {Boolean} [config.startMuted] - The player should be initially muted
+   * @param {Boolean} [config.autoStart] - The player starts as soon as it is displayed
+   * @param {Number} [config.autoStartAt] - The time position at which the player should start
+   * @param {Number} [config.maxPlays] - Sets a few number of plays (default: infinite)
+   * @param {Number} [config.replayTimeout] - disable the possibility to replay a media after this timeout, in seconds (default: 0)
+   * @param {Number} [config.volume] - Sets the sound volume (default: 80)
+   * @param {Number} [config.width] - Sets the width of the player (default: depends on media type)
+   * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
+   * @param {Boolean} [config.preview] - Enables the media preview (load media metadata)
+   * @param {Boolean} [config.debug] - Enables the debug mode
+   * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
+   * @event render - Event triggered when the player is rendering
+   * @event error - Event triggered when the player throws an unrecoverable error
+   * @event ready - Event triggered when the player is fully ready
+   * @event play - Event triggered when the playback is starting
+   * @event update - Event triggered while the player is playing
+   * @event pause - Event triggered when the playback is paused
+   * @event ended - Event triggered when the playback is ended
+   * @event limitreached - Event triggered when the play limit has been reached
+   * @event destroy - Event triggered when the player is destroying
+   * @returns {mediaplayer}
    */
 
 
-  var _support = {
+  function mediaplayerFactory(config) {
     /**
-     * Checks if the browser can play video and audio
-     * @param {String} [type] The type of media (audio or video)
-     * @param {String} [mime] A media MIME type to check
-     * @returns {Boolean}
+     * Defines a media player object
+     * @type {Object}
      */
-    canPlay: function canPlay(type, mime) {
-      if (type) {
-        switch (type.toLowerCase()) {
-          case 'audio':
-            return this.canPlayAudio(mime);
-
-          case 'youtube':
-          case 'video':
-            return this.canPlayVideo(mime);
-
-          default:
-            return false;
-        }
-      }
+    var mediaplayer = {
+      /**
+       * Initializes the media player
+       * @param {Object} config
+       * @returns {mediaplayer}
+       */
+      init: function init(config) {
+        var _this = this;
 
-      return this.canPlayAudio() && this.canPlayVideo();
-    },
+        // load the config set, discard null values in order to allow defaults to be set
+        this.config = _.omit(config || {}, function (value) {
+          return typeof value === 'undefined' || value === null;
+        });
 
-    /**
-     * Checks if the browser can play audio
-     * @param {String} [mime] A media MIME type to check
-     * @returns {Boolean}
-     */
-    canPlayAudio: function canPlayAudio(mime) {
-      if (!this._mediaAudio) {
-        this._mediaAudio = document.createElement('audio');
-      }
+        _.defaults(this.config, defaults.options);
 
-      return _checkSupport(this._mediaAudio, mime);
-    },
+        if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
+          this.config.mimeType = this.config.type;
+        }
 
-    /**
-     * Checks if the browser can play video
-     * @param {String} [mime] A media MIME type to check
-     * @returns {Boolean}
-     */
-    canPlayVideo: function canPlayVideo(mime) {
-      if (!this._mediaVideo) {
-        this._mediaVideo = document.createElement('video');
-      }
+        this._setType(this.config.type || defaults.type);
 
-      return _checkSupport(this._mediaVideo, mime);
-    },
+        this._reset();
 
-    /**
-     * Checks if the browser allows to control the media playback
-     * @returns {Boolean}
-     */
-    canControl: function canControl() {
-      return !_reAppleMobiles.test(navigator.userAgent);
-    }
-  };
-  /**
-   * A local manager for Youtube players.
-   * Relies on https://developers.google.com/youtube/iframe_api_reference
-   * @type {Object}
-   * @private
-   */
+        this._updateVolumeFromStore();
 
-  var _youtubeManager = {
-    /**
-     * The Youtube API injection state
-     * @type {Boolean}
-     */
-    injected: false,
+        this._initEvents();
 
-    /**
-     * The Youtube API ready state
-     * @type {Boolean}
-     */
-    ready: false,
+        this._initSources(function () {
+          if (!_this.is('youtube')) {
+            _.forEach(_this.config.sources, function (source) {
+              if (source && source.type && source.type.indexOf('audio') === 0) {
+                _this._setType(source.type);
 
-    /**
-     * A list of pending players
-     * @type {Array}
-     */
-    pending: [],
+                _this._initType();
 
-    /**
-     * Add a Youtube player
-     * @param {String|jQuery|HTMLElement} elem
-     * @param {Object} player
-     * @param {Object} [options]
-     * @param {Boolean} [options.controls]
-     */
-    add: function add(elem, player, options) {
-      if (this.ready) {
-        this.create(elem, player, options);
-      } else {
-        this.pending.push([elem, player, options]);
+                return false;
+              }
+            });
+          }
 
-        if (!this.injected) {
-          this.injectApi();
-        }
-      }
-    },
+          if (_this.config.renderTo) {
+            _.defer(function () {
+              return _this.render();
+            });
+          }
+        });
 
-    /**
-     * Removes a pending Youtube player
-     * @param {String|jQuery|HTMLElement} elem
-     * @param {Object} player
-     */
-    remove: function remove(elem, player) {
-      var pending = this.pending;
+        return this;
+      },
+
+      /**
+       * Uninstalls the media player
+       * @returns {mediaplayer}
+       */
+      destroy: function destroy() {
+        /**
+         * Triggers a destroy event
+         * @event mediaplayer#destroy
+         */
+        this.trigger('destroy');
 
-      _.forEach(pending, function (args, idx) {
-        if (args && elem === args[0] && player === args[1]) {
-          pending[idx] = null;
+        if (this.player) {
+          this.player.destroy();
         }
-      });
-    },
 
-    /**
-     * Install a Youtube player. The Youtube API must be ready
-     * @param {String|jQuery|HTMLElement} elem
-     * @param {Object} player
-     * @param {Object} [options]
-     * @param {Boolean} [options.controls]
-     */
-    create: function create(elem, player, options) {
-      var $elem;
+        if (this.$component) {
+          this._unbindEvents();
 
-      if (!this.ready) {
-        return this.add(elem, player, options);
-      }
+          this._destroySlider(this.$seekSlider);
 
-      if (!options) {
-        options = {};
-      }
+          this._destroySlider(this.$volumeSlider);
 
-      $elem = $$1(elem);
-      new window.YT.Player($elem.get(0), {
-        height: $elem.width(),
-        width: $elem.height(),
-        videoId: $elem.data('videoId'),
-        playerVars: {
-          //hd: true,
-          autoplay: 0,
-          controls: options.controls ? 1 : 0,
-          rel: 0,
-          showinfo: 0,
-          wmode: 'transparent',
-          modestbranding: 1,
-          disablekb: 1,
-          playsinline: 1,
-          enablejsapi: 1,
-          origin: location.hostname
-        },
-        events: {
-          onReady: player.onReady.bind(player),
-          onStateChange: player.onStateChange.bind(player)
+          this.$component.remove();
         }
-      });
-    },
 
-    /**
-     * Called when the Youtube API is ready. Should install all pending players.
-     */
-    apiReady: function apiReady() {
-      var self = this;
-      var pending = this.pending;
-      this.pending = [];
-      this.ready = true;
-
-      _.forEach(pending, function (args) {
-        if (args) {
-          self.create.apply(self, args);
+        this._reset();
+
+        return this;
+      },
+
+      /**
+       * Renders the media player according to the media type
+       * @param {String|jQuery|HTMLElement} [to]
+       * @returns {mediaplayer}
+       */
+      render: function render(to) {
+        var renderTo = to || this.config.renderTo || this.$container;
+
+        if (this.$component) {
+          this.destroy();
         }
-      });
-    },
 
-    /**
-     * Checks if the Youtube API is ready to use
-     * @returns {Boolean}
-     */
-    isApiReady: function isApiReady() {
-      var apiReady = typeof window.YT !== 'undefined' && typeof window.YT.Player !== 'undefined';
+        this._initState();
 
-      if (apiReady && !this.ready) {
-        _youtubeManager.apiReady();
-      }
+        this._buildDom();
 
-      return apiReady;
-    },
+        if (this.config.preview) {
+          this._updateDuration(0);
 
-    /**
-     * Injects the Youtube API into the page
-     */
-    injectApi: function injectApi() {
-      var self = this;
-
-      if (!self.isApiReady()) {
-        window.require(['https://www.youtube.com/iframe_api'], function () {
-          var check = function check() {
-            if (!self.isApiReady()) {
-              setTimeout(check, 100);
-            }
-          };
+          this._updatePosition(0);
+        }
 
-          check();
-        });
-      }
+        this._bindEvents();
 
-      this.injected = true;
-    }
-  };
-  /**
-   * Defines a player object dedicated to youtube media
-   * @param {mediaplayer} mediaplayer
-   * @private
-   */
+        this._playingState(false, true);
 
-  var _youtubePlayer = function _youtubePlayer(mediaplayer) {
-    var $media;
-    var media;
-    var player;
-    var interval;
-    var destroyed;
-    var initWidth, initHeight;
+        this._initPlayer();
 
-    function loopEvents(callback) {
-      _.forEach(['onStateChange', 'onPlaybackQualityChange', 'onPlaybackRateChange', 'onError', 'onApiChange'], callback);
-    }
+        this._initSize(); // Resize for old items with defined height to avoid big jump
 
-    if (mediaplayer) {
-      player = {
-        init: function _youtubePlayerInit() {
-          $media = mediaplayer.$media;
-          media = null;
-          destroyed = false;
 
-          if ($media) {
-            _youtubeManager.add($media, this, {
-              controls: mediaplayer.is('nogui')
-            });
-          }
+        if (this.config.height && this.config.height !== 'auto') {
+          this.resize('100%', 'auto');
+        } else {
+          this.resize(this.config.width, this.config.height);
+        }
 
-          return !!$media;
-        },
-        onReady: function _youtubePlayerOnReady(event) {
-          var callbacks = this._callbacks;
-          media = event.target;
-          $media = $$1(media.getIframe());
-          this._callbacks = null;
+        this.config.is.rendered = true;
 
-          if (!destroyed) {
+        if (renderTo) {
+          this.$container = $$1(renderTo).append(this.$component);
+        } // add class if it is stalled
 
-            if (initWidth && initHeight) {
-              this.setSize(initWidth, initHeight);
-            }
 
-            mediaplayer._onReady();
+        if (this.is('stalled')) {
+          this._setState('stalled', true);
+        }
+        /**
+         * Triggers a render event
+         * @event mediaplayer#render
+         * @param {jQuery} $component
+         */
 
-            if (callbacks) {
-              _.forEach(callbacks, function (cb) {
-                cb();
-              });
-            }
-          } else {
-            this.destroy();
-          }
-        },
-        onStateChange: function _youtubePlayerOnStateChange(event) {
-          this.stopPolling();
 
-          if (!destroyed) {
-            switch (event.data) {
-              // ended
-              case 0:
-                mediaplayer._onEnd();
+        this.trigger('render', this.$component);
+        return this;
+      },
 
-                break;
-              // playing
+      /**
+       * Reloads media player after it was stalled
+       */
+      reload: function reload() {
+        /**
+         * Triggers a reload event
+         * @event mediaplayer#reload
+         */
+        this.trigger('reload');
 
-              case 1:
-                mediaplayer._onPlay();
+        if (this.player) {
+          this.player.recover();
+        }
 
-                this.startPolling();
-                break;
-              // paused
+        this._setState('stalled', false);
 
-              case 2:
-                mediaplayer._onPause();
+        this.setInitialStates();
+      },
 
-                break;
-            }
-          }
-        },
-        stopPolling: function _youtubePlayerStopPolling() {
-          if (interval) {
-            clearInterval(interval);
-            interval = null;
-          }
-        },
-        startPolling: function _youtubePlayerStartPolling() {
-          interval = setInterval(function () {
-            mediaplayer._onTimeUpdate();
-          }, mediaplayerFactory.youtubePolling);
-        },
-        destroy: function _youtubePlayerDestroy() {
-          destroyed = true;
-
-          if (media) {
-            loopEvents(function (ev) {
-              media.removeEventListener(ev);
-            });
-            media.destroy();
-          } else {
-            _youtubeManager.remove($media, this);
-          }
+      /**
+       * Set initial states
+       */
+      setInitialStates: function setInitialStates() {
+        if (!this.is('stalled')) {
+          this._setState('ready', true);
+        }
 
-          this.stopPolling();
-          $media = null;
-          media = null;
-        },
-        getPosition: function _youtubePlayerGetPosition() {
-          if (media) {
-            return media.getCurrentTime();
-          }
+        this._setState('canplay', true);
 
-          return 0;
-        },
-        getDuration: function _youtubePlayerGetDuration() {
-          if (media) {
-            return media.getDuration();
-          }
+        this._setState('canpause', this.config.canPause);
 
-          return 0;
-        },
-        getVolume: function _youtubePlayerGetVolume() {
-          var value = 0;
+        this._setState('canseek', this.config.canSeek);
 
-          if (media) {
-            value = media.getVolume() * _volumeRange / 100 + _volumeMin;
-          }
+        this._setState('loading', false);
+      },
 
-          return value;
-        },
-        setVolume: function _youtubePlayerSetVolume(value) {
-          if (media) {
-            media.setVolume((parseFloat(value) - _volumeMin) / _volumeRange * 100);
-          }
-        },
-        setSize: function _youtubePlayerSetSize(width, height) {
-          if ($media) {
-            $media.width(width).height(height);
-          }
+      /**
+       * Sets the start position inside the media
+       * @param {Number} time - The start position in seconds
+       * @param {*} [internal] - Internal use
+       * @returns {mediaplayer}
+       */
+      seek: function seek(time, internal) {
+        if (this._canPlay()) {
+          this._updatePosition(time, internal);
 
-          if (media) {
-            media.setSize(width, height);
-          } else {
-            initWidth = width;
-            initHeight = height;
-          }
-        },
-        seek: function _youtubePlayerSeek(value) {
-          if (media) {
-            media.seekTo(parseFloat(value), true);
-          }
-        },
-        play: function _youtubePlayerPlay() {
-          if (media) {
-            media.playVideo();
-          }
-        },
-        pause: function _youtubePlayerPause() {
-          if (media) {
-            media.pauseVideo();
-          }
-        },
-        stop: function _youtubePlayerStop() {
-          if (media) {
-            media.stopVideo();
+          this.execute('seek', this.position);
 
-            mediaplayer._onEnd();
-          }
-        },
-        mute: function _youtubePlayerMute(state) {
-          if (media) {
-            media[state ? 'mute' : 'unMute']();
-          }
-        },
-        isMuted: function _youtubePlayerIsMuted() {
-          if (media) {
-            return media.isMuted();
+          if (!this.is('ready')) {
+            this.autoStartAt = this.position;
           }
 
-          return false;
-        },
-        addMedia: function _youtubePlayerSetMedia(url) {
-          var id = _extractYoutubeId(url);
+          this.loop = !!this.config.loop;
+        }
 
-          var cb = id && function () {
-            media.cueVideoById(id);
-          };
+        return this;
+      },
 
-          if (cb) {
-            if (media) {
-              cb();
-            } else {
-              this._callbacks = this._callbacks || [];
+      /**
+       * Plays the media
+       * @param {Number} [time] - An optional start position in seconds
+       * @returns {mediaplayer}
+       */
+      play: function play(time) {
+        if (this._canPlay()) {
+          if (typeof time !== 'undefined') {
+            this.seek(time);
+          }
 
-              this._callbacks.push(cb);
-            }
+          this.execute('play');
 
-            return true;
+          if (!this.is('ready')) {
+            this.autoStart = true;
           }
 
-          return false;
-        },
-        setMedia: function _youtubePlayerSetMedia(url) {
-          var id = _extractYoutubeId(url);
+          this.loop = !!this.config.loop;
 
-          var cb = id && function () {
-            media.loadVideoById(id);
-          };
+          if (this.timerId) {
+            cancelAnimationFrame(this.timerId);
+          }
+        }
 
-          if (cb) {
-            if (media) {
-              cb();
-            } else {
-              this._callbacks = [cb];
-            }
+        return this;
+      },
 
-            return true;
+      /**
+       * Pauses the media
+       * @param {Number} [time] - An optional time position in seconds
+       * @returns {mediaplayer}
+       */
+      pause: function pause(time) {
+        if (this._canPause()) {
+          if (typeof time !== 'undefined') {
+            this.seek(time);
           }
 
-          return false;
+          this.execute('pause');
+
+          if (!this.is('ready')) {
+            this.autoStart = false;
+          }
         }
-      };
-    }
 
-    return player;
-  };
-  /**
-   * Defines a player object dedicated to native player
-   * @param {mediaplayer} mediaplayer
-   * @private
-   */
+        return this;
+      },
 
+      /**
+       * Resumes the media
+       * @returns {mediaplayer}
+       */
+      resume: function resume() {
+        if (this._canResume()) {
+          this.play();
+        }
 
-  var _nativePlayer = function _nativePlayer(mediaplayer) {
-    var $media;
-    var media;
-    var player;
-    var played;
+        return this;
+      },
 
-    if (mediaplayer) {
-      player = {
-        init: function _nativePlayerInit() {
-          var result = false;
-          var mediaElem;
-          $media = mediaplayer.$media;
-          media = null;
-          played = false;
+      /**
+       * Stops the playback
+       * @returns {mediaplayer}
+       */
+      stop: function stop() {
+        this.loop = false;
+        this.execute('stop');
 
-          if ($media) {
-            mediaElem = $media.get(0);
+        if (!this.is('ready')) {
+          this.autoStart = false;
+        }
 
-            if (mediaElem && mediaElem.canPlayType) {
-              media = mediaElem;
-              result = true;
-            }
+        return this;
+      },
 
-            if (!mediaplayer.is('nogui')) {
-              $media.removeAttr('controls');
-            }
+      /**
+       * Starts the media
+       * @returns {mediaplayer}
+       */
+      start: function start() {
+        this._setState('preview', true);
 
-            $media.on('play' + _ns, function () {
-              played = true;
-
-              mediaplayer._onPlay();
-            }).on('pause' + _ns, function () {
-              mediaplayer._onPause();
-            }).on('ended' + _ns, function () {
-              played = false;
-
-              mediaplayer._onEnd();
-            }).on('timeupdate' + _ns, function () {
-              mediaplayer._onTimeUpdate();
-            }).on('loadstart', function () {
-              if (media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE) {
-                mediaplayer._onError();
-              }
-            }).on('error' + _ns, function () {
-              if (media.networkState === HTMLMediaElement.NETWORK_NO_SOURCE) {
-                mediaplayer._onError();
-              } else {
-                mediaplayer._onRecoverError(); // recover from playing error
+        this._setState('loading', true);
 
+        this.play();
+      },
 
-                if (media.networkState === HTMLMediaElement.NETWORK_LOADING && mediaplayer.is('playing')) {
-                  mediaplayer.render();
-                }
-              }
-            }).on('loadedmetadata' + _ns, function () {
-              if (mediaplayer.is('error')) {
-                mediaplayer._onRecoverError();
-              }
+      /**
+       * Restarts the media from the beginning
+       * @returns {mediaplayer}
+       */
+      restart: function restart() {
+        this.play(0);
+        return this;
+      },
 
-              mediaplayer._onReady();
-            });
-          }
+      /**
+       * Rewind the media to the beginning
+       * @returns {mediaplayer}
+       */
+      rewind: function rewind() {
+        this.seek(0);
+        return this;
+      },
 
-          return result;
-        },
-        destroy: function _nativePlayerDestroy() {
-          if ($media) {
-            $media.off(_ns).attr('controls', '');
-          }
+      /**
+       * Mutes the media
+       * @param {Boolean} [state] - A flag to set the mute state (default: true)
+       * @returns {mediaplayer}
+       */
+      mute: function mute(state) {
+        if (typeof state === 'undefined') {
+          state = true;
+        }
 
-          this.stop();
-          $media = null;
-          media = null;
-          played = false;
-        },
-        getPosition: function _nativePlayerGetPosition() {
-          if (media) {
-            return media.currentTime;
-          }
+        this.execute('mute', state);
 
-          return 0;
-        },
-        getDuration: function _nativePlayerGetDuration() {
-          if (media) {
-            return media.duration;
-          }
+        this._setState('muted', state);
 
-          return 0;
-        },
-        getVolume: function _nativePlayerGetVolume() {
-          var value = 0;
+        if (!this.is('ready')) {
+          this.startMuted = state;
+        }
 
-          if (media) {
-            value = parseFloat(media.volume) * _volumeRange + _volumeMin;
-          }
+        return this;
+      },
 
-          return value;
-        },
-        setVolume: function _nativePlayerSetVolume(value) {
-          if (media) {
-            media.volume = (parseFloat(value) - _volumeMin) / _volumeRange;
-          }
-        },
-        setSize: function _nativePlayerSetSize(width, height) {
-          if ($media) {
-            $media.width(width).height(height);
-          }
-        },
-        seek: function _nativePlayerSeek(value) {
-          if (media) {
-            media.currentTime = parseFloat(value);
-
-            if (!played) {
-              this.play();
-            }
-          }
-        },
-        play: function _nativePlayerPlay() {
-          if (media) {
-            media.play();
-          }
-        },
-        pause: function _nativePlayerPause() {
-          if (media) {
-            media.pause();
-          }
-        },
-        stop: function _nativePlayerStop() {
-          if (media && played) {
-            media.currentTime = media.duration;
-          }
-        },
-        mute: function _nativePlayerMute(state) {
-          if (media) {
-            media.muted = !!state;
-          }
-        },
-        isMuted: function _nativePlayerIsMuted() {
-          if (media) {
-            return !!media.muted;
-          }
-
-          return false;
-        },
-        addMedia: function _nativePlayerSetMedia(url, type) {
-          type = type || _defaults.type;
-
-          if (media) {
-            if (!_checkSupport(media, type)) {
-              return false;
-            }
-          }
-
-          if (url && $media) {
-            $media.append('<source src="' + url + '" type="' + (_mimeTypes[type] || type) + '" />');
-            return true;
-          }
-
-          return false;
-        },
-        setMedia: function _nativePlayerSetMedia(url, type) {
-          if ($media) {
-            $media.empty();
-            return this.addMedia(url, type);
-          }
-
-          return false;
-        }
-      };
-    }
-
-    return player;
-  };
-  /**
-   * Defines the list of available players
-   * @type {Object}
-   * @private
-   */
-
-
-  var _players = {
-    audio: _nativePlayer,
-    video: _nativePlayer,
-    youtube: _youtubePlayer
-  };
-  /**
-   * Defines a media player object
-   * @type {Object}
-   */
-
-  var mediaplayer = {
-    /**
-     * Initializes the media player
-     * @param {Object} config
-     * @param {String} config.type - The type of media to play
-     * @param {String|Array} config.url - The URL to the media
-     * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
-     * @param {Boolean} [config.loop] - The media will be played continuously
-     * @param {Boolean} [config.canPause] - The play can be paused
-     * @param {Boolean} [config.canSeek] - The player allows to reach an arbitrary position within the media using the duration bar
-     * @param {Boolean} [config.startMuted] - The player should be initially muted
-     * @param {Boolean} [config.autoStart] - The player starts as soon as it is displayed
-     * @param {Number} [config.autoStartAt] - The time position at which the player should start
-     * @param {Number} [config.maxPlays] - Sets a few number of plays (default: infinite)
-     * @param {Number} [config.replayTimeout] - disable the possibility to replay a media after this timeout, in seconds (default: 0)
-     * @param {Number} [config.volume] - Sets the sound volume (default: 80)
-     * @param {Number} [config.width] - Sets the width of the player (default: depends on media type)
-     * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
-     * @returns {mediaplayer}
-     */
-    init: function init(config) {
-      var self = this; // load the config set, discard null values in order to allow defaults to be set
-
-      this.config = _.omit(config || {}, function (value) {
-        return typeof value === 'undefined' || value === null;
-      });
+      /**
+       * Restore the sound of the media after a mute
+       * @returns {mediaplayer}
+       */
+      unmute: function unmute() {
+        this.mute(false);
+        return this;
+      },
 
-      _.defaults(this.config, _defaults.options);
+      /**
+       * Sets the sound volume of the media being played
+       * @param {Number} value - A value between 0 and 100
+       * @param {*} [internal] - Internal use
+       * @returns {mediaplayer}
+       */
+      setVolume: function setVolume(value, internal) {
+        this._updateVolume(value, internal);
 
-      this._setType(this.config.type || _defaults.type);
+        this.execute('setVolume', this.volume);
+        return this;
+      },
 
-      this._reset();
+      /**
+       * Gets the sound volume applied to the media being played
+       * @returns {Number} Returns a value between 0 and 100
+       */
+      getVolume: function getVolume() {
+        return this.volume;
+      },
 
-      this._updateVolumeFromStore();
+      /**
+       * Gets the current displayed position inside the media
+       * @returns {Number}
+       */
+      getPosition: function getPosition() {
+        return this.position;
+      },
 
-      this._initEvents();
+      /**
+       * Gets the duration of the media
+       * @returns {Number}
+       */
+      getDuration: function getDuration() {
+        return this.duration;
+      },
 
-      this._initSources(function () {
-        if (!self.is('youtube')) {
-          _.each(self.config.sources, function (source) {
-            if (source && source.type && source.type.indexOf('audio') === 0) {
-              self._setType(source.type);
+      /**
+       * Gets the number of times the media has been played
+       * @returns {Number}
+       */
+      getTimesPlayed: function getTimesPlayed() {
+        return this.timesPlayed;
+      },
 
-              self._initType();
+      /**
+       * Gets the type of player
+       * @returns {String}
+       */
+      getType: function getType() {
+        return this.type;
+      },
 
-              return false;
-            }
-          });
-        }
+      /**
+       * Gets the DOM container
+       * @returns {jQuery}
+       */
+      getContainer: function getContainer() {
+        if (!this.$container && this.$component) {
+          var $container = this.$component.parent();
 
-        if (self.config.renderTo) {
-          _.defer(function () {
-            self.render();
-          });
+          if ($container.length) {
+            this.$container = $container;
+          }
         }
-      });
 
-      return this;
-    },
+        return this.$container;
+      },
 
-    /**
-     * Uninstalls the media player
-     * @returns {mediaplayer}
-     */
-    destroy: function destroy() {
       /**
-       * Triggers a destroy event
-       * @event mediaplayer#destroy
+       * Gets the underlying DOM element
+       * @returns {jQuery}
        */
-      this.trigger('destroy');
+      getElement: function getElement() {
+        return this.$component;
+      },
 
-      if (this.player) {
-        this.player.destroy();
-      }
+      /**
+       * Gets the list of media
+       * @returns {Array}
+       */
+      getSources: function getSources() {
+        return this.config.sources.slice();
+      },
 
-      if (this.$component) {
-        this._unbindEvents();
+      /**
+       * Sets the media source. If a source has been already set, it will be replaced.
+       * @param {String|Object} src - The media URL, or an object containing the source and the type
+       * @param {Function} [callback] - A function called to provide the added media source object
+       * @returns {mediaplayer}
+       */
+      setSource: function setSource(src, callback) {
+        var _this2 = this;
 
-        this._destroySlider(this.$seekSlider);
+        this._getSource(src, function (source) {
+          _this2.config.sources = [source];
 
-        this._destroySlider(this.$volumeSlider);
+          if (_this2.is('rendered')) {
+            _this2.player.setMedia(source.src, source.type);
+          }
 
-        this.$component.remove();
-      }
+          if (callback) {
+            callback.call(_this2, source);
+          }
+        });
 
-      this._reset();
+        return this;
+      },
 
-      return this;
-    },
+      /**
+       * Adds a media source.
+       * @param {String|Object} src - The media URL, or an object containing the source and the type
+       * @param {Function} [callback] - A function called to provide the added media source object
+       * @returns {mediaplayer}
+       */
+      addSource: function addSource(src, callback) {
+        var _this3 = this;
 
-    /**
-     * Renders the media player according to the media type
-     * @param {String|jQuery|HTMLElement} [to]
-     * @returns {mediaplayer}
-     */
-    render: function render(to) {
-      var renderTo = to || this.config.renderTo || this.$container;
+        this._getSource(src, function (source) {
+          _this3.config.sources.push(source);
 
-      if (this.$component) {
-        this.destroy();
-      }
+          if (_this3.is('rendered')) {
+            _this3.player.addMedia(source.src, source.type);
+          }
 
-      this._initState();
+          if (callback) {
+            callback.call(_this3, source);
+          }
+        });
 
-      this._buildDom();
+        return this;
+      },
 
-      this._updateDuration(0);
+      /**
+       * Tells if the media is in a particular state
+       * @param {String} state
+       * @returns {Boolean}
+       */
+      is: function is(state) {
+        return !!this.config.is[state];
+      },
 
-      this._updatePosition(0);
+      /**
+       * Changes the size of the player
+       * @param {Number} width
+       * @param {Number} height
+       * @returns {mediaplayer}
+       */
+      resize: function resize(width, height) {
+        if (isResponsiveSize(width) && !isResponsiveSize(height) || this.is('youtube')) {
+          // responsive width height should be auto
+          // for youtube iframe height is limited by ration
+          height = 'auto';
+        }
 
-      this._bindEvents();
+        this.execute('setSize', width, height);
+        return this;
+      },
 
-      this._playingState(false, true);
+      /**
+       * Enables the media player
+       * @returns {mediaplayer}
+       */
+      enable: function enable() {
+        this._fromState('disabled');
 
-      this._initPlayer();
+        return this;
+      },
 
-      this._initSize();
+      /**
+       * Disables the media player
+       * @returns {mediaplayer}
+       */
+      disable: function disable() {
+        this._toState('disabled');
 
-      this.resize(this.config.width, this.config.height);
-      this.config.is.rendered = true;
+        this.trigger('disabled');
+        return this;
+      },
 
-      if (renderTo) {
-        this.$container = $$1(renderTo).append(this.$component);
-      }
       /**
-       * Triggers a render event
-       * @event mediaplayer#render
-       * @param {jQuery} $component
+       * Shows the media player
+       * @returns {mediaplayer}
        */
+      show: function show() {
+        this._fromState('hidden');
 
+        return this;
+      },
 
-      this.trigger('render', this.$component);
-      return this;
-    },
-
-    /**
-     * Sets the start position inside the media
-     * @param {Number} time - The start position in seconds
-     * @param {*} [internal] - Internal use
-     * @returns {mediaplayer}
-     */
-    seek: function seek(time, internal) {
-      if (this._canPlay()) {
-        this._updatePosition(time, internal);
+      /**
+       * hides the media player
+       * @returns {mediaplayer}
+       */
+      hide: function hide() {
+        this._toState('hidden');
 
-        this.execute('seek', this.position);
+        return this;
+      },
 
-        if (!this.is('ready')) {
-          this.autoStartAt = this.position;
+      /**
+       * get media original size
+       * @returns {Object}
+       */
+      getMediaOriginalSize: function getMediaOriginalSize() {
+        if (this.is('youtube')) {
+          return defaults.youtube;
         }
 
-        this.loop = !!this.config.loop;
-      }
-
-      return this;
-    },
-
-    /**
-     * Plays the media
-     * @param {Number} [time] - An optional start position in seconds
-     * @returns {mediaplayer}
-     */
-    play: function play(time) {
-      if (this._canPlay()) {
-        if (typeof time !== 'undefined') {
-          this.seek(time);
+        if (this.is('video') && this.player) {
+          return this.player.getMediaSize();
         }
 
-        this.execute('play');
+        return {};
+      },
 
-        if (!this.is('ready')) {
-          this.autoStart = true;
+      /**
+       * Ensures the right media type is set
+       * @param {String} type
+       * @private
+       */
+      _setType: function _setType(type) {
+        if (type.indexOf('youtube') !== -1) {
+          this.type = 'youtube';
+        } else if (type.indexOf('audio') === 0) {
+          this.type = 'audio';
+        } else {
+          this.type = 'video';
         }
+      },
 
-        this.loop = !!this.config.loop;
+      /**
+       * Ensures the type is correctly applied
+       * @private
+       */
+      _initType: function _initType() {
+        var is = this.config.is;
+        is.youtube = 'youtube' === this.type;
+        is.video = 'video' === this.type || 'youtube' === this.type;
+        is.audio = 'audio' === this.type;
+      },
 
-        if (this.timerId) {
-          cancelAnimationFrame(this.timerId);
-        }
-      }
+      /**
+       * Gets a source descriptor.
+       * @param {String|Object} src - The media URL, or an object containing the source and the type
+       * @param {Function} callback - A function called to provide the media source object
+       */
+      _getSource: function _getSource(src, callback) {
+        var _this4 = this;
 
-      return this;
-    },
+        var source;
 
-    /**
-     * Pauses the media
-     * @param {Number} [time] - An optional time position in seconds
-     * @returns {mediaplayer}
-     */
-    pause: function pause(time) {
-      if (this._canPause()) {
-        if (typeof time !== 'undefined') {
-          this.seek(time);
-        }
+        var done = function done() {
+          if (needTypeAdjust(source.type)) {
+            source.type = getAdjustedType(source);
+          }
 
-        this.execute('pause');
+          callback.call(_this4, source);
+        };
 
-        if (!this.is('ready')) {
-          this.autoStart = false;
+        if (_.isString(src)) {
+          source = {
+            src: src
+          };
+        } else {
+          source = _.clone(src);
         }
-      }
-
-      return this;
-    },
-
-    /**
-     * Resumes the media
-     * @returns {mediaplayer}
-     */
-    resume: function resume() {
-      if (this._canResume()) {
-        this.play();
-      }
-
-      return this;
-    },
-
-    /**
-     * Stops the playback
-     * @returns {mediaplayer}
-     */
-    stop: function stop() {
-      this.loop = false;
-      this.execute('stop');
-
-      if (!this.is('ready')) {
-        this.autoStart = false;
-      }
-
-      return this;
-    },
-
-    /**
-     * Restarts the media from the beginning
-     * @returns {mediaplayer}
-     */
-    restart: function restart() {
-      this.play(0);
-      return this;
-    },
-
-    /**
-     * Rewind the media to the beginning
-     * @returns {mediaplayer}
-     */
-    rewind: function rewind() {
-      this.seek(0);
-      return this;
-    },
-
-    /**
-     * Mutes the media
-     * @param {Boolean} [state] - A flag to set the mute state (default: true)
-     * @returns {mediaplayer}
-     */
-    mute: function mute(state) {
-      if (typeof state === 'undefined') {
-        state = true;
-      }
-
-      this.execute('mute', state);
-
-      this._setState('muted', state);
-
-      if (!this.is('ready')) {
-        this.startMuted = state;
-      }
-
-      return this;
-    },
-
-    /**
-     * Restore the sound of the media after a mute
-     * @returns {mediaplayer}
-     */
-    unmute: function unmute() {
-      this.mute(false);
-      return this;
-    },
-
-    /**
-     * Sets the sound volume of the media being played
-     * @param {Number} value - A value between 0 and 100
-     * @param {*} [internal] - Internal use
-     * @returns {mediaplayer}
-     */
-    setVolume: function setVolume(value, internal) {
-      this._updateVolume(value, internal);
-
-      this.execute('setVolume', this.volume);
-      return this;
-    },
-
-    /**
-     * Gets the sound volume applied to the media being played
-     * @returns {Number} Returns a value between 0 and 100
-     */
-    getVolume: function getVolume() {
-      return this.volume;
-    },
-
-    /**
-     * Gets the current displayed position inside the media
-     * @returns {Number}
-     */
-    getPosition: function getPosition() {
-      return this.position;
-    },
-
-    /**
-     * Gets the duration of the media
-     * @returns {Number}
-     */
-    getDuration: function getDuration() {
-      return this.duration;
-    },
-
-    /**
-     * Gets the number of times the media has been played
-     * @returns {Number}
-     */
-    getTimesPlayed: function getTimesPlayed() {
-      return this.timesPlayed;
-    },
 
-    /**
-     * Gets the type of player
-     * @returns {String}
-     */
-    getType: function getType() {
-      return this.type;
-    },
-
-    /**
-     * Gets the DOM container
-     * @returns {jQuery}
-     */
-    getContainer: function getContainer() {
-      var $container;
-
-      if (!this.$container && this.$component) {
-        $container = this.$component.parent();
-
-        if ($container.length) {
-          this.$container = $container;
+        if (!source.type) {
+          if (this.is('youtube')) {
+            source.type = defaults.type;
+          } else if (this.config.mimeType) {
+            source.type = this.config.mimeType;
+          }
         }
-      }
-
-      return this.$container;
-    },
 
-    /**
-     * Gets the underlying DOM element
-     * @returns {jQuery}
-     */
-    getElement: function getElement() {
-      return this.$component;
-    },
-
-    /**
-     * Gets the list of media
-     * @returns {Array}
-     */
-    getSources: function getSources() {
-      return this.config.sources.slice();
-    },
-
-    /**
-     * Sets the media source. If a source has been already set, it will be replaced.
-     * @param {String|Object} src - The media URL, or an object containing the source and the type
-     * @param {Function} [callback] - A function called to provide the added media source object
-     * @returns {mediaplayer}
-     */
-    setSource: function setSource(src, callback) {
-      this._getSource(src, function (source) {
-        this.config.sources = [source];
-
-        if (this.is('rendered')) {
-          this.player.setMedia(source.src, source.type);
-        }
+        if (!source.type) {
+          mimetype.getResourceType(source.src, function (err, type) {
+            if (err) {
+              type = defaults.type;
+            }
 
-        if (callback) {
-          callback.call(this, source);
+            source.type = type;
+            done();
+          });
+        } else {
+          done();
         }
-      });
+      },
 
-      return this;
-    },
+      /**
+       * Ensures the sources are correctly set
+       * @param {Function} callback - A function called once all sources have been initialized
+       * @private
+       */
+      _initSources: function _initSources(callback) {
+        var _this5 = this;
+
+        var sources = configToSources(this.config);
+        this.config.sources = [];
+        async.each(sources, function (source, cb) {
+          _this5.addSource(source, function (src) {
+            return cb(null, src);
+          });
+        }, callback);
+      },
 
-    /**
-     * Adds a media source.
-     * @param {String|Object} src - The media URL, or an object containing the source and the type
-     * @param {Function} [callback] - A function called to provide the added media source object
-     * @returns {mediaplayer}
-     */
-    addSource: function addSource(src, callback) {
-      this._getSource(src, function (source) {
-        this.config.sources.push(source);
+      /**
+       * Installs the events manager onto the instance
+       * @private
+       */
+      _initEvents: function _initEvents() {
+        eventifier(this);
+        var triggerEvent = this.trigger;
 
-        if (this.is('rendered')) {
-          this.player.addMedia(source.src, source.type);
-        }
+        this.trigger = function trigger(eventName) {
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
 
-        if (callback) {
-          callback.call(this, source);
-        }
-      });
+          if (this.$component) {
+            var _this$$component;
 
-      return this;
-    },
+            (_this$$component = this.$component).trigger.apply(_this$$component, [eventName + ns].concat(args));
+          }
 
-    /**
-     * Tells if the media is in a particular state
-     * @param {String} state
-     * @returns {Boolean}
-     */
-    is: function is(state) {
-      return !!this.config.is[state];
-    },
+          return triggerEvent.call.apply(triggerEvent, [this, eventName].concat(args));
+        };
+      },
 
-    /**
-     * Changes the size of the player
-     * @param {Number} width
-     * @param {Number} height
-     * @returns {mediaplayer}
-     */
-    resize: function resize(width, height) {
-      var type = this.is('video') ? 'video' : 'audio';
-      var defaults = _defaults[type] || _defaults.video;
-      width = Math.max(defaults.minWidth, width);
-      height = Math.max(defaults.minHeight, height);
-      this.config.width = width;
-      this.config.height = height;
-
-      if (this.$component) {
-        height -= this.$component.outerHeight() - this.$component.height();
-        width -= this.$component.outerWidth() - this.$component.width();
-        this.$component.width(width).height(height);
-
-        if (!this.is('nogui')) {
-          height -= this.$controls.outerHeight();
+      /**
+       * Ensures the right size is set according to the media type
+       * @private
+       */
+      _initSize: function _initSize() {
+        var type = this.is('video') ? 'video' : 'audio';
+        var mediaConfig = defaults[type] || defaults.video;
+        this.config.width = this.config.width || mediaConfig.width;
+        this.config.height = this.config.height || mediaConfig.height;
+
+        if (isResponsiveSize(this.config.width) && !isResponsiveSize(this.config.height) || this.is('youtube')) {
+          // responsive width height should be auto
+          // for youtube iframe height is limited by ration
+          this.config.height = 'auto';
         }
-      }
-
-      this.execute('setSize', width, height);
-      return this;
-    },
-
-    /**
-     * Enables the media player
-     * @returns {mediaplayer}
-     */
-    enable: function enable() {
-      this._fromState('disabled');
-
-      return this;
-    },
+      },
 
-    /**
-     * Disables the media player
-     * @returns {mediaplayer}
-     */
-    disable: function disable() {
-      this._toState('disabled');
-
-      this.trigger('disabled');
-      return this;
-    },
-
-    /**
-     * Shows the media player
-     * @returns {mediaplayer}
-     */
-    show: function show() {
-      this._fromState('hidden');
-
-      return this;
-    },
+      /**
+       * Initializes the right player instance
+       * @private
+       */
+      _initPlayer: function _initPlayer() {
+        var _this6 = this;
+
+        var playerFactory = players[this.type];
+        var error;
+
+        if (support.canPlay(this.type)) {
+          if (_.isFunction(playerFactory)) {
+            var playerConfig = {
+              type: this.getType(),
+              sources: this.getSources(),
+              preview: this.config.preview,
+              debug: this.config.debug,
+              stalledDetectionDelay: this.config.stalledDetectionDelay
+            };
+            this.player = playerFactory(this.$player, playerConfig).on('resize', function (width, height) {
+              if (_this6.$component) {
+                _this6.$component.width(width).height(height);
+              }
+            }).on('ready', function () {
+              return _this6._onReady();
+            }).on('play', function () {
+              return _this6._onPlay();
+            }).on('pause', function () {
+              return _this6._onPause();
+            }).on('timeupdate', function () {
+              return _this6._onTimeUpdate();
+            }).on('stalled', function () {
+              return _this6._onStalled();
+            }).on('playing', function () {
+              return _this6._onPlaying();
+            }).on('end', function () {
+              return _this6._onEnd();
+            }).on('error', function () {
+              return _this6._onError();
+            });
+          }
 
-    /**
-     * hides the media player
-     * @returns {mediaplayer}
-     */
-    hide: function hide() {
-      this._toState('hidden');
+          if (this.player) {
+            error = !this.player.init();
+          } else {
+            error = true;
+          }
+        } else {
+          error = true;
+        }
 
-      return this;
-    },
+        this._setState('error', error);
 
-    /**
-     * Ensures the right media type is set
-     * @param {String} type
-     * @private
-     */
-    _setType: function _setType(type) {
-      if (type.indexOf('youtube') !== -1) {
-        this.type = 'youtube';
-      } else if (type.indexOf('audio') === 0) {
-        this.type = 'audio';
-      } else {
-        this.type = 'video';
-      }
-    },
+        this._setState('nogui', !support.canControl());
 
-    /**
-     * Ensures the type is correctly applied
-     * @private
-     */
-    _initType: function _initType() {
-      var is = this.config.is;
-      is.youtube = 'youtube' === this.type;
-      is.video = 'video' === this.type || 'youtube' === this.type;
-      is.audio = 'audio' === this.type;
-    },
+        this._setState('preview', this.config.preview);
 
-    /**
-     * Gets a source descriptor.
-     * @param {String|Object} src - The media URL, or an object containing the source and the type
-     * @param {Function} callback - A function called to provide the media source object
-     */
-    _getSource: function _getSource(src, callback) {
-      var self = this;
-      var source;
+        this._setState('loading', !error);
 
-      if (_.isString(src)) {
-        source = {
-          src: src
-        };
-      } else {
-        source = _.clone(src);
-      }
+        if (error) {
+          this._setState('ready', true);
 
-      if (this.is('youtube') && !source.type) {
-        source.type = _defaults.type;
-      }
-
-      if (!source.type) {
-        mimetype.getResourceType(source.src, function (err, type) {
-          if (err) {
-            type = _defaults.type;
-          }
-
-          source.type = type;
-          done();
-        });
-      } else {
-        done();
-      }
-
-      function done() {
-        if (_needTypeAdjust(source.type)) {
-          source.type = _getAdjustedType(source);
+          this.trigger('ready');
         }
+      },
 
-        if (self.is('youtube')) {
-          source.id = _extractYoutubeId(source.src);
+      /**
+       * Initializes the player state
+       * @private
+       */
+      _initState: function _initState() {
+        var isCORS = false;
+        var page;
+
+        if (!this.is('youtube')) {
+          page = new UrlParser(window.location);
+          isCORS = _.some(this.config.sources, function (source) {
+            return !page.sameDomain(source.src);
+          });
         }
 
-        callback.call(self, source);
-      }
-    },
-
-    /**
-     * Ensures the sources are correctly set
-     * @param {Function} callback - A function called once all sources have been initialized
-     * @private
-     */
-    _initSources: function _initSources(callback) {
-      var self = this;
-
-      var sources = _configToSources(this.config);
+        this._setState('cors', isCORS);
 
-      this.config.sources = [];
-      async.each(sources, function (source, cb) {
-        self.addSource(source, function (src) {
-          cb(null, src);
-        });
-      }, callback);
-    },
-
-    /**
-     * Installs the events manager onto the instance
-     * @private
-     */
-    _initEvents: function _initEvents() {
-      var triggerEvent;
-      eventifier(this);
-      triggerEvent = this.trigger;
+        this._setState('ready', false);
+      },
 
-      this.trigger = function trigger(eventName) {
-        if (this.$component) {
-          this.$component.trigger(eventName + _ns, _slice.call(arguments, 1));
-        }
+      /**
+       * Resets the internals attributes
+       * @private
+       */
+      _reset: function _reset() {
+        this.config.is = {};
 
-        return triggerEvent.apply(this, arguments);
-      };
-    },
+        this._initType();
 
-    /**
-     * Ensures the right size is set according to the media type
-     * @private
-     */
-    _initSize: function _initSize() {
-      var type = this.is('video') ? 'video' : 'audio';
-      var defaults = _defaults[type] || _defaults.video;
-      this.config.width = _.parseInt(this.config.width) || defaults.width;
-      this.config.height = _.parseInt(this.config.height) || defaults.height;
-    },
+        this.$component = null;
+        this.$container = null;
+        this.$player = null;
+        this.$controls = null;
+        this.$seek = null;
+        this.$seekSlider = null;
+        this.$sound = null;
+        this.$volume = null;
+        this.$volumeControl = null;
+        this.$volumeSlider = null;
+        this.$position = null;
+        this.$duration = null;
+        this.player = null;
+        this.duration = 0;
+        this.position = 0;
+        this.timesPlayed = 0;
+        this.volume = this.config.volume;
+        this.autoStart = this.config.autoStart;
+        this.autoStartAt = this.config.autoStartAt;
+        this.startMuted = this.config.startMuted;
+      },
 
-    /**
-     * Initializes the right player instance
-     * @private
-     */
-    _initPlayer: function _initPlayer() {
-      var player = _players[this.type];
-      var error;
+      /**
+       * Builds the DOM content
+       * @private
+       */
+      _buildDom: function _buildDom() {
+        var configForTemplate = _.clone(this.config);
+
+        configForTemplate.type = this.type;
+        this.$component = $$1(playerTpl(configForTemplate));
+        this.$player = this.$component.find('.player');
+        this.$controls = this.$component.find('.controls');
+        this.$seek = this.$controls.find('.seek .slider');
+        this.$sound = this.$controls.find('.sound');
+        this.$volumeControl = this.$controls.find('.volume');
+        this.$volume = this.$controls.find('.volume .slider');
+        this.$position = this.$controls.find('[data-control="time-cur"]');
+        this.$duration = this.$controls.find('[data-control="time-end"]');
+        this.$volumeSlider = this._renderSlider(this.$volume, this.volume, volumeMin, volumeMax, true);
+      },
 
-      if (_support.canPlay(this.type)) {
-        if (_.isFunction(player)) {
-          this.player = player(this);
-        }
+      /**
+       * Renders a slider onto an element
+       * @param {jQuery} $elt - The element on which renders the slider
+       * @param {Number} [value] - The current value of the slider
+       * @param {Number} [min] - The min value of the slider
+       * @param {Number} [max] - The max value of the slider
+       * @param {Boolean} [vertical] - Tells if the slider must be vertical
+       * @returns {jQuery} - Returns the element
+       * @private
+       */
+      _renderSlider: function _renderSlider($elt, value, min, max, vertical) {
+        var orientation, direction;
 
-        if (this.player) {
-          error = !this.player.init();
+        if (vertical) {
+          orientation = 'vertical';
+          direction = 'rtl';
         } else {
-          error = true;
+          orientation = 'horizontal';
+          direction = 'ltr';
         }
-      } else {
-        error = true;
-      }
-
-      this._setState('error', error);
 
-      this._setState('nogui', !_support.canControl());
-
-      this._setState('loading', true);
-    },
-
-    /**
-     * Initializes the player state
-     * @private
-     */
-    _initState: function _initState() {
-      var isCORS = false;
-      var page;
-
-      if (!this.is('youtube')) {
-        page = new UrlParser(window.location);
-        isCORS = _.some(this.config.sources, function (source) {
-          return !page.sameDomain(source.src);
+        return $elt.noUiSlider({
+          start: ensureNumber(value) || 0,
+          step: 1,
+          connect: 'lower',
+          orientation: orientation,
+          direction: direction,
+          animate: true,
+          range: {
+            min: ensureNumber(min) || 0,
+            max: ensureNumber(max) || 0
+          }
         });
-      }
-
-      this._setState('cors', isCORS);
-
-      this._setState('ready', false);
-    },
-
-    /**
-     * Resets the internals attributes
-     * @private
-     */
-    _reset: function _reset() {
-      this.config.is = {};
-
-      this._initType();
-
-      this.$component = null;
-      this.$container = null;
-      this.$player = null;
-      this.$media = null;
-      this.$controls = null;
-      this.$seek = null;
-      this.$seekSlider = null;
-      this.$sound = null;
-      this.$volume = null;
-      this.$volumeControl = null;
-      this.$volumeSlider = null;
-      this.$position = null;
-      this.$duration = null;
-      this.player = null;
-      this.duration = 0;
-      this.position = 0;
-      this.timesPlayed = 0;
-      this.volume = this.config.volume;
-      this.autoStart = this.config.autoStart;
-      this.autoStartAt = this.config.autoStartAt;
-      this.startMuted = this.config.startMuted;
-    },
+      },
 
-    /**
-     * Builds the DOM content
-     * @private
-     */
-    _buildDom: function _buildDom() {
-      this.$component = $$1(playerTpl(this.config));
-      this.$player = this.$component.find('.player');
-      this.$media = this.$component.find('.media');
-      this.$controls = this.$component.find('.controls');
-      this.$seek = this.$controls.find('.seek .slider');
-      this.$sound = this.$controls.find('.sound');
-      this.$volumeControl = this.$controls.find('.volume');
-      this.$volume = this.$controls.find('.volume .slider');
-      this.$position = this.$controls.find('[data-control="time-cur"]');
-      this.$duration = this.$controls.find('[data-control="time-end"]');
-      this.$volumeSlider = this._renderSlider(this.$volume, this.volume, _volumeMin, _volumeMax, true);
-    },
-
-    /**
-     * Renders a slider onto an element
-     * @param {jQuery} $elt - The element on which renders the slider
-     * @param {Number} [value] - The current value of the slider
-     * @param {Number} [min] - The min value of the slider
-     * @param {Number} [max] - The max value of the slider
-     * @param {Boolean} [vertical] - Tells if the slider must be vertical
-     * @returns {jQuery} - Returns the element
-     * @private
-     */
-    _renderSlider: function _renderSlider($elt, value, min, max, vertical) {
-      var orientation, direction;
-
-      if (vertical) {
-        orientation = 'vertical';
-        direction = 'rtl';
-      } else {
-        orientation = 'horizontal';
-        direction = 'ltr';
-      }
-
-      return $elt.noUiSlider({
-        start: _ensureNumber(value) || 0,
-        step: 1,
-        connect: 'lower',
-        orientation: orientation,
-        direction: direction,
-        animate: true,
-        range: {
-          min: _ensureNumber(min) || 0,
-          max: _ensureNumber(max) || 0
+      /**
+       * Destroys a slider bound to an element
+       * @param {jQuery} $elt
+       * @private
+       */
+      _destroySlider: function _destroySlider($elt) {
+        if ($elt) {
+          $elt.get(0).destroy();
         }
-      });
-    },
+      },
 
-    /**
-     * Destroys a slider bound to an element
-     * @param {jQuery} $elt
-     * @private
-     */
-    _destroySlider: function _destroySlider($elt) {
-      if ($elt) {
-        $elt.get(0).destroy();
-      }
-    },
+      /**
+       * Binds events onto the rendered player
+       * @private
+       */
+      _bindEvents: function _bindEvents() {
+        var _this7 = this;
 
-    /**
-     * Binds events onto the rendered player
-     * @private
-     */
-    _bindEvents: function _bindEvents() {
-      var self = this;
-      var overing = false;
-      this.$component.on('contextmenu' + _ns, function (event) {
-        event.preventDefault();
-      });
-      this.$controls.on('click' + _ns, '.action', function (event) {
-        var $target = $$1(event.target);
-        var $action = $target.closest('.action');
-        var id = $action.data('control');
+        var overing = false;
+        this.$component.on("contextmenu".concat(ns), function (event) {
+          return event.preventDefault();
+        });
+        this.$controls.on("click".concat(ns), '.action', function (event) {
+          var $target = $$1(event.target);
+          var $action = $target.closest('.action');
+          var id = $action.data('control');
 
-        if (_.isFunction(self[id])) {
-          self[id]();
-        }
-      });
-      this.$player.on('click' + _ns, function () {
-        if (self.is('playing')) {
-          self.pause();
-        } else {
-          self.play();
-        }
-      });
-      this.$seek.on('change' + _ns, function (event, value) {
-        self.seek(value, true);
-      });
-      $$1(document).on('updateVolume' + _ns, function (event, value) {
-        self.setVolume(value);
-      });
-      this.$volume.on('change' + _ns, function (event, value) {
-        self.unmute();
-        $$1(document).trigger('updateVolume' + _ns, value);
-        self.setVolume(value, true);
-      });
-      this.$sound.on('mouseover' + _ns, 'a', function () {
-        var position;
+          if (_.isFunction(_this7[id])) {
+            _this7[id]();
+          }
+        });
+        this.$player.on("click".concat(ns), function (event) {
+          var $target = $$1(event.target);
+          var $action = $target.closest('.action'); // if action was clicked
 
-        if (!overing && !self.$volumeControl.hasClass('up') && !self.$volumeControl.hasClass('down')) {
-          overing = true;
-          position = self.$controls[0].getBoundingClientRect();
+          if ($action.length) {
+            var id = $action.data('control');
 
-          if (position && position.top && position.top < volumePositionThreshold) {
-            self.$volumeControl.addClass('down');
+            if (_.isFunction(_this7[id])) {
+              _this7[id]();
+            }
           } else {
-            self.$volumeControl.addClass('up');
-          } //close the volume control after 15s
+            // default action is toggle play
+            if (_this7.is('playing')) {
+              _this7.pause();
+            } else {
+              _this7.play();
+            }
+          }
+        });
+        this.$seek.on("change".concat(ns), function (event, value) {
+          _this7.seek(value, true);
+        });
+        $$1(document).on("updateVolume".concat(ns), function (event, value) {
+          _this7.setVolume(value);
+        });
+        this.$volume.on("change".concat(ns), function (event, value) {
+          _this7.unmute();
 
+          $$1(document).trigger("updateVolume".concat(ns), value);
 
-          self.overingTimer = _.delay(function () {
-            if (self.$volumeControl) {
-              self.$volumeControl.removeClass('up down');
-            }
+          _this7.setVolume(value, true);
+        });
+        this.$sound.on("mouseover".concat(ns), 'a', function () {
+          var position;
 
-            overing = false;
-          }, 15000);
-          self.$volumeControl.one('mouseleave' + _ns, function () {
-            self.$volumeControl.removeClass('up down');
-            overing = false;
-          });
-        }
-      });
-    },
+          if (!overing && !_this7.$volumeControl.hasClass('up') && !_this7.$volumeControl.hasClass('down')) {
+            overing = true;
+            position = _this7.$controls[0].getBoundingClientRect();
 
-    /**
-     * Unbinds events from the rendered player
-     * @private
-     */
-    _unbindEvents: function _unbindEvents() {
-      this.$component.off(_ns);
-      this.$player.off(_ns);
-      this.$controls.off(_ns);
-      this.$seek.off(_ns);
-      this.$volume.off(_ns); //if the volume is opened and the player destroyed,
-      //prevent the callback to run
-
-      if (this.overingTimer) {
-        clearTimeout(this.overingTimer);
-      }
+            if (position && position.top && position.top < volumePositionThreshold) {
+              _this7.$volumeControl.addClass('down');
+            } else {
+              _this7.$volumeControl.addClass('up');
+            } //close the volume control after 15s
 
-      $$1(document).off(_ns);
-    },
 
-    /**
-     * Updates the volume slider
-     * @param {Number} value
-     * @private
-     */
-    _updateVolumeSlider: function _updateVolumeSlider(value) {
-      if (this.$volumeSlider) {
-        this.$volumeSlider.val(value);
-      }
-    },
+            _this7.overingTimer = _.delay(function () {
+              if (_this7.$volumeControl) {
+                _this7.$volumeControl.removeClass('up down');
+              }
 
-    /**
-     * Updates the displayed volume
-     * @param {Number} value
-     * @param {*} [internal]
-     * @private
-     */
-    _updateVolume: function _updateVolume(value, internal) {
-      this.volume = Math.max(_volumeMin, Math.min(_volumeMax, parseFloat(value)));
+              overing = false;
+            }, 15000);
 
-      this._storeVolume(this.volume);
+            _this7.$volumeControl.one("mouseleave".concat(ns), function () {
+              _this7.$volumeControl.removeClass('up down');
 
-      if (!internal) {
-        this._updateVolumeSlider(value);
-      }
-    },
+              overing = false;
+            });
+          }
+        });
+      },
 
-    /**
-     * Updates the time slider
-     * @param {Number} value
-     * @private
-     */
-    _updatePositionSlider: function _updatePositionSlider(value) {
-      if (this.$seekSlider) {
-        this.$seekSlider.val(value);
-      }
-    },
+      /**
+       * Unbinds events from the rendered player
+       * @private
+       */
+      _unbindEvents: function _unbindEvents() {
+        this.$component.off(ns);
+        this.$player.off(ns);
+        this.$controls.off(ns);
+        this.$seek.off(ns);
+        this.$volume.off(ns); //if the volume is opened and the player destroyed,
+        //prevent the callback to run
+
+        if (this.overingTimer) {
+          clearTimeout(this.overingTimer);
+        }
 
-    /**
-     * Updates the time label
-     * @param {Number} value
-     * @private
-     */
-    _updatePositionLabel: function _updatePositionLabel(value) {
-      if (this.$position) {
-        this.$position.text(_timerFormat(value));
-      }
-    },
+        $$1(document).off(ns);
+      },
 
-    /**
-     * Updates the displayed time position
-     * @param {Number} value
-     * @param {*} [internal]
-     * @private
-     */
-    _updatePosition: function _updatePosition(value, internal) {
-      this.position = Math.max(0, Math.min(this.duration, parseFloat(value)));
+      /**
+       * Updates the volume slider
+       * @param {Number} value
+       * @private
+       */
+      _updateVolumeSlider: function _updateVolumeSlider(value) {
+        if (this.$volumeSlider) {
+          this.$volumeSlider.val(value);
+        }
+      },
 
-      if (!internal) {
-        this._updatePositionSlider(this.position);
-      }
+      /**
+       * Updates the displayed volume
+       * @param {Number} value
+       * @param {*} [internal]
+       * @private
+       */
+      _updateVolume: function _updateVolume(value, internal) {
+        this.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(value)));
 
-      this._updatePositionLabel(this.position);
-    },
+        this._storeVolume(this.volume);
 
-    /**
-     * Updates the duration slider
-     * @param {Number} value
-     * @private
-     */
-    _updateDurationSlider: function _updateDurationSlider(value) {
-      if (this.$seekSlider) {
-        this._destroySlider(this.$seekSlider);
+        if (!internal) {
+          this._updateVolumeSlider(value);
+        }
+      },
 
-        this.$seekSlider = null;
-      }
+      /**
+       * Updates the time slider
+       * @param {Number} value
+       * @private
+       */
+      _updatePositionSlider: function _updatePositionSlider(value) {
+        if (this.$seekSlider) {
+          this.$seekSlider.val(value);
+        }
+      },
 
-      if (value && isFinite(value)) {
-        this.$seekSlider = this._renderSlider(this.$seek, 0, 0, value);
-        this.$seekSlider.attr('disabled', !this.config.canSeek);
-      }
-    },
+      /**
+       * Updates the time label
+       * @param {Number} value
+       * @private
+       */
+      _updatePositionLabel: function _updatePositionLabel(value) {
+        if (this.$position) {
+          this.$position.text(timerFormat(value));
+        }
+      },
 
-    /**
-     * Updates the duration label
-     * @param {Number} value
-     * @private
-     */
-    _updateDurationLabel: function _updateDurationLabel(value) {
-      if (this.$duration) {
-        if (value && isFinite(value)) {
-          this.$duration.text(_timerFormat(value)).show();
-        } else {
-          this.$duration.hide();
+      /**
+       * Updates the displayed time position
+       * @param {Number} value
+       * @param {*} [internal]
+       * @private
+       */
+      _updatePosition: function _updatePosition(value, internal) {
+        this.position = Math.max(0, Math.min(this.duration || +Infinity, parseFloat(value)));
+
+        if (!internal && this.duration) {
+          this._updatePositionSlider(this.position);
         }
-      }
-    },
 
-    /**
-     * Updates the displayed duration
-     * @param {Number} value
-     * @private
-     */
-    _updateDuration: function _updateDuration(value) {
-      this.duration = Math.abs(parseFloat(value));
+        this._updatePositionLabel(this.position);
+      },
 
-      this._updateDurationSlider(this.duration);
+      /**
+       * Updates the duration slider
+       * @param {Number} value
+       * @private
+       */
+      _updateDurationSlider: function _updateDurationSlider(value) {
+        if (this.$seekSlider) {
+          this._destroySlider(this.$seekSlider);
 
-      this._updateDurationLabel(this.duration);
-    },
+          this.$seekSlider = null;
+        }
 
-    /**
-     * Event called when the media is ready
-     * @private
-     */
-    _onReady: function _onReady() {
-      this._updateDuration(this.player.getDuration());
+        if (value && isFinite(value)) {
+          this.$seekSlider = this._renderSlider(this.$seek, 0, 0, value);
+          this.$seekSlider.attr('disabled', !this.config.canSeek);
+        }
+      },
+
+      /**
+       * Updates the duration label
+       * @param {Number} value
+       * @private
+       */
+      _updateDurationLabel: function _updateDurationLabel(value) {
+        if (this.$duration) {
+          if (value && isFinite(value)) {
+            this.$duration.text(timerFormat(value)).show();
+          } else {
+            this.$duration.hide();
+          }
+        }
+      },
 
-      this._setState('ready', true);
+      /**
+       * Updates the displayed duration
+       * @param {Number|String} value
+       * @private
+       */
+      _updateDuration: function _updateDuration(value) {
+        var duration = Math.abs(parseFloat(value));
 
-      this._setState('canplay', true);
+        if (duration !== this.duration) {
+          this.duration = duration;
 
-      this._setState('canpause', this.config.canPause);
+          this._updateDurationSlider(this.duration);
 
-      this._setState('canseek', this.config.canSeek);
+          this._updateDurationLabel(this.duration);
+        }
+      },
 
-      this._setState('loading', false);
       /**
-       * Triggers a media ready event
-       * @event mediaplayer#ready
+       * Event called when the media is ready
+       * @private
        */
+      _onReady: function _onReady() {
+        if (this.is('error')) {
+          this._setState('error', false);
+        }
 
+        var duration = this.player.getDuration();
+        var timePreview = this.config.preview || duration;
 
-      this.trigger('ready'); // set the initial state
+        if (timePreview) {
+          this._updateDuration(duration);
+        }
 
-      this.setVolume(this.volume);
-      this.mute(!!this.startMuted);
+        this.setInitialStates();
+        /**
+         * Triggers a media ready event
+         * @event mediaplayer#ready
+         */
 
-      if (this.autoStartAt) {
-        this.seek(this.autoStartAt);
-      } else if (this.autoStart) {
-        this.play();
-      }
-    },
+        this.trigger('ready'); // set the initial state
 
-    /**
-     * Update volume in DBIndex store
-     * @param {Number} volume
-     * @private
-     */
-    _storeVolume: function _storeVolume(volume) {
-      return store('mediaVolume').then(function (volumeStore) {
-        volumeStore.setItem('volume', volume);
-      });
-    },
+        this.setVolume(this.volume);
+        this.mute(!!this.startMuted);
 
-    /**
-     * Get volume from DBIndex store
-     * @private
-     */
-    _updateVolumeFromStore: function _updateVolumeFromStore() {
-      var self = this;
-      return store('mediaVolume').then(function (volumeStore) {
-        return volumeStore.getItem('volume');
-      }).then(function (volume) {
-        if (_.isNumber(volume)) {
-          self.volume = Math.max(_volumeMin, Math.min(_volumeMax, parseFloat(volume)));
-          self.setVolume(self.volume);
+        if (this.autoStartAt) {
+          this.seek(this.autoStartAt);
+        } else if (this.autoStart) {
+          this.play();
         }
-      });
-    },
 
-    /**
-     * Event called when the media throws unrecoverable error
-     * @private
-     */
-    _onError: function _onError() {
-      this._setState('error', true);
+        if (this.config.preview && this.$container && this.config.height && this.config.height !== 'auto') {
+          this._setMaxHeight();
+        }
+      },
+
+      /**
+       * Set max height limit for container
+       * using by old media items with defined height.
+       * @private
+       */
+      _setMaxHeight: function _setMaxHeight() {
+        var $video = this.$container.find('video.video');
+        var controlsHeight = parseInt(window.getComputedStyle(this.$controls[0]).height);
+        var scale = $video.height() / this.config.height;
+        var playerWidth = this.$container.find('.player').width();
+        var videoWidth = $video.width() / scale;
+
+        if (videoWidth > playerWidth) {
+          this.execute('setSize', '100%', 'auto');
+        } else {
+          this.$component.css({
+            maxHeight: "".concat(this.config.height + controlsHeight, "px")
+          });
+          this.execute('setSize', Math.floor(videoWidth), 'auto');
+        }
+      },
 
-      this._setState('loading', false);
       /**
-       * Triggers an unrecoverable media error event
-       * @event mediaplayer#error
+       * Update volume in DBIndex store
+       * @param {Number} volume
+       * @returns {Promise}
+       * @private
        */
+      _storeVolume: function _storeVolume(volume) {
+        return store('mediaVolume').then(function (volumeStore) {
+          return volumeStore.setItem('volume', volume);
+        });
+      },
 
+      /**
+       * Get volume from DBIndex store
+       * @returns {Promise}
+       * @private
+       */
+      _updateVolumeFromStore: function _updateVolumeFromStore() {
+        var _this8 = this;
 
-      this.trigger('error');
-    },
+        return store('mediaVolume').then(function (volumeStore) {
+          return volumeStore.getItem('volume');
+        }).then(function (volume) {
+          if (_.isNumber(volume)) {
+            _this8.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(volume)));
+
+            _this8.setVolume(_this8.volume);
+          }
+        });
+      },
 
-    /**
-     * Event called when the media throws recoverable error
-     * @private
-     */
-    _onRecoverError: function _onRecoverError() {
-      this._setState('error', false);
       /**
-       * Triggers a recoverable media error event
-       * @event mediaplayer#recovererror
+       * Event called when the media throws unrecoverable error
+       * @private
        */
+      _onError: function _onError() {
+        this._setState('error', true);
 
+        this._setState('loading', false);
+        /**
+         * Triggers an unrecoverable media error event
+         * @event mediaplayer#error
+         */
 
-      this.trigger('recovererror');
-    },
 
-    /**
-     * Event called when the media is played
-     * @private
-     */
-    _onPlay: function _onPlay() {
-      this._playingState(true);
+        this.trigger('error');
+      },
+
       /**
-       * Triggers a media playback event
-       * @event mediaplayer#play
+       * Event called when the media is played
+       * @private
        */
+      _onPlay: function _onPlay() {
+        this._playingState(true);
+
+        this._setState('preview', true);
+        /**
+         * Triggers a media playback event
+         * @event mediaplayer#play
+         */
 
 
-      this.trigger('play', this.$media[0]);
-    },
+        this.trigger('play', this.player && this.player.getMedia());
+      },
 
-    /**
-     * Event called when the media is paused
-     * @private
-     */
-    _onPause: function _onPause() {
-      this._playingState(false);
       /**
-       * Triggers a media paused event
-       * @event mediaplayer#pause
+       * Event called when the media is paused
+       * @private
        */
+      _onPause: function _onPause() {
+        this._playingState(false);
+        /**
+         * Triggers a media paused event
+         * @event mediaplayer#pause
+         */
 
 
-      this.trigger('pause');
-    },
+        this.trigger('pause');
+      },
 
-    /**
-     * Event called when the media is ended
-     * @private
-     */
-    _onEnd: function _onEnd() {
-      this.timesPlayed++;
+      /**
+       * Event called when the media is ended
+       * @private
+       */
+      _onEnd: function _onEnd() {
+        this.timesPlayed++;
+
+        this._playingState(false, true);
 
-      this._playingState(false, true);
+        this._updatePosition(0); // disable when the play limit is reached
 
-      this._updatePosition(0); // disable GUI when the play limit is reached
+
+        if (this._playLimitReached()) {
+          if (!this.is('disabled')) {
+            this.disable();
+          }
+          /**
+           * Triggers a play limit reached event
+           * @event mediaplayer#limitreached
+           */
 
 
-      if (this._playLimitReached()) {
-        this._disableGUI();
+          this.trigger('limitreached');
+        } else if (this.loop) {
+          this.restart();
+        } else if (parseInt(this.config.replayTimeout, 10) > 0) {
+          this.replayTimeoutStartMs = new window.Date().getTime();
+
+          this._replayTimeout();
+        }
         /**
-         * Triggers a play limit reached event
-         * @event mediaplayer#limitreached
+         * Triggers a media ended event
+         * @event mediaplayer#ended
          */
 
 
-        this.trigger('limitreached');
-      } else if (this.loop) {
-        this.restart();
-      } else if (parseInt(this.config.replayTimeout, 10) > 0) {
-        this.replayTimeoutStartMs = new window.Date().getTime();
+        this.trigger('ended');
+      },
 
-        this._replayTimeout();
-      }
       /**
-       * Triggers a media ended event
-       * @event mediaplayer#ended
+       * Event called when the playback is playing
+       * @private
        */
+      _onPlaying: function _onPlaying() {
+        this._setState('preview', true);
 
+        this._setState('stalled', false);
 
-      this.trigger('ended');
-    },
+        this._setState('ready', true);
+      },
 
-    /**
-     * Event called when the time position has changed
-     * @private
-     */
-    _onTimeUpdate: function _onTimeUpdate() {
-      this._updatePosition(this.player.getPosition());
       /**
-       * Triggers a media time update event
-       * @event mediaplayer#update
+       * Event called when the playback is stalled
+       * @private
        */
+      _onStalled: function _onStalled() {
+        this._setState('stalled', true);
 
+        this._setState('ready', false);
+      },
 
-      this.trigger('update');
-    },
+      /**
+       * Event called when the time position has changed
+       * @private
+       */
+      _onTimeUpdate: function _onTimeUpdate() {
+        this._updatePosition(this.player.getPosition());
+        /**
+         * Triggers a media time update event
+         * @event mediaplayer#update
+         */
 
-    /**
-     * Run a timer to disable the possibility of replaying a media
-     * @private
-     */
-    _replayTimeout: function _replayTimeout() {
-      var nowMs = new window.Date().getTime(),
-          elapsedSeconds = Math.floor((nowMs - this.replayTimeoutStartMs) / 1000);
-      this.timerId = requestAnimationFrame(this._replayTimeout.bind(this));
 
-      if (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
-        this._disableGUI();
+        this.trigger('update');
+      },
 
-        this.disable();
-        cancelAnimationFrame(this.timerId);
-      }
-    },
+      /**
+       * Run a timer to disable the possibility of replaying a media
+       * @private
+       */
+      _replayTimeout: function _replayTimeout() {
+        var nowMs = new window.Date().getTime(),
+            elapsedSeconds = Math.floor((nowMs - this.replayTimeoutStartMs) / 1000);
+        this.timerId = requestAnimationFrame(this._replayTimeout.bind(this));
 
-    /**
-     * Disable the player GUI
-     * @private
-     */
-    _disableGUI: function disableGUI() {
-      this._setState('ready', false);
+        if (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
+          this.disable();
+          cancelAnimationFrame(this.timerId);
+        }
+      },
 
-      this._setState('canplay', false);
-    },
+      /**
+       * Checks if the play limit has been reached
+       * @returns {Boolean}
+       * @private
+       */
+      _playLimitReached: function _playLimitReached() {
+        return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
+      },
 
-    /**
-     * Checks if the play limit has been reached
-     * @returns {Boolean}
-     * @private
-     */
-    _playLimitReached: function _playLimitReached() {
-      return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
-    },
+      /**
+       * Checks if the media can be played
+       * @returns {Boolean}
+       * @private
+       */
+      _canPlay: function _canPlay() {
+        return (this.is('ready') || this.is('stalled')) && !this.is('disabled') && !this.is('hidden') && !this._playLimitReached();
+      },
 
-    /**
-     * Checks if the media can be played
-     * @returns {Boolean}
-     * @private
-     */
-    _canPlay: function _canPlay() {
-      return this.is('ready') && !this.is('disabled') && !this.is('hidden') && !this._playLimitReached();
-    },
+      /**
+       * Checks if the media can be paused
+       * @returns {Boolean}
+       * @private
+       */
+      _canPause: function _canPause() {
+        return !!this.config.canPause;
+      },
 
-    /**
-     * Checks if the media can be paused
-     * @returns {Boolean}
-     * @private
-     */
-    _canPause: function _canPause() {
-      return !!this.config.canPause;
-    },
+      /**
+       * Checks if the media can be sought
+       * @returns {Boolean}
+       * @private
+       */
+      _canSeek: function _canSeek() {
+        return !!this.config.canSeek;
+      },
 
-    /**
-     * Checks if the media can be sought
-     * @returns {Boolean}
-     * @private
-     */
-    _canSeek: function _canSeek() {
-      return !!this.config.canSeek;
-    },
+      /**
+       * Checks if the playback can be resumed
+       * @returns {Boolean}
+       * @private
+       */
+      _canResume: function _canResume() {
+        return this.is('paused') && this._canPlay();
+      },
 
-    /**
-     * Checks if the playback can be resumed
-     * @returns {Boolean}
-     * @private
-     */
-    _canResume: function _canResume() {
-      return this.is('paused') && this._canPlay();
-    },
+      /**
+       * Sets the media is in a particular state
+       * @param {String} name
+       * @param {Boolean} value
+       * @returns {mediaplayer}
+       */
+      _setState: function _setState(name, value) {
+        value = !!value;
+        this.config.is[name] = value;
 
-    /**
-     * Sets the media is in a particular state
-     * @param {String} name
-     * @param {Boolean} value
-     * @returns {mediaplayer}
-     */
-    _setState: function _setState(name, value) {
-      value = !!value;
-      this.config.is[name] = value;
+        if (this.$component) {
+          this.$component.toggleClass(name, value);
+        }
 
-      if (this.$component) {
-        this.$component.toggleClass(name, value);
-      }
+        return this;
+      },
 
-      return this;
-    },
+      /**
+       * Restores the media player from a particular state and resumes the playback
+       * @param {String} stateName
+       * @returns {mediaplayer}
+       * @private
+       */
+      _fromState: function _fromState(stateName) {
+        this._setState(stateName, false);
 
-    /**
-     * Restores the media player from a particular state and resumes the playback
-     * @param {String} stateName
-     * @returns {mediaplayer}
-     * @private
-     */
-    _fromState: function _fromState(stateName) {
-      this._setState(stateName, false);
+        this.resume();
+        return this;
+      },
 
-      this.resume();
-      return this;
-    },
+      /**
+       * Sets the media player to a particular state and pauses the playback
+       * @param {String} stateName
+       * @returns {mediaplayer}
+       * @private
+       */
+      _toState: function _toState(stateName) {
+        this.pause();
 
-    /**
-     * Sets the media player to a particular state and pauses the playback
-     * @param {String} stateName
-     * @returns {mediaplayer}
-     * @private
-     */
-    _toState: function _toState(stateName) {
-      this.pause();
+        this._setState(stateName, true);
 
-      this._setState(stateName, true);
+        return this;
+      },
 
-      return this;
-    },
+      /**
+       * Sets the playing state
+       * @param {Boolean} state
+       * @param {Boolean} [ended]
+       * @returns {mediaplayer}
+       * @private
+       */
+      _playingState: function _playingState(state, ended) {
+        this._setState('playing', !!state);
 
-    /**
-     * Sets the playing state
-     * @param {Boolean} state
-     * @param {Boolean} [ended]
-     * @returns {mediaplayer}
-     * @private
-     */
-    _playingState: function _playingState(state, ended) {
-      this._setState('playing', !!state);
+        this._setState('paused', !state);
 
-      this._setState('paused', !state);
+        this._setState('ended', !!ended);
 
-      this._setState('ended', !!ended);
+        return this;
+      },
 
-      return this;
-    },
+      /**
+       * Executes a command onto the media
+       * @param {String} command - The name of the command to execute
+       * @param {*} args - additional arguments
+       * @returns {*}
+       * @private
+       */
+      execute: function execute(command) {
+        if (this.player && 'function' === typeof this.player[command]) {
+          var _this$player;
 
-    /**
-     * Executes a command onto the media
-     * @param {String} command - The name of the command to execute
-     * @returns {*}
-     * @private
-     */
-    execute: function execute(command) {
-      var ctx = this.player;
-      var method = ctx && ctx[command];
+          for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            args[_key2 - 1] = arguments[_key2];
+          }
 
-      if (_.isFunction(method)) {
-        return method.apply(ctx, _slice.call(arguments, 1));
+          return (_this$player = this.player)[command].apply(_this$player, args);
+        }
       }
-    }
-  };
-  /**
-   * Builds a media player instance
-   * @param {Object} config
-   * @param {String} config.type - The type of media to play
-   * @param {String|Array} config.url - The URL to the media
-   * @param {String|jQuery|HTMLElement} [config.renderTo] - An optional container in which renders the player
-   * @param {Boolean} [config.loop] - The media will be played continuously
-   * @param {Boolean} [config.canPause] - The play can be paused
-   * @param {Boolean} [config.startMuted] - The player should be initially muted
-   * @param {Boolean} [config.autoStart] - The player starts as soon as it is displayed
-   * @param {Number} [config.autoStartAt] - The time position at which the player should start
-   * @param {Number} [config.maxPlays] - Sets a few number of plays (default: infinite)
-   * @param {Number} [config.volume] - Sets the sound volume (default: 80)
-   * @param {Number} [config.width] - Sets the width of the player (default: depends on media type)
-   * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
-   * @event render - Event triggered when the player is rendering
-   * @event error - Event triggered when the player throws an unrecoverable error
-   * @event recovererror - Event triggered when the player throws a recoverable error
-   * @event ready - Event triggered when the player is fully ready
-   * @event play - Event triggered when the playback is starting
-   * @event update - Event triggered while the player is playing
-   * @event pause - Event triggered when the playback is paused
-   * @event ended - Event triggered when the playback is ended
-   * @event limitreached - Event triggered when the play limit has been reached
-   * @event destroy - Event triggered when the player is destroying
-   * @returns {mediaplayer}
-   */
-
-  var mediaplayerFactory = function mediaplayerFactory(config) {
-    var player = _.clone(mediaplayer);
-
-    return player.init(config);
-  };
+    };
+    return mediaplayer.init(config);
+  }
   /**
    * Tells if the browser can play audio and video
    * @param {String} [type] The type of media (audio or video)
@@ -2498,7 +1845,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
 
   mediaplayerFactory.canPlay = function canPlay(type, mime) {
-    return _support.canPlay(type, mime);
+    return support.canPlay(type, mime);
   };
   /**
    * Tells if the browser can play audio
@@ -2508,7 +1855,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
 
   mediaplayerFactory.canPlayAudio = function canPlayAudio(mime) {
-    return _support.canPlayAudio(mime);
+    return support.canPlayAudio(mime);
   };
   /**
    * Tells if the browser can play video
@@ -2518,7 +1865,7 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
 
   mediaplayerFactory.canPlayVideo = function canPlayVideo(mime) {
-    return _support.canPlayVideo(mime);
+    return support.canPlayVideo(mime);
   };
   /**
    * Checks if the browser allows to control the media playback
@@ -2527,16 +1874,8 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/eventifier', 'core/
 
 
   mediaplayerFactory.canControl = function canControl() {
-    return _support.canControl();
+    return support.canControl();
   };
-  /**
-   * The polling interval used to update the progress bar while playing a YouTube video.
-   * Note : the YouTube API does not provide events to update this progress bar...
-   * @type {Number}
-   */
-
-
-  mediaplayerFactory.youtubePolling = 100;
 
   return mediaplayerFactory;