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

package/src/mediaplayer.js

@@ -13,10 +13,7 @@
  * 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 ;
- */
-/**
- * @author Jean-Sébastien Conan <jean-sebastien.conan@vesperiagroup.com>
+ * Copyright (c) 2015-2021 (original work) Open Assessment Technologies SA ;
  */
 
 import $ from 'jquery';
@@ -26,141 +23,77 @@ import UrlParser from 'util/urlParser';
 import eventifier from 'core/eventifier';
 import mimetype from 'core/mimetype';
 import store from 'core/store';
+import support from 'ui/mediaplayer/support';
+import players from 'ui/mediaplayer/players';
 import playerTpl from 'ui/mediaplayer/tpl/player';
 import 'ui/mediaplayer/css/player.css';
 import 'nouislider';
 
-/**
- * Enable the debug mode
- * @type {boolean}
- * @private
- */
-var _debugMode = false;
-
 /**
  * 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;
+const ns = '.mediaplayer';
 
 /**
  * Minimum value of the volume
  * @type {Number}
- * @private
  */
-var _volumeMin = 0;
+const 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;
+const 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;
+const volumePositionThreshold = 200;
 
 /**
  * Some default values
  * @type {Object}
- * @private
  */
-var _defaults = {
+const 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(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(value) {
-    value = parseFloat(value);
-    return isFinite(value) ? value : 0;
+const ensureNumber = value => {
+    const floatValue = parseFloat(value);
+    return isFinite(floatValue) ? floatValue : 0;
 };
 
 /**
@@ -168,12 +101,11 @@ var _ensureNumber = function(value) {
  * @param {Number} n
  * @param {Number} len
  * @returns {String}
- * @private
  */
-var _leadingZero = function(n, len) {
-    var value = n.toString();
+const leadingZero = (n, len) => {
+    let value = n.toString();
     while (value.length < len) {
-        value = '0' + value;
+        value = `0${value}`;
     }
     return value;
 };
@@ -182,19 +114,18 @@ var _leadingZero = function(n, len) {
  * Formats a time value to string
  * @param {Number} time
  * @returns {String}
- * @private
  */
-var _timerFormat = function(time) {
-    var seconds = Math.floor(time % 60);
-    var minutes = Math.floor(time / 60) % 60;
-    var hours = Math.floor(time / 3600);
-    var parts = [];
+const timerFormat = time => {
+    const seconds = Math.floor(time % 60);
+    const minutes = Math.floor(time / 60) % 60;
+    const hours = Math.floor(time / 3600);
+    const parts = [];
 
     if (hours) {
         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(':');
 };
@@ -203,9 +134,8 @@ var _timerFormat = function(time) {
  * Checks if a type needs to be adjusted
  * @param {String} type
  * @returns {Boolean}
- * @private
  */
-var _needTypeAdjust = function(type) {
+const needTypeAdjust = type => {
     return 'string' === typeof type && type.indexOf('application') === 0;
 };
 
@@ -213,12 +143,11 @@ var _needTypeAdjust = function(type) {
  * Adjust bad type by apllying heuristic on URI
  * @param {Object|String} source
  * @returns {String}
- * @private
  */
-var _getAdjustedType = function(source) {
-    var type = 'video/ogg';
-    var url = (source && source.src) || source;
-    var ext = url && url.substr(-4);
+const getAdjustedType = source => {
+    let type = 'video/ogg';
+    const url = (source && source.src) || source;
+    const ext = url && url.substr(-4);
     if (ext === '.ogg' || ext === '.oga') {
         type = 'audio/ogg';
     }
@@ -229,11 +158,10 @@ var _getAdjustedType = function(source) {
  * Extract a list of media sources from a config object
  * @param {Object} config
  * @returns {Array}
- * @private
  */
-var _configToSources = function(config) {
-    var sources = config.sources || [];
-    var url = config.url;
+const configToSources = config => {
+    let sources = config.sources || [];
+    let url = config.url;
 
     if (!_.isArray(sources)) {
         sources = [sources];
@@ -251,1998 +179,1393 @@ var _configToSources = function(config) {
 
 /**
  * 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(media, mimeType) {
-    var support = !!media.canPlayType;
-    if (mimeType && support) {
-        support = !!media.canPlayType(_mimeTypes[mimeType] || mimeType).replace(/no/, '');
-    }
-    return support;
+const 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;
+    const mediaplayer = {
+        /**
+         * Initializes the media player
+         * @param {Object} config
+         * @returns {mediaplayer}
+         */
+        init(config) {
+            // load the config set, discard null values in order to allow defaults to be set
+            this.config = _.omit(config || {}, value => typeof value === 'undefined' || value === null);
+            _.defaults(this.config, defaults.options);
+            if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
+                this.config.mimeType = this.config.type;
             }
-        }
-        return this.canPlayAudio() && this.canPlayVideo();
-    },
+            this._setType(this.config.type || defaults.type);
+
+            this._reset();
+            this._updateVolumeFromStore();
+            this._initEvents();
+            this._initSources(() => {
+                if (!this.is('youtube')) {
+                    _.forEach(this.config.sources, source => {
+                        if (source && source.type && source.type.indexOf('audio') === 0) {
+                            this._setType(source.type);
+                            this._initType();
+                            return false;
+                        }
+                    });
+                }
+                if (this.config.renderTo) {
+                    _.defer(() => this.render());
+                }
+            });
 
-    /**
-     * 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');
-        }
+            return this;
+        },
 
-        return _checkSupport(this._mediaAudio, mime);
-    },
+        /**
+         * Uninstalls the media player
+         * @returns {mediaplayer}
+         */
+        destroy() {
+            /**
+             * Triggers a destroy event
+             * @event mediaplayer#destroy
+             */
+            this.trigger('destroy');
 
-    /**
-     * 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');
-        }
+            if (this.player) {
+                this.player.destroy();
+            }
 
-        return _checkSupport(this._mediaVideo, mime);
-    },
+            if (this.$component) {
+                this._unbindEvents();
+                this._destroySlider(this.$seekSlider);
+                this._destroySlider(this.$volumeSlider);
 
-    /**
-     * Checks if the browser allows to control the media playback
-     * @returns {Boolean}
-     */
-    canControl: function canControl() {
-        return !_reAppleMobiles.test(navigator.userAgent);
-    }
-};
+                this.$component.remove();
+            }
 
-/**
- * A local manager for Youtube players.
- * Relies on https://developers.google.com/youtube/iframe_api_reference
- * @type {Object}
- * @private
- */
-var _youtubeManager = {
-    /**
-     * The Youtube API injection state
-     * @type {Boolean}
-     */
-    injected: false,
+            this._reset();
 
-    /**
-     * The Youtube API ready state
-     * @type {Boolean}
-     */
-    ready: false,
+            return this;
+        },
 
-    /**
-     * A list of pending players
-     * @type {Array}
-     */
-    pending: [],
+        /**
+         * Renders the media player according to the media type
+         * @param {String|jQuery|HTMLElement} [to]
+         * @returns {mediaplayer}
+         */
+        render(to) {
+            const renderTo = to || this.config.renderTo || this.$container;
 
-    /**
-     * 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]);
-
-            if (!this.injected) {
-                this.injectApi();
+            if (this.$component) {
+                this.destroy();
             }
-        }
-    },
 
-    /**
-     * Removes a pending Youtube player
-     * @param {String|jQuery|HTMLElement} elem
-     * @param {Object} player
-     */
-    remove: function remove(elem, player) {
-        var pending = this.pending;
-        _.forEach(pending, function(args, idx) {
-            if (args && elem === args[0] && player === args[1]) {
-                pending[idx] = null;
+            this._initState();
+            this._buildDom();
+            if (this.config.preview) {
+                this._updateDuration(0);
+                this._updatePosition(0);
             }
-        });
-    },
-
-    /**
-     * 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.ready) {
-            return this.add(elem, player, options);
-        }
+            this._bindEvents();
+            this._playingState(false, true);
+            this._initPlayer();
+            this._initSize();
+
+            // Resize for old items with defined height to avoid big jump
+            if (this.config.height && this.config.height !== 'auto') {
+                this.resize('100%', 'auto');
+            } else {
+                this.resize(this.config.width, this.config.height);
+            }
+            this.config.is.rendered = true;
 
-        if (!options) {
-            options = {};
-        }
+            if (renderTo) {
+                this.$container = $(renderTo).append(this.$component);
+            }
 
-        $elem = $(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)
+            // add class if it is stalled
+            if (this.is('stalled')) {
+                this._setState('stalled', true);
             }
-        });
-    },
 
-    /**
-     * Called when the Youtube API is ready. Should install all pending players.
-     */
-    apiReady: function apiReady() {
-        var self = this;
-        var pending = this.pending;
+            /**
+             * Triggers a render event
+             * @event mediaplayer#render
+             * @param {jQuery} $component
+             */
+            this.trigger('render', this.$component);
+
+            return this;
+        },
 
-        this.pending = [];
-        this.ready = true;
+        /**
+         * Reloads media player after it was stalled
+         */
+        reload() {
+            /**
+             * Triggers a reload event
+             * @event mediaplayer#reload
+             */
+            this.trigger('reload');
 
-        _.forEach(pending, function(args) {
-            if (args) {
-                self.create.apply(self, args);
+            if (this.player) {
+                this.player.recover();
             }
-        });
-    },
+            this._setState('stalled', false);
+            this.setInitialStates();
+        },
 
-    /**
-     * 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';
-        if (apiReady && !this.ready) {
-            _youtubeManager.apiReady();
-        }
-        return apiReady;
-    },
+        /**
+         * Set initial states
+         */
+        setInitialStates() {
+            if (!this.is('stalled')) {
+                this._setState('ready', true);
+            }
+            this._setState('canplay', true);
+            this._setState('canpause', this.config.canPause);
+            this._setState('canseek', this.config.canSeek);
+            this._setState('loading', false);
+        },
 
-    /**
-     * 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() {
-                    if (!self.isApiReady()) {
-                        setTimeout(check, 100);
-                    }
-                };
-                check();
-            });
-        }
+        /**
+         * Sets the start position inside the media
+         * @param {Number} time - The start position in seconds
+         * @param {*} [internal] - Internal use
+         * @returns {mediaplayer}
+         */
+        seek(time, internal) {
+            if (this._canPlay()) {
+                this._updatePosition(time, internal);
 
-        this.injected = true;
-    }
-};
+                this.execute('seek', this.position);
 
-/**
- * Defines a player object dedicated to youtube media
- * @param {mediaplayer} mediaplayer
- * @private
- */
-var _youtubePlayer = function(mediaplayer) {
-    var $media;
-    var media;
-    var player;
-    var interval;
-    var destroyed;
-    var initWidth, initHeight;
-
-    function loopEvents(callback) {
-        _.forEach(
-            ['onStateChange', 'onPlaybackQualityChange', 'onPlaybackRateChange', 'onError', 'onApiChange'],
-            callback
-        );
-    }
+                if (!this.is('ready')) {
+                    this.autoStartAt = this.position;
+                }
+                this.loop = !!this.config.loop;
+            }
 
-    if (mediaplayer) {
-        player = {
-            init: function _youtubePlayerInit() {
-                $media = mediaplayer.$media;
-                media = null;
-                destroyed = false;
+            return this;
+        },
 
-                if ($media) {
-                    _youtubeManager.add($media, this, {
-                        controls: mediaplayer.is('nogui')
-                    });
+        /**
+         * Plays the media
+         * @param {Number} [time] - An optional start position in seconds
+         * @returns {mediaplayer}
+         */
+        play(time) {
+            if (this._canPlay()) {
+                if (typeof time !== 'undefined') {
+                    this.seek(time);
                 }
 
-                return !!$media;
-            },
-
-            onReady: function _youtubePlayerOnReady(event) {
-                var callbacks = this._callbacks;
+                this.execute('play');
 
-                media = event.target;
-                $media = $(media.getIframe());
-                this._callbacks = null;
+                if (!this.is('ready')) {
+                    this.autoStart = true;
+                }
 
-                if (!destroyed) {
-                    if (_debugMode) {
-                        // install debug logger
-                        loopEvents(function(ev) {
-                            media.addEventListener(ev, function(e) {
-                                window.console.log(ev, e);
-                            });
-                        });
-                    }
+                this.loop = !!this.config.loop;
 
-                    if (initWidth && initHeight) {
-                        this.setSize(initWidth, initHeight);
-                    }
+                if (this.timerId) {
+                    cancelAnimationFrame(this.timerId);
+                }
+            }
 
-                    mediaplayer._onReady();
+            return this;
+        },
 
-                    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();
-                            break;
-
-                        // playing
-                        case 1:
-                            mediaplayer._onPlay();
-                            this.startPolling();
-                            break;
-
-                        // paused
-                        case 2:
-                            mediaplayer._onPause();
-                            break;
-                    }
+        /**
+         * Pauses the media
+         * @param {Number} [time] - An optional time position in seconds
+         * @returns {mediaplayer}
+         */
+        pause(time) {
+            if (this._canPause()) {
+                if (typeof time !== 'undefined') {
+                    this.seek(time);
                 }
-            },
 
-            stopPolling: function _youtubePlayerStopPolling() {
-                if (interval) {
-                    clearInterval(interval);
-                    interval = null;
+                this.execute('pause');
+
+                if (!this.is('ready')) {
+                    this.autoStart = false;
                 }
-            },
+            }
 
-            startPolling: function _youtubePlayerStartPolling() {
-                interval = setInterval(function() {
-                    mediaplayer._onTimeUpdate();
-                }, mediaplayerFactory.youtubePolling);
-            },
+            return this;
+        },
 
-            destroy: function _youtubePlayerDestroy() {
-                destroyed = true;
+        /**
+         * Resumes the media
+         * @returns {mediaplayer}
+         */
+        resume() {
+            if (this._canResume()) {
+                this.play();
+            }
 
-                if (media) {
-                    loopEvents(function(ev) {
-                        media.removeEventListener(ev);
-                    });
-                    media.destroy();
-                } else {
-                    _youtubeManager.remove($media, this);
-                }
+            return this;
+        },
 
-                this.stopPolling();
+        /**
+         * Stops the playback
+         * @returns {mediaplayer}
+         */
+        stop() {
+            this.loop = false;
+            this.execute('stop');
 
-                $media = null;
-                media = null;
-            },
+            if (!this.is('ready')) {
+                this.autoStart = false;
+            }
 
-            getPosition: function _youtubePlayerGetPosition() {
-                if (media) {
-                    return media.getCurrentTime();
-                }
-                return 0;
-            },
+            return this;
+        },
 
-            getDuration: function _youtubePlayerGetDuration() {
-                if (media) {
-                    return media.getDuration();
-                }
-                return 0;
-            },
+        /**
+         * Starts the media
+         * @returns {mediaplayer}
+         */
+        start() {
+            this._setState('preview', true);
+            this._setState('loading', true);
+            this.play();
+        },
 
-            getVolume: function _youtubePlayerGetVolume() {
-                var value = 0;
-                if (media) {
-                    value = (media.getVolume() * _volumeRange) / 100 + _volumeMin;
-                }
-                return value;
-            },
+        /**
+         * Restarts the media from the beginning
+         * @returns {mediaplayer}
+         */
+        restart() {
+            this.play(0);
 
-            setVolume: function _youtubePlayerSetVolume(value) {
-                if (media) {
-                    media.setVolume(((parseFloat(value) - _volumeMin) / _volumeRange) * 100);
-                }
-            },
+            return this;
+        },
 
-            setSize: function _youtubePlayerSetSize(width, height) {
-                if ($media) {
-                    $media.width(width).height(height);
-                }
-                if (media) {
-                    media.setSize(width, height);
-                } else {
-                    initWidth = width;
-                    initHeight = height;
-                }
-            },
+        /**
+         * Rewind the media to the beginning
+         * @returns {mediaplayer}
+         */
+        rewind() {
+            this.seek(0);
 
-            seek: function _youtubePlayerSeek(value) {
-                if (media) {
-                    media.seekTo(parseFloat(value), true);
-                }
-            },
+            return this;
+        },
 
-            play: function _youtubePlayerPlay() {
-                if (media) {
-                    media.playVideo();
-                }
-            },
+        /**
+         * Mutes the media
+         * @param {Boolean} [state] - A flag to set the mute state (default: true)
+         * @returns {mediaplayer}
+         */
+        mute(state) {
+            if (typeof state === 'undefined') {
+                state = true;
+            }
+            this.execute('mute', state);
+            this._setState('muted', state);
 
-            pause: function _youtubePlayerPause() {
-                if (media) {
-                    media.pauseVideo();
-                }
-            },
+            if (!this.is('ready')) {
+                this.startMuted = state;
+            }
 
-            stop: function _youtubePlayerStop() {
-                if (media) {
-                    media.stopVideo();
-                    mediaplayer._onEnd();
-                }
-            },
+            return this;
+        },
 
-            mute: function _youtubePlayerMute(state) {
-                if (media) {
-                    media[state ? 'mute' : 'unMute']();
-                }
-            },
+        /**
+         * Restore the sound of the media after a mute
+         * @returns {mediaplayer}
+         */
+        unmute() {
+            this.mute(false);
 
-            isMuted: function _youtubePlayerIsMuted() {
-                if (media) {
-                    return media.isMuted();
-                }
-                return false;
-            },
-
-            addMedia: function _youtubePlayerSetMedia(url) {
-                var id = _extractYoutubeId(url);
-                var cb =
-                    id &&
-                    function() {
-                        media.cueVideoById(id);
-                    };
-                if (cb) {
-                    if (media) {
-                        cb();
-                    } else {
-                        this._callbacks = this._callbacks || [];
-                        this._callbacks.push(cb);
-                    }
-                    return true;
-                }
-                return false;
-            },
-
-            setMedia: function _youtubePlayerSetMedia(url) {
-                var id = _extractYoutubeId(url);
-                var cb =
-                    id &&
-                    function() {
-                        media.loadVideoById(id);
-                    };
-                if (cb) {
-                    if (media) {
-                        cb();
-                    } else {
-                        this._callbacks = [cb];
-                    }
-                    return true;
-                }
-                return false;
-            }
-        };
-    }
+            return this;
+        },
 
-    return player;
-};
+        /**
+         * 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(value, internal) {
+            this._updateVolume(value, internal);
 
-/**
- * Defines a player object dedicated to native player
- * @param {mediaplayer} mediaplayer
- * @private
- */
-var _nativePlayer = function(mediaplayer) {
-    var $media;
-    var media;
-    var player;
-    var played;
-
-    if (mediaplayer) {
-        player = {
-            init: function _nativePlayerInit() {
-                var result = false;
-                var mediaElem;
-
-                $media = mediaplayer.$media;
-                media = null;
-                played = false;
-
-                if ($media) {
-                    mediaElem = $media.get(0);
-                    if (mediaElem && mediaElem.canPlayType) {
-                        media = mediaElem;
-                        result = true;
-                    }
+            this.execute('setVolume', this.volume);
 
-                    if (!mediaplayer.is('nogui')) {
-                        $media.removeAttr('controls');
-                    }
+            return this;
+        },
 
-                    $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
-                                if (
-                                    media.networkState === HTMLMediaElement.NETWORK_LOADING &&
-                                    mediaplayer.is('playing')
-                                ) {
-                                    mediaplayer.render();
-                                }
-                            }
-                        })
-                        .on('loadedmetadata' + _ns, function() {
-                            if (mediaplayer.is('error')) {
-                                mediaplayer._onRecoverError();
-                            }
-                            mediaplayer._onReady();
-                        });
-
-                    if (_debugMode) {
-                        // install debug logger
-                        _.forEach(
-                            [
-                                'abort',
-                                'canplay',
-                                'canplaythrough',
-                                'canshowcurrentframe',
-                                'dataunavailable',
-                                'durationchange',
-                                'emptied',
-                                'empty',
-                                'ended',
-                                'error',
-                                'loadedfirstframe',
-                                'loadedmetadata',
-                                'loadstart',
-                                'pause',
-                                'play',
-                                'progress',
-                                'ratechange',
-                                'seeked',
-                                'seeking',
-                                'suspend',
-                                'timeupdate',
-                                'volumechange',
-                                'waiting'
-                            ],
-                            function(ev) {
-                                $media.on(ev + _ns, function(e) {
-                                    window.console.log(
-                                        e.type,
-                                        $media && $media.find('source').attr('src'),
-                                        media && media.networkState
-                                    );
-                                });
-                            }
-                        );
-                    }
-                }
+        /**
+         * Gets the sound volume applied to the media being played
+         * @returns {Number} Returns a value between 0 and 100
+         */
+        getVolume() {
+            return this.volume;
+        },
 
-                return result;
-            },
+        /**
+         * Gets the current displayed position inside the media
+         * @returns {Number}
+         */
+        getPosition() {
+            return this.position;
+        },
 
-            destroy: function _nativePlayerDestroy() {
-                if ($media) {
-                    $media.off(_ns).attr('controls', '');
-                }
+        /**
+         * Gets the duration of the media
+         * @returns {Number}
+         */
+        getDuration() {
+            return this.duration;
+        },
 
-                this.stop();
+        /**
+         * Gets the number of times the media has been played
+         * @returns {Number}
+         */
+        getTimesPlayed() {
+            return this.timesPlayed;
+        },
 
-                $media = null;
-                media = null;
-                played = false;
-            },
+        /**
+         * Gets the type of player
+         * @returns {String}
+         */
+        getType() {
+            return this.type;
+        },
 
-            getPosition: function _nativePlayerGetPosition() {
-                if (media) {
-                    return media.currentTime;
+        /**
+         * Gets the DOM container
+         * @returns {jQuery}
+         */
+        getContainer() {
+            if (!this.$container && this.$component) {
+                let $container = this.$component.parent();
+                if ($container.length) {
+                    this.$container = $container;
                 }
-                return 0;
-            },
+            }
+            return this.$container;
+        },
 
-            getDuration: function _nativePlayerGetDuration() {
-                if (media) {
-                    return media.duration;
-                }
-                return 0;
-            },
+        /**
+         * Gets the underlying DOM element
+         * @returns {jQuery}
+         */
+        getElement() {
+            return this.$component;
+        },
 
-            getVolume: function _nativePlayerGetVolume() {
-                var value = 0;
-                if (media) {
-                    value = parseFloat(media.volume) * _volumeRange + _volumeMin;
-                }
-                return value;
-            },
+        /**
+         * Gets the list of media
+         * @returns {Array}
+         */
+        getSources() {
+            return this.config.sources.slice();
+        },
 
-            setVolume: function _nativePlayerSetVolume(value) {
-                if (media) {
-                    media.volume = (parseFloat(value) - _volumeMin) / _volumeRange;
-                }
-            },
+        /**
+         * 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(src, callback) {
+            this._getSource(src, source => {
+                this.config.sources = [source];
 
-            setSize: function _nativePlayerSetSize(width, height) {
-                if ($media) {
-                    $media.width(width).height(height);
+                if (this.is('rendered')) {
+                    this.player.setMedia(source.src, source.type);
                 }
-            },
 
-            seek: function _nativePlayerSeek(value) {
-                if (media) {
-                    media.currentTime = parseFloat(value);
-                    if (!played) {
-                        this.play();
-                    }
+                if (callback) {
+                    callback.call(this, source);
                 }
-            },
+            });
 
-            play: function _nativePlayerPlay() {
-                if (media) {
-                    media.play();
-                }
-            },
+            return this;
+        },
 
-            pause: function _nativePlayerPause() {
-                if (media) {
-                    media.pause();
-                }
-            },
+        /**
+         * 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(src, callback) {
+            this._getSource(src, source => {
+                this.config.sources.push(source);
 
-            stop: function _nativePlayerStop() {
-                if (media && played) {
-                    media.currentTime = media.duration;
+                if (this.is('rendered')) {
+                    this.player.addMedia(source.src, source.type);
                 }
-            },
 
-            mute: function _nativePlayerMute(state) {
-                if (media) {
-                    media.muted = !!state;
+                if (callback) {
+                    callback.call(this, source);
                 }
-            },
-
-            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;
-};
+            return this;
+        },
 
-/**
- * Defines the list of available players
- * @type {Object}
- * @private
- */
-var _players = {
-    audio: _nativePlayer,
-    video: _nativePlayer,
-    youtube: _youtubePlayer
-};
+        /**
+         * Tells if the media is in a particular state
+         * @param {String} state
+         * @returns {Boolean}
+         */
+        is(state) {
+            return !!this.config.is[state];
+        },
 
-/**
- * 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;
-        });
-        _.defaults(this.config, _defaults.options);
-        this._setType(this.config.type || _defaults.type);
-
-        this._reset();
-        this._updateVolumeFromStore();
-        this._initEvents();
-        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);
-                        self._initType();
-                        return false;
-                    }
-                });
-            }
-            if (self.config.renderTo) {
-                _.defer(function() {
-                    self.render();
-                });
+        /**
+         * Changes the size of the player
+         * @param {Number} width
+         * @param {Number} height
+         * @returns {mediaplayer}
+         */
+        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.execute('setSize', width, height);
 
-        return this;
-    },
+            return this;
+        },
 
-    /**
-     * Uninstalls the media player
-     * @returns {mediaplayer}
-     */
-    destroy: function destroy() {
         /**
-         * Triggers a destroy event
-         * @event mediaplayer#destroy
+         * Enables the media player
+         * @returns {mediaplayer}
          */
-        this.trigger('destroy');
-
-        if (this.player) {
-            this.player.destroy();
-        }
-
-        if (this.$component) {
-            this._unbindEvents();
-            this._destroySlider(this.$seekSlider);
-            this._destroySlider(this.$volumeSlider);
+        enable() {
+            this._fromState('disabled');
 
-            this.$component.remove();
-        }
-
-        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();
-        }
-
-        this._initState();
-        this._buildDom();
-        this._updateDuration(0);
-        this._updatePosition(0);
-        this._bindEvents();
-        this._playingState(false, true);
-        this._initPlayer();
-        this._initSize();
-        this.resize(this.config.width, this.config.height);
-        this.config.is.rendered = true;
-
-        if (renderTo) {
-            this.$container = $(renderTo).append(this.$component);
-        }
+            return this;
+        },
 
         /**
-         * Triggers a render event
-         * @event mediaplayer#render
-         * @param {jQuery} $component
+         * Disables the media player
+         * @returns {mediaplayer}
          */
-        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);
-
-            this.execute('seek', this.position);
-
-            if (!this.is('ready')) {
-                this.autoStartAt = this.position;
-            }
-            this.loop = !!this.config.loop;
-        }
+        disable() {
+            this._toState('disabled');
+            this.trigger('disabled');
 
-        return this;
-    },
+            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);
-            }
-
-            this.execute('play');
+        /**
+         * Shows the media player
+         * @returns {mediaplayer}
+         */
+        show() {
+            this._fromState('hidden');
 
-            if (!this.is('ready')) {
-                this.autoStart = true;
-            }
+            return this;
+        },
 
-            this.loop = !!this.config.loop;
+        /**
+         * hides the media player
+         * @returns {mediaplayer}
+         */
+        hide() {
+            this._toState('hidden');
 
-            if (this.timerId) {
-                cancelAnimationFrame(this.timerId);
+            return this;
+        },
+        /**
+         * get media original size
+         * @returns {Object}
+         */
+        getMediaOriginalSize() {
+            if (this.is('youtube')) {
+                return defaults.youtube;
             }
-        }
-
-        return this;
-    },
-
-    /**
-     * 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);
+            if (this.is('video') && this.player) {
+                return this.player.getMediaSize();
             }
-
-            this.execute('pause');
-
-            if (!this.is('ready')) {
-                this.autoStart = false;
-            }
-        }
-
-        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;
+            return {};
+        },
+        /**
+         * Ensures the right media type is set
+         * @param {String} type
+         * @private
+         */
+        _setType(type) {
+            if (type.indexOf('youtube') !== -1) {
+                this.type = 'youtube';
+            } else if (type.indexOf('audio') === 0) {
+                this.type = 'audio';
+            } else {
+                this.type = 'video';
             }
-        }
-        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];
+        /**
+         * Ensures the type is correctly applied
+         * @private
+         */
+        _initType() {
+            const is = this.config.is;
+            is.youtube = 'youtube' === this.type;
+            is.video = 'video' === this.type || 'youtube' === this.type;
+            is.audio = 'audio' === this.type;
+        },
 
-            if (this.is('rendered')) {
-                this.player.setMedia(source.src, source.type);
-            }
+        /**
+         * 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(src, callback) {
+            let source;
+            const done = () => {
+                if (needTypeAdjust(source.type)) {
+                    source.type = getAdjustedType(source);
+                }
 
-            if (callback) {
                 callback.call(this, source);
-            }
-        });
-
-        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) {
-        this._getSource(src, function(source) {
-            this.config.sources.push(source);
+            };
 
-            if (this.is('rendered')) {
-                this.player.addMedia(source.src, source.type);
+            if (_.isString(src)) {
+                source = {
+                    src: src
+                };
+            } else {
+                source = _.clone(src);
             }
 
-            if (callback) {
-                callback.call(this, source);
+            if (!source.type) {
+                if (this.is('youtube')) {
+                    source.type = defaults.type;
+                } else if (this.config.mimeType) {
+                    source.type = this.config.mimeType;
+                }
             }
-        });
-
-        return this;
-    },
-
-    /**
-     * Tells if the media is in a particular state
-     * @param {String} state
-     * @returns {Boolean}
-     */
-    is: function is(state) {
-        return !!this.config.is[state];
-    },
-
-    /**
-     * 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();
+            if (!source.type) {
+                mimetype.getResourceType(source.src, (err, type) => {
+                    if (err) {
+                        type = defaults.type;
+                    }
+                    source.type = type;
+                    done();
+                });
+            } else {
+                done();
             }
-        }
-
-        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;
-    },
+        /**
+         * Ensures the sources are correctly set
+         * @param {Function} callback - A function called once all sources have been initialized
+         * @private
+         */
+        _initSources(callback) {
+            const sources = configToSources(this.config);
 
-    /**
-     * Shows the media player
-     * @returns {mediaplayer}
-     */
-    show: function show() {
-        this._fromState('hidden');
+            this.config.sources = [];
 
-        return this;
-    },
+            async.each(
+                sources,
+                (source, cb) => {
+                    this.addSource(source, src => cb(null, src));
+                },
+                callback
+            );
+        },
 
-    /**
-     * hides the media player
-     * @returns {mediaplayer}
-     */
-    hide: function hide() {
-        this._toState('hidden');
-
-        return this;
-    },
+        /**
+         * Installs the events manager onto the instance
+         * @private
+         */
+        _initEvents() {
+            eventifier(this);
 
-    /**
-     * 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';
-        }
-    },
+            const triggerEvent = this.trigger;
+            this.trigger = function trigger(eventName, ...args) {
+                if (this.$component) {
+                    this.$component.trigger(eventName + ns, ...args);
+                }
+                return triggerEvent.call(this, eventName, ...args);
+            };
+        },
 
-    /**
-     * 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;
-    },
+        /**
+         * Ensures the right size is set according to the media type
+         * @private
+         */
+        _initSize() {
+            const type = this.is('video') ? 'video' : 'audio';
+            const mediaConfig = defaults[type] || defaults.video;
 
-    /**
-     * 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.config.width = this.config.width || mediaConfig.width;
+            this.config.height = this.config.height || mediaConfig.height;
 
-        if (_.isString(src)) {
-            source = {
-                src: src
-            };
-        } else {
-            source = _.clone(src);
-        }
-
-        if (this.is('youtube') && !source.type) {
-            source.type = _defaults.type;
-        }
+            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';
+            }
+        },
 
-        if (!source.type) {
-            mimetype.getResourceType(source.src, function(err, type) {
-                if (err) {
-                    type = _defaults.type;
+        /**
+         * Initializes the right player instance
+         * @private
+         */
+        _initPlayer() {
+            const playerFactory = players[this.type];
+            let error;
+
+            if (support.canPlay(this.type)) {
+                if (_.isFunction(playerFactory)) {
+                    const 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', (width, height) => {
+                            if (this.$component) {
+                                this.$component.width(width).height(height);
+                            }
+                        })
+                        .on('ready', () => this._onReady())
+                        .on('play', () => this._onPlay())
+                        .on('pause', () => this._onPause())
+                        .on('timeupdate', () => this._onTimeUpdate())
+                        .on('stalled', () => this._onStalled())
+                        .on('playing', () => this._onPlaying())
+                        .on('end', () => this._onEnd())
+                        .on('error', () => this._onError());
                 }
-                source.type = type;
-                done();
-            });
-        } else {
-            done();
-        }
 
-        function done() {
-            if (_needTypeAdjust(source.type)) {
-                source.type = _getAdjustedType(source);
+                if (this.player) {
+                    error = !this.player.init();
+                } else {
+                    error = true;
+                }
+            } else {
+                error = true;
             }
 
-            if (self.is('youtube')) {
-                source.id = _extractYoutubeId(source.src);
+            this._setState('error', error);
+            this._setState('nogui', !support.canControl());
+            this._setState('preview', this.config.preview);
+            this._setState('loading', !error);
+            if (error) {
+                this._setState('ready', true);
+                this.trigger('ready');
             }
+        },
 
-            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.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);
+        /**
+         * Initializes the player state
+         * @private
+         */
+        _initState() {
+            let isCORS = false;
+            let page;
 
-        triggerEvent = this.trigger;
-        this.trigger = function trigger(eventName) {
-            if (this.$component) {
-                this.$component.trigger(eventName + _ns, _slice.call(arguments, 1));
+            if (!this.is('youtube')) {
+                page = new UrlParser(window.location);
+                isCORS = _.some(this.config.sources, source => !page.sameDomain(source.src));
             }
-            return triggerEvent.apply(this, arguments);
-        };
-    },
 
-    /**
-     * 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._setState('cors', isCORS);
+            this._setState('ready', false);
+        },
 
-        this.config.width = _.parseInt(this.config.width) || defaults.width;
-        this.config.height = _.parseInt(this.config.height) || defaults.height;
-    },
+        /**
+         * Resets the internals attributes
+         * @private
+         */
+        _reset() {
+            this.config.is = {};
+            this._initType();
+
+            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() {
+            const configForTemplate = _.clone(this.config);
+            configForTemplate.type = this.type;
+            this.$component = $(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($elt, value, min, max, vertical) {
+            let 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 = $(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($elt) {
+            if ($elt) {
+                $elt.get(0).destroy();
+            }
+        },
 
-    /**
-     * Binds events onto the rendered player
-     * @private
-     */
-    _bindEvents: function _bindEvents() {
-        var self = this;
-        var overing = false;
+        /**
+         * Binds events onto the rendered player
+         * @private
+         */
+        _bindEvents() {
+            let overing = false;
 
-        this.$component.on('contextmenu' + _ns, function(event) {
-            event.preventDefault();
-        });
+            this.$component.on(`contextmenu${ns}`, event => event.preventDefault());
 
-        this.$controls.on('click' + _ns, '.action', function(event) {
-            var $target = $(event.target);
-            var $action = $target.closest('.action');
-            var id = $action.data('control');
+            this.$controls.on(`click${ns}`, '.action', event => {
+                const $target = $(event.target);
+                const $action = $target.closest('.action');
+                const id = $action.data('control');
 
-            if (_.isFunction(self[id])) {
-                self[id]();
-            }
-        });
+                if (_.isFunction(this[id])) {
+                    this[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);
-        });
-
-        $(document).on('updateVolume' + _ns, function(event, value) {
-            self.setVolume(value);
-        });
-
-        this.$volume.on('change' + _ns, function(event, value) {
-            self.unmute();
-            $(document).trigger('updateVolume' + _ns, value);
-            self.setVolume(value, true);
-        });
-
-        this.$sound.on('mouseover' + _ns, 'a', function() {
-            var position;
-
-            if (!overing && !self.$volumeControl.hasClass('up') && !self.$volumeControl.hasClass('down')) {
-                overing = true;
-                position = self.$controls[0].getBoundingClientRect();
-                if (position && position.top && position.top < volumePositionThreshold) {
-                    self.$volumeControl.addClass('down');
+            this.$player.on(`click${ns}`, event => {
+                const $target = $(event.target);
+                const $action = $target.closest('.action');
+
+                // if action was clicked
+                if ($action.length) {
+                    const id = $action.data('control');
+                    if (_.isFunction(this[id])) {
+                        this[id]();
+                    }
                 } else {
-                    self.$volumeControl.addClass('up');
+                    // default action is toggle play
+                    if (this.is('playing')) {
+                        this.pause();
+                    } else {
+                        this.play();
+                    }
                 }
+            });
 
-                //close the volume control after 15s
-                self.overingTimer = _.delay(function() {
-                    if (self.$volumeControl) {
-                        self.$volumeControl.removeClass('up down');
-                    }
-                    overing = false;
-                }, 15000);
-                self.$volumeControl.one('mouseleave' + _ns, function() {
-                    self.$volumeControl.removeClass('up down');
-                    overing = false;
-                });
-            }
-        });
-    },
+            this.$seek.on(`change${ns}`, (event, value) => {
+                this.seek(value, true);
+            });
 
-    /**
-     * 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);
-        }
+            $(document).on(`updateVolume${ns}`, (event, value) => {
+                this.setVolume(value);
+            });
 
-        $(document).off(_ns);
-    },
+            this.$volume.on(`change${ns}`, (event, value) => {
+                this.unmute();
+                $(document).trigger(`updateVolume${ns}`, value);
+                this.setVolume(value, true);
+            });
 
-    /**
-     * Updates the volume slider
-     * @param {Number} value
-     * @private
-     */
-    _updateVolumeSlider: function _updateVolumeSlider(value) {
-        if (this.$volumeSlider) {
-            this.$volumeSlider.val(value);
-        }
-    },
+            this.$sound.on(`mouseover${ns}`, 'a', () => {
+                let 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._storeVolume(this.volume);
-        if (!internal) {
-            this._updateVolumeSlider(value);
-        }
-    },
+                if (!overing && !this.$volumeControl.hasClass('up') && !this.$volumeControl.hasClass('down')) {
+                    overing = true;
+                    position = this.$controls[0].getBoundingClientRect();
+                    if (position && position.top && position.top < volumePositionThreshold) {
+                        this.$volumeControl.addClass('down');
+                    } else {
+                        this.$volumeControl.addClass('up');
+                    }
 
-    /**
-     * Updates the time slider
-     * @param {Number} value
-     * @private
-     */
-    _updatePositionSlider: function _updatePositionSlider(value) {
-        if (this.$seekSlider) {
-            this.$seekSlider.val(value);
-        }
-    },
+                    //close the volume control after 15s
+                    this.overingTimer = _.delay(() => {
+                        if (this.$volumeControl) {
+                            this.$volumeControl.removeClass('up down');
+                        }
+                        overing = false;
+                    }, 15000);
+                    this.$volumeControl.one(`mouseleave${ns}`, () => {
+                        this.$volumeControl.removeClass('up down');
+                        overing = false;
+                    });
+                }
+            });
+        },
 
-    /**
-     * Updates the time label
-     * @param {Number} value
-     * @private
-     */
-    _updatePositionLabel: function _updatePositionLabel(value) {
-        if (this.$position) {
-            this.$position.text(_timerFormat(value));
-        }
-    },
+        /**
+         * Unbinds events from the rendered player
+         * @private
+         */
+        _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 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)));
+            $(document).off(ns);
+        },
 
-        if (!internal) {
-            this._updatePositionSlider(this.position);
-        }
-        this._updatePositionLabel(this.position);
-    },
+        /**
+         * Updates the volume slider
+         * @param {Number} value
+         * @private
+         */
+        _updateVolumeSlider(value) {
+            if (this.$volumeSlider) {
+                this.$volumeSlider.val(value);
+            }
+        },
 
-    /**
-     * Updates the duration slider
-     * @param {Number} value
-     * @private
-     */
-    _updateDurationSlider: function _updateDurationSlider(value) {
-        if (this.$seekSlider) {
-            this._destroySlider(this.$seekSlider);
-            this.$seekSlider = null;
-        }
+        /**
+         * Updates the displayed volume
+         * @param {Number} value
+         * @param {*} [internal]
+         * @private
+         */
+        _updateVolume(value, internal) {
+            this.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(value)));
+            this._storeVolume(this.volume);
+            if (!internal) {
+                this._updateVolumeSlider(value);
+            }
+        },
 
-        if (value && isFinite(value)) {
-            this.$seekSlider = this._renderSlider(this.$seek, 0, 0, value);
-            this.$seekSlider.attr('disabled', !this.config.canSeek);
-        }
-    },
+        /**
+         * Updates the time slider
+         * @param {Number} value
+         * @private
+         */
+        _updatePositionSlider(value) {
+            if (this.$seekSlider) {
+                this.$seekSlider.val(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 time label
+         * @param {Number} value
+         * @private
+         */
+        _updatePositionLabel(value) {
+            if (this.$position) {
+                this.$position.text(timerFormat(value));
             }
-        }
-    },
+        },
 
-    /**
-     * Updates the displayed duration
-     * @param {Number} value
-     * @private
-     */
-    _updateDuration: function _updateDuration(value) {
-        this.duration = Math.abs(parseFloat(value));
-        this._updateDurationSlider(this.duration);
-        this._updateDurationLabel(this.duration);
-    },
+        /**
+         * Updates the displayed time position
+         * @param {Number} value
+         * @param {*} [internal]
+         * @private
+         */
+        _updatePosition(value, internal) {
+            this.position = Math.max(0, Math.min(this.duration || +Infinity, parseFloat(value)));
 
-    /**
-     * Event called when the media is ready
-     * @private
-     */
-    _onReady: function _onReady() {
-        this._updateDuration(this.player.getDuration());
-        this._setState('ready', true);
-        this._setState('canplay', true);
-        this._setState('canpause', this.config.canPause);
-        this._setState('canseek', this.config.canSeek);
-        this._setState('loading', false);
-
-        /**
-         * Triggers a media ready event
-         * @event mediaplayer#ready
-         */
-        this.trigger('ready');
-
-        // set the initial state
-        this.setVolume(this.volume);
-        this.mute(!!this.startMuted);
-        if (this.autoStartAt) {
-            this.seek(this.autoStartAt);
-        } else if (this.autoStart) {
-            this.play();
-        }
-    },
+            if (!internal && this.duration) {
+                this._updatePositionSlider(this.position);
+            }
+            this._updatePositionLabel(this.position);
+        },
 
-    /**
-     * Update volume in DBIndex store
-     * @param {Number} volume
-     * @private
-     */
-    _storeVolume: function _storeVolume(volume) {
-        return store('mediaVolume').then(function(volumeStore) {
-            volumeStore.setItem('volume', volume);
-        });
-    },
+        /**
+         * Updates the duration slider
+         * @param {Number} value
+         * @private
+         */
+        _updateDurationSlider(value) {
+            if (this.$seekSlider) {
+                this._destroySlider(this.$seekSlider);
+                this.$seekSlider = null;
+            }
 
-    /**
-     * 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 (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(value) {
+            if (this.$duration) {
+                if (value && isFinite(value)) {
+                    this.$duration.text(timerFormat(value)).show();
+                } else {
+                    this.$duration.hide();
                 }
-            });
-    },
+            }
+        },
 
-    /**
-     * Event called when the media throws unrecoverable error
-     * @private
-     */
-    _onError: function _onError() {
-        this._setState('error', true);
-        this._setState('loading', false);
+        /**
+         * Updates the displayed duration
+         * @param {Number|String} value
+         * @private
+         */
+        _updateDuration(value) {
+            const duration = Math.abs(parseFloat(value));
+            if (duration !== this.duration) {
+                this.duration = duration;
+                this._updateDurationSlider(this.duration);
+                this._updateDurationLabel(this.duration);
+            }
+        },
 
         /**
-         * Triggers an unrecoverable media error event
-         * @event mediaplayer#error
+         * Event called when the media is ready
+         * @private
          */
-        this.trigger('error');
-    },
+        _onReady() {
+            if (this.is('error')) {
+                this._setState('error', false);
+            }
 
-    /**
-     * Event called when the media throws recoverable error
-     * @private
-     */
-    _onRecoverError: function _onRecoverError() {
-        this._setState('error', false);
+            const duration = this.player.getDuration();
+            const timePreview = this.config.preview || duration;
+            if (timePreview) {
+                this._updateDuration(duration);
+            }
+            this.setInitialStates();
+
+            /**
+             * Triggers a media ready event
+             * @event mediaplayer#ready
+             */
+            this.trigger('ready');
+
+            // set the initial state
+            this.setVolume(this.volume);
+            this.mute(!!this.startMuted);
+            if (this.autoStartAt) {
+                this.seek(this.autoStartAt);
+            } else if (this.autoStart) {
+                this.play();
+            }
+
+            if (this.config.preview && this.$container && this.config.height && this.config.height !== 'auto') {
+                this._setMaxHeight();
+            }
+        },
 
         /**
-         * Triggers a recoverable media error event
-         * @event mediaplayer#recovererror
+         * Set max height limit for container
+         * using by old media items with defined height.
+         * @private
          */
-        this.trigger('recovererror');
-    },
+        _setMaxHeight() {
+            const $video = this.$container.find('video.video');
+            const controlsHeight = parseInt(window.getComputedStyle(this.$controls[0]).height);
+            const scale = $video.height() / this.config.height;
+            const playerWidth = this.$container.find('.player').width();
+            const videoWidth = $video.width() / scale;
+
+            if (videoWidth > playerWidth) {
+                this.execute('setSize', '100%', 'auto');
+            } else {
+                this.$component.css({ maxHeight: `${this.config.height + controlsHeight}px` });
+                this.execute('setSize', Math.floor(videoWidth), 'auto');
+            }
+        },
 
-    /**
-     * Event called when the media is played
-     * @private
-     */
-    _onPlay: function _onPlay() {
-        this._playingState(true);
+        /**
+         * Update volume in DBIndex store
+         * @param {Number} volume
+         * @returns {Promise}
+         * @private
+         */
+        _storeVolume(volume) {
+            return store('mediaVolume').then(volumeStore => volumeStore.setItem('volume', volume));
+        },
 
         /**
-         * Triggers a media playback event
-         * @event mediaplayer#play
+         * Get volume from DBIndex store
+         * @returns {Promise}
+         * @private
          */
-        this.trigger('play', this.$media[0]);
-    },
+        _updateVolumeFromStore() {
+            return store('mediaVolume')
+                .then(volumeStore => volumeStore.getItem('volume'))
+                .then(volume => {
+                    if (_.isNumber(volume)) {
+                        this.volume = Math.max(volumeMin, Math.min(volumeMax, parseFloat(volume)));
+                        this.setVolume(this.volume);
+                    }
+                });
+        },
 
-    /**
-     * Event called when the media is paused
-     * @private
-     */
-    _onPause: function _onPause() {
-        this._playingState(false);
+        /**
+         * Event called when the media throws unrecoverable error
+         * @private
+         */
+        _onError() {
+            this._setState('error', true);
+            this._setState('loading', false);
+
+            /**
+             * Triggers an unrecoverable media error event
+             * @event mediaplayer#error
+             */
+            this.trigger('error');
+        },
 
         /**
-         * Triggers a media paused event
-         * @event mediaplayer#pause
+         * Event called when the media is played
+         * @private
          */
-        this.trigger('pause');
-    },
+        _onPlay() {
+            this._playingState(true);
+            this._setState('preview', true);
 
-    /**
-     * Event called when the media is ended
-     * @private
-     */
-    _onEnd: function _onEnd() {
-        this.timesPlayed++;
-        this._playingState(false, true);
-        this._updatePosition(0);
+            /**
+             * Triggers a media playback event
+             * @event mediaplayer#play
+             */
+            this.trigger('play', this.player && this.player.getMedia());
+        },
 
-        // disable GUI when the play limit is reached
-        if (this._playLimitReached()) {
-            this._disableGUI();
+        /**
+         * Event called when the media is paused
+         * @private
+         */
+        _onPause() {
+            this._playingState(false);
 
             /**
-             * Triggers a play limit reached event
-             * @event mediaplayer#limitreached
+             * Triggers a media paused event
+             * @event mediaplayer#pause
              */
-            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();
-        }
+            this.trigger('pause');
+        },
 
         /**
-         * Triggers a media ended event
-         * @event mediaplayer#ended
+         * Event called when the media is ended
+         * @private
          */
-        this.trigger('ended');
-    },
+        _onEnd() {
+            this.timesPlayed++;
+            this._playingState(false, true);
+            this._updatePosition(0);
+
+            // disable when the play limit is reached
+            if (this._playLimitReached()) {
+                if (!this.is('disabled')) {
+                    this.disable();
+                }
+                /**
+                 * Triggers a play limit reached event
+                 * @event mediaplayer#limitreached
+                 */
+                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();
+            }
 
-    /**
-     * Event called when the time position has changed
-     * @private
-     */
-    _onTimeUpdate: function _onTimeUpdate() {
-        this._updatePosition(this.player.getPosition());
+            /**
+             * Triggers a media ended event
+             * @event mediaplayer#ended
+             */
+            this.trigger('ended');
+        },
 
         /**
-         * Triggers a media time update event
-         * @event mediaplayer#update
+         * Event called when the playback is playing
+         * @private
          */
-        this.trigger('update');
-    },
+        _onPlaying() {
+            this._setState('preview', true);
+            this._setState('stalled', false);
+            this._setState('ready', true);
+        },
 
-    /**
-     * 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);
+        /**
+         * Event called when the playback is stalled
+         * @private
+         */
+        _onStalled() {
+            this._setState('stalled', true);
+            this._setState('ready', false);
+        },
 
-        this.timerId = requestAnimationFrame(this._replayTimeout.bind(this));
+        /**
+         * Event called when the time position has changed
+         * @private
+         */
+        _onTimeUpdate() {
+            this._updatePosition(this.player.getPosition());
 
-        if (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
-            this._disableGUI();
-            this.disable();
-            cancelAnimationFrame(this.timerId);
-        }
-    },
+            /**
+             * Triggers a media time update event
+             * @event mediaplayer#update
+             */
+            this.trigger('update');
+        },
 
-    /**
-     * Disable the player GUI
-     * @private
-     */
-    _disableGUI: function disableGUI() {
-        this._setState('ready', false);
-        this._setState('canplay', false);
-    },
+        /**
+         * Run a timer to disable the possibility of replaying a media
+         * @private
+         */
+        _replayTimeout() {
+            const nowMs = new window.Date().getTime(),
+                elapsedSeconds = Math.floor((nowMs - this.replayTimeoutStartMs) / 1000);
 
-    /**
-     * Checks if the play limit has been reached
-     * @returns {Boolean}
-     * @private
-     */
-    _playLimitReached: function _playLimitReached() {
-        return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
-    },
+            this.timerId = requestAnimationFrame(this._replayTimeout.bind(this));
 
-    /**
-     * 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();
-    },
+            if (elapsedSeconds >= parseInt(this.config.replayTimeout, 10)) {
+                this.disable();
+                cancelAnimationFrame(this.timerId);
+            }
+        },
 
-    /**
-     * Checks if the media can be paused
-     * @returns {Boolean}
-     * @private
-     */
-    _canPause: function _canPause() {
-        return !!this.config.canPause;
-    },
+        /**
+         * Checks if the play limit has been reached
+         * @returns {Boolean}
+         * @private
+         */
+        _playLimitReached() {
+            return this.config.maxPlays && this.timesPlayed >= this.config.maxPlays;
+        },
 
-    /**
-     * Checks if the media can be sought
-     * @returns {Boolean}
-     * @private
-     */
-    _canSeek: function _canSeek() {
-        return !!this.config.canSeek;
-    },
+        /**
+         * Checks if the media can be played
+         * @returns {Boolean}
+         * @private
+         */
+        _canPlay() {
+            return (
+                (this.is('ready') || this.is('stalled')) &&
+                !this.is('disabled') &&
+                !this.is('hidden') &&
+                !this._playLimitReached()
+            );
+        },
 
-    /**
-     * Checks if the playback can be resumed
-     * @returns {Boolean}
-     * @private
-     */
-    _canResume: function _canResume() {
-        return this.is('paused') && this._canPlay();
-    },
+        /**
+         * Checks if the media can be paused
+         * @returns {Boolean}
+         * @private
+         */
+        _canPause() {
+            return !!this.config.canPause;
+        },
 
-    /**
-     * Sets the media is in a particular state
-     * @param {String} name
-     * @param {Boolean} value
-     * @returns {mediaplayer}
-     */
-    _setState: function _setState(name, value) {
-        value = !!value;
+        /**
+         * Checks if the media can be sought
+         * @returns {Boolean}
+         * @private
+         */
+        _canSeek() {
+            return !!this.config.canSeek;
+        },
 
-        this.config.is[name] = value;
+        /**
+         * Checks if the playback can be resumed
+         * @returns {Boolean}
+         * @private
+         */
+        _canResume() {
+            return this.is('paused') && this._canPlay();
+        },
 
-        if (this.$component) {
-            this.$component.toggleClass(name, value);
-        }
+        /**
+         * Sets the media is in a particular state
+         * @param {String} name
+         * @param {Boolean} value
+         * @returns {mediaplayer}
+         */
+        _setState(name, value) {
+            value = !!value;
 
-        return this;
-    },
+            this.config.is[name] = value;
 
-    /**
-     * 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();
+            if (this.$component) {
+                this.$component.toggleClass(name, value);
+            }
 
-        return this;
-    },
+            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();
-        this._setState(stateName, true);
+        /**
+         * Restores the media player from a particular state and resumes the playback
+         * @param {String} stateName
+         * @returns {mediaplayer}
+         * @private
+         */
+        _fromState(stateName) {
+            this._setState(stateName, false);
+            this.resume();
 
-        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);
-        this._setState('paused', !state);
-        this._setState('ended', !!ended);
+        /**
+         * Sets the media player to a particular state and pauses the playback
+         * @param {String} stateName
+         * @returns {mediaplayer}
+         * @private
+         */
+        _toState(stateName) {
+            this.pause();
+            this._setState(stateName, true);
 
-        return this;
-    },
+            return this;
+        },
 
-    /**
-     * 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];
+        /**
+         * Sets the playing state
+         * @param {Boolean} state
+         * @param {Boolean} [ended]
+         * @returns {mediaplayer}
+         * @private
+         */
+        _playingState(state, ended) {
+            this._setState('playing', !!state);
+            this._setState('paused', !state);
+            this._setState('ended', !!ended);
 
-        if (_.isFunction(method)) {
-            return method.apply(ctx, _slice.call(arguments, 1));
+            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(command, ...args) {
+            if (this.player && 'function' === typeof this.player[command]) {
+                return this.player[command](...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
@@ -2251,7 +1574,7 @@ var mediaplayerFactory = function mediaplayerFactory(config) {
  * @type {Boolean}
  */
 mediaplayerFactory.canPlay = function canPlay(type, mime) {
-    return _support.canPlay(type, mime);
+    return support.canPlay(type, mime);
 };
 
 /**
@@ -2260,7 +1583,7 @@ mediaplayerFactory.canPlay = function canPlay(type, mime) {
  * @type {Boolean}
  */
 mediaplayerFactory.canPlayAudio = function canPlayAudio(mime) {
-    return _support.canPlayAudio(mime);
+    return support.canPlayAudio(mime);
 };
 
 /**
@@ -2269,7 +1592,7 @@ mediaplayerFactory.canPlayAudio = function canPlayAudio(mime) {
  * @type {Boolean}
  */
 mediaplayerFactory.canPlayVideo = function canPlayVideo(mime) {
-    return _support.canPlayVideo(mime);
+    return support.canPlayVideo(mime);
 };
 
 /**
@@ -2277,14 +1600,7 @@ mediaplayerFactory.canPlayVideo = function canPlayVideo(mime) {
  * @returns {Boolean}
  */
 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;
-
 export default mediaplayerFactory;