/**

* Create an instance of this class.

*

* @param {Element} tag

* The original video DOM element used for configuring options.

*

* @param {Object} [options]

* Object of option names and values.

*

* @param {Component~ReadyCallback} [ready]

* Ready callback function.

*/

constructor(tag, options, ready) {

// Make sure tag ID exists

tag.id = tag.id || options.id || `vjs_video_${Guid.newGUID()}`;

// Set Options

// The options argument overrides options set in the video tag

// which overrides globally set options.

// This latter part coincides with the load order

// (tag must exist before Player)

options = assign(Player.getTagSettings(tag), options);

// Delay the initialization of children because we need to set up

// player properties first, and can't use `this` before `super()`

options.initChildren = false;

// Same with creating the element

options.createEl = false;

// don't auto mixin the evented mixin

options.evented = false;

// we don't want the player to report touch activity on itself

// see enableTouchActivity in Component

options.reportTouchActivity = false;

// If language is not set, get the closest lang attribute

if (!options.language) {

if (typeof tag.closest === 'function') {

const closest = tag.closest('[lang]');

if (closest && closest.getAttribute) {

options.language = closest.getAttribute('lang');

}

} else {

let element = tag;

while (element && element.nodeType === 1) {

if (Dom.getAttributes(element).hasOwnProperty('lang')) {

options.language = element.getAttribute('lang');

break;

}

element = element.parentNode;

}

}

}

// Run base component initializing with new options

super(null, options, ready);

// create logger

this.log = createLogger(this.id_);

// Tracks when a tech changes the poster

this.isPosterFromTech_ = false;

// Holds callback info that gets queued when playback rate is zero

// and a seek is happening

this.queuedCallbacks_ = [];

// Turn off API access because we're loading a new tech that might load asynchronously

this.isReady_ = false;

// Init state hasStarted_

this.hasStarted_ = false;

// Init state userActive_

this.userActive_ = false;

// if the global option object was accidentally blown away by

// someone, bail early with an informative error

if (!this.options_ ||

!this.options_.techOrder ||

!this.options_.techOrder.length) {

throw new Error('No techOrder specified. Did you overwrite ' +

'videojs.options instead of just changing the ' +

'properties you want to override?');

}

// Store the original tag used to set options

this.tag = tag;

// Store the tag attributes used to restore html5 element

this.tagAttributes = tag && Dom.getAttributes(tag);

// Update current language

this.language(this.options_.language);

// Update Supported Languages

if (options.languages) {

// Normalise player option languages to lowercase

const languagesToLower = {};

Object.getOwnPropertyNames(options.languages).forEach(function(name) {

languagesToLower[name.toLowerCase()] = options.languages[name];

});

this.languages_ = languagesToLower;

} else {

this.languages_ = Player.prototype.options_.languages;

}

// Cache for video property values.

this.cache_ = {};

// Set poster

this.poster_ = options.poster || '';

// Set controls

this.controls_ = !!options.controls;

// Set default values for lastVolume

this.cache_.lastVolume = 1;

// Original tag settings stored in options

// now remove immediately so native controls don't flash.

// May be turned back on by HTML5 tech if nativeControlsForTouch is true

tag.controls = false;

tag.removeAttribute('controls');

// the attribute overrides the option

if (tag.hasAttribute('autoplay')) {

this.options_.autoplay = true;

} else {

// otherwise use the setter to validate and

// set the correct value.

this.autoplay(this.options_.autoplay);

}

/*

* Store the internal state of scrubbing

*

* @private

* @return {Boolean} True if the user is scrubbing

*/

this.scrubbing_ = false;

this.el_ = this.createEl();

// Set default value for lastPlaybackRate

this.cache_.lastPlaybackRate = this.defaultPlaybackRate();

// Make this an evented object and use `el_` as its event bus.

evented(this, {eventBusKey: 'el_'});

// We also want to pass the original player options to each component and plugin

// as well so they don't need to reach back into the player for options later.

// We also need to do another copy of this.options_ so we don't end up with

// an infinite loop.

const playerOptionsCopy = mergeOptions(this.options_);

// Load plugins

if (options.plugins) {

const plugins = options.plugins;

Object.keys(plugins).forEach(function(name) {

if (typeof this[name] === 'function') {

this[name](plugins[name]);

} else {

throw new Error(`plugin "${name}" does not exist`);

}

}, this);

}

this.options_.playerOptions = playerOptionsCopy;

this.middleware_ = [];

this.initChildren();

// Set isAudio based on whether or not an audio tag was used

this.isAudio(tag.nodeName.toLowerCase() === 'audio');

// Update controls className. Can't do this when the controls are initially

// set because the element doesn't exist yet.

if (this.controls()) {

this.addClass('vjs-controls-enabled');

} else {

this.addClass('vjs-controls-disabled');

}

// Set ARIA label and region role depending on player type

this.el_.setAttribute('role', 'region');

if (this.isAudio()) {

this.el_.setAttribute('aria-label', this.localize('Audio Player'));

} else {

this.el_.setAttribute('aria-label', this.localize('Video Player'));

}

if (this.isAudio()) {

this.addClass('vjs-audio');

}

if (this.flexNotSupported_()) {

this.addClass('vjs-no-flex');

}

// TODO: Make this smarter. Toggle user state between touching/mousing

// using events, since devices can have both touch and mouse events.

// if (browser.TOUCH_ENABLED) {

// this.addClass('vjs-touch-enabled');

// }

// iOS Safari has broken hover handling

if (!browser.IS_IOS) {

this.addClass('vjs-workinghover');

}

// Make player easily findable by ID

Player.players[this.id_] = this;

// Add a major version class to aid css in plugins

const majorVersion = version.split('.')[0];

this.addClass(`vjs-v${majorVersion}`);

// When the player is first initialized, trigger activity so components

// like the control bar show themselves if needed

this.userActive(true);

this.reportUserActivity();

this.one('play', this.listenForUserActivity_);

this.on('fullscreenchange', this.handleFullscreenChange_);

this.on('stageclick', this.handleStageClick_);

this.breakpoints(this.options_.breakpoints);

this.responsive(this.options_.responsive);

this.changingSrc_ = false;

this.playWaitingForReady_ = false;

this.playOnLoadstart_ = null;

}

/**

* Destroys the video player and does any necessary cleanup.

*

* This is especially helpful if you are dynamically adding and removing videos

* to/from the DOM.

*

* @fires Player#dispose

*/

dispose() {

/**

* Called when the player is being disposed of.

*

* @event Player#dispose

* @type {EventTarget~Event}

*/

this.trigger('dispose');

// prevent dispose from being called twice

this.off('dispose');

if (this.styleEl_ && this.styleEl_.parentNode) {

this.styleEl_.parentNode.removeChild(this.styleEl_);

this.styleEl_ = null;

}

// Kill reference to this player

Player.players[this.id_] = null;

if (this.tag && this.tag.player) {

this.tag.player = null;

}

if (this.el_ && this.el_.player) {

this.el_.player = null;

}

if (this.tech_) {

this.tech_.dispose();

this.isPosterFromTech_ = false;

this.poster_ = '';

}

if (this.playerElIngest_) {

this.playerElIngest_ = null;

}

if (this.tag) {

this.tag = null;

}

middleware.clearCacheForPlayer(this);

// the actual .el_ is removed here

super.dispose();

}

/**

* Create the `Player`'s DOM element.

*

* @return {Element}

* The DOM element that gets created.

*/

createEl() {

let tag = this.tag;

let el;

let playerElIngest = this.playerElIngest_ = tag.parentNode && tag.parentNode.hasAttribute && tag.parentNode.hasAttribute('data-vjs-player');

const divEmbed = this.tag.tagName.toLowerCase() === 'video-js';

if (playerElIngest) {

el = this.el_ = tag.parentNode;

} else if (!divEmbed) {

el = this.el_ = super.createEl('div');

}

// Copy over all the attributes from the tag, including ID and class

// ID will now reference player box, not the video tag

const attrs = Dom.getAttributes(tag);

if (divEmbed) {

el = this.el_ = tag;

tag = this.tag = document.createElement('video');

while (el.children.length) {

tag.appendChild(el.firstChild);

}

if (!Dom.hasClass(el, 'video-js')) {

Dom.addClass(el, 'video-js');

}

el.appendChild(tag);

playerElIngest = this.playerElIngest_ = el;

// move properties over from our custom `video-js` element

// to our new `video` element. This will move things like

// `src` or `controls` that were set via js before the player

// was initialized.

Object.keys(el).forEach((k) => {

tag[k] = el[k];

});

}

// set tabindex to -1 to remove the video element from the focus order

tag.setAttribute('tabindex', '-1');

attrs.tabindex = '-1';

// Workaround for #4583 (JAWS+IE doesn't announce BPB or play button)

// See https://github.com/FreedomScientific/VFO-standards-support/issues/78

// Note that we can't detect if JAWS is being used, but this ARIA attribute

// doesn't change behavior of IE11 if JAWS is not being used

if (IE_VERSION) {

tag.setAttribute('role', 'application');

attrs.role = 'application';

}

// Remove width/height attrs from tag so CSS can make it 100% width/height

tag.removeAttribute('width');

tag.removeAttribute('height');

if ('width' in attrs) {

delete attrs.width;

}

if ('height' in attrs) {

delete attrs.height;

}

Object.getOwnPropertyNames(attrs).forEach(function(attr) {

// don't copy over the class attribute to the player element when we're in a div embed

// the class is already set up properly in the divEmbed case

// and we want to make sure that the `video-js` class doesn't get lost

if (!(divEmbed && attr === 'class')) {

el.setAttribute(attr, attrs[attr]);

}

if (divEmbed) {

tag.setAttribute(attr, attrs[attr]);

}

});

// Update tag id/class for use as HTML5 playback tech

// Might think we should do this after embedding in container so .vjs-tech class

// doesn't flash 100% width/height, but class only applies with .video-js parent

tag.playerId = tag.id;

tag.id += '_html5_api';

tag.className = 'vjs-tech';

// Make player findable on elements

tag.player = el.player = this;

// Default state of video is paused

this.addClass('vjs-paused');

// Add a style element in the player that we'll use to set the width/height

// of the player in a way that's still overrideable by CSS, just like the

// video element

if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {

this.styleEl_ = stylesheet.createStyleElement('vjs-styles-dimensions');

const defaultsStyleEl = Dom.$('.vjs-styles-defaults');

const head = Dom.$('head');

head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);

}

this.fill_ = false;

this.fluid_ = false;

// Pass in the width/height/aspectRatio options which will update the style el

this.width(this.options_.width);

this.height(this.options_.height);

this.fill(this.options_.fill);

this.fluid(this.options_.fluid);

this.aspectRatio(this.options_.aspectRatio);

// Hide any links within the video/audio tag,

// because IE doesn't hide them completely from screen readers.

const links = tag.getElementsByTagName('a');

for (let i = 0; i < links.length; i++) {

const linkEl = links.item(i);

Dom.addClass(linkEl, 'vjs-hidden');

linkEl.setAttribute('hidden', 'hidden');

}

// insertElFirst seems to cause the networkState to flicker from 3 to 2, so

// keep track of the original for later so we can know if the source originally failed

tag.initNetworkState_ = tag.networkState;

// Wrap video tag in div (el/box) container

if (tag.parentNode && !playerElIngest) {

tag.parentNode.insertBefore(el, tag);

}

// insert the tag as the first child of the player element

// then manually add it to the children array so that this.addChild

// will work properly for other components

//

// Breaks iPhone, fixed in HTML5 setup.

Dom.prependTo(tag, el);

this.children_.unshift(tag);

// Set lang attr on player to ensure CSS :lang() in consistent with player

// if it's been set to something different to the doc

this.el_.setAttribute('lang', this.language_);

this.el_ = el;

return el;

}

/**

* A getter/setter for the `Player`'s width. Returns the player's configured value.

* To get the current width use `currentWidth()`.

*

* @param {number} [value]

* The value to set the `Player`'s width to.

*

* @return {number}

* The current width of the `Player` when getting.

*/

width(value) {

return this.dimension('width', value);

}

/**

* A getter/setter for the `Player`'s height. Returns the player's configured value.

* To get the current height use `currentheight()`.

*

* @param {number} [value]

* The value to set the `Player`'s heigth to.

*

* @return {number}

* The current height of the `Player` when getting.

*/

height(value) {

return this.dimension('height', value);

}

/**

* A getter/setter for the `Player`'s width & height.

*

* @param {string} dimension

* This string can be:

* - 'width'

* - 'height'

*

* @param {number} [value]

* Value for dimension specified in the first argument.

*

* @return {number}

* The dimension arguments value when getting (width/height).

*/

dimension(dimension, value) {

const privDimension = dimension + '_';

if (value === undefined) {

return this[privDimension] || 0;

}

if (value === '') {

// If an empty string is given, reset the dimension to be automatic

this[privDimension] = undefined;

this.updateStyleEl_();

return;

}

const parsedVal = parseFloat(value);

if (isNaN(parsedVal)) {

log.error(`Improper value "${value}" supplied for for ${dimension}`);

return;

}

this[privDimension] = parsedVal;

this.updateStyleEl_();

}

/**

* A getter/setter/toggler for the vjs-fluid `className` on the `Player`.

*

* Turning this on will turn off fill mode.

*

* @param {boolean} [bool]

* - A value of true adds the class.

* - A value of false removes the class.

* - No value will be a getter.

*

* @return {boolean|undefined}

* - The value of fluid when getting.

* - `undefined` when setting.

*/

fluid(bool) {

if (bool === undefined) {

return !!this.fluid_;

}

this.fluid_ = !!bool;

if (bool) {

this.addClass('vjs-fluid');

this.fill(false);

} else {

this.removeClass('vjs-fluid');

}

this.updateStyleEl_();

}

/**

* A getter/setter/toggler for the vjs-fill `className` on the `Player`.

*

* Turning this on will turn off fluid mode.

*

* @param {boolean} [bool]

* - A value of true adds the class.

* - A value of false removes the class.

* - No value will be a getter.

*

* @return {boolean|undefined}

* - The value of fluid when getting.

* - `undefined` when setting.

*/

fill(bool) {

if (bool === undefined) {

return !!this.fill_;

}

this.fill_ = !!bool;

if (bool) {

this.addClass('vjs-fill');

this.fluid(false);

} else {

this.removeClass('vjs-fill');

}

}

/**

* Get/Set the aspect ratio

*

* @param {string} [ratio]

* Aspect ratio for player

*

* @return {string|undefined}

* returns the current aspect ratio when getting

*/

/**

* A getter/setter for the `Player`'s aspect ratio.

*

* @param {string} [ratio]

* The value to set the `Player's aspect ratio to.

*

* @return {string|undefined}

* - The current aspect ratio of the `Player` when getting.

* - undefined when setting

*/

aspectRatio(ratio) {

if (ratio === undefined) {

return this.aspectRatio_;

}

// Check for width:height format

if (!(/^\d+\:\d+$/).test(ratio)) {

throw new Error('Improper value supplied for aspect ratio. The format should be width:height, for example 16:9.');

}

this.aspectRatio_ = ratio;

// We're assuming if you set an aspect ratio you want fluid mode,

// because in fixed mode you could calculate width and height yourself.

this.fluid(true);

this.updateStyleEl_();

}

/**

* Update styles of the `Player` element (height, width and aspect ratio).

*

* @private

* @listens Tech#loadedmetadata

*/

updateStyleEl_() {

if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) {

const width = typeof this.width_ === 'number' ? this.width_ : this.options_.width;

const height = typeof this.height_ === 'number' ? this.height_ : this.options_.height;

const techEl = this.tech_ && this.tech_.el();

if (techEl) {

if (width >= 0) {

techEl.width = width;

}

if (height >= 0) {

techEl.height = height;

}

}

return;

}

let width;

let height;

let aspectRatio;

let idClass;

// The aspect ratio is either used directly or to calculate width and height.

if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {

// Use any aspectRatio that's been specifically set

aspectRatio = this.aspectRatio_;

} else if (this.videoWidth() > 0) {

// Otherwise try to get the aspect ratio from the video metadata

aspectRatio = this.videoWidth() + ':' + this.videoHeight();

} else {

// Or use a default. The video element's is 2:1, but 16:9 is more common.

aspectRatio = '16:9';

}

// Get the ratio as a decimal we can use to calculate dimensions

const ratioParts = aspectRatio.split(':');

const ratioMultiplier = ratioParts[1] / ratioParts[0];

if (this.width_ !== undefined) {

// Use any width that's been specifically set

width = this.width_;

} else if (this.height_ !== undefined) {

// Or calulate the width from the aspect ratio if a height has been set

width = this.height_ / ratioMultiplier;

} else {

// Or use the video's metadata, or use the video el's default of 300

width = this.videoWidth() || 300;

}

if (this.height_ !== undefined) {

// Use any height that's been specifically set

height = this.height_;

} else {

// Otherwise calculate the height from the ratio and the width

height = width * ratioMultiplier;

}

// Ensure the CSS class is valid by starting with an alpha character

if ((/^[^a-zA-Z]/).test(this.id())) {

idClass = 'dimensions-' + this.id();

} else {

idClass = this.id() + '-dimensions';

}

// Ensure the right class is still on the player for the style element

this.addClass(idClass);

stylesheet.setTextContent(this.styleEl_, `

.${idClass} {

width: ${width}px;

height: ${height}px;

}

.${idClass}.vjs-fluid {

padding-top: ${ratioMultiplier * 100}%;

}

`);

}

/**

* Load/Create an instance of playback {@link Tech} including element

* and API methods. Then append the `Tech` element in `Player` as a child.

*

* @param {string} techName

* name of the playback technology

*

* @param {string} source

* video source

*