video.js
Version:
An HTML5 video player that supports HLS and DASH with a common API and skin.
1,482 lines • 65.2 kB
TypeScript
export default Player;
export type PlayerReadyCallback = (this: Player) => void;
/**
* An instance of the `Player` class is created when any of the Video.js setup methods
* are used to initialize a video.
*
* After an instance has been created it can be accessed globally in three ways:
* 1. By calling `videojs.getPlayer('example_video_1');`
* 2. By calling `videojs('example_video_1');` (not recommended)
* 2. By using it directly via `videojs.players.example_video_1;`
*
* @extends Component
* @global
*/
declare class Player extends Component {
/**
* Gets tag settings
*
* @param {Element} tag
* The player tag
*
* @return {Object}
* An object containing all of the settings
* for a player tag
*/
static getTagSettings(tag: Element): any;
/**
* 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 {PlayerReadyCallback} [ready]
* Ready callback function.
*/
constructor(tag: Element, options?: any, ready?: PlayerReadyCallback);
boundDocumentFullscreenChange_: (e: any) => void;
boundFullWindowOnEscKey_: (e: any) => void;
boundUpdateStyleEl_: (e: any) => void;
boundApplyInitTime_: (e: any) => void;
boundUpdateCurrentBreakpoint_: (e: any) => void;
boundHandleTechClick_: (e: any) => void;
boundHandleTechDoubleClick_: (e: any) => void;
boundHandleTechTouchStart_: (e: any) => void;
boundHandleTechTouchMove_: (e: any) => void;
boundHandleTechTouchEnd_: (e: any) => void;
boundHandleTechTap_: (e: any) => void;
boundUpdatePlayerHeightOnAudioOnlyMode_: (e: any) => void;
isFullscreen_: boolean;
log: any;
fsApi_: any;
isPosterFromTech_: boolean;
queuedCallbacks_: any[];
hasStarted_: boolean;
userActive_: boolean;
debugEnabled_: boolean;
audioOnlyMode_: boolean;
audioPosterMode_: boolean;
audioOnlyCache_: {
controlBarHeight: any;
playerHeight: any;
hiddenChildren: any[];
};
tag: Element;
tagAttributes: any;
languages_: {};
/** @type string */
poster_: string;
/** @type {boolean} */
controls_: boolean;
changingSrc_: boolean;
playCallbacks_: any[];
playTerminatedQueue_: any[];
scrubbing_: boolean;
el_: Element;
middleware_: any[];
spatialNavigation: SpatialNavigation;
/**
* 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(): void;
styleEl_: Element;
playerElIngest_: any;
/**
* Create the `Player`'s DOM element.
*
* @return {Element}
* The DOM element that gets created.
*/
createEl(): Element;
fill_: boolean;
fluid_: boolean;
/**
* Get or set the `Player`'s crossOrigin option. For the HTML5 player, this
* sets the `crossOrigin` property on the `<video>` tag to control the CORS
* behavior.
*
* @see [Video Element Attributes]{@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-crossorigin}
*
* @param {string|null} [value]
* The value to set the `Player`'s crossOrigin to. If an argument is
* given, must be one of `'anonymous'` or `'use-credentials'`, or 'null'.
*
* @return {string|null|undefined}
* - The current crossOrigin value of the `Player` when getting.
* - undefined when setting
*/
crossOrigin(value?: string | null): string | null | undefined;
/**
* A getter/setter for the `Player`'s width. Returns the player's configured value.
* To get the current width use `currentWidth()`.
*
* @param {number|string} [value]
* CSS value to set the `Player`'s width to.
*
* @return {number|undefined}
* - The current width of the `Player` when getting.
* - Nothing when setting
*/
width(value?: number | string): number | undefined;
/**
* A getter/setter for the `Player`'s height. Returns the player's configured value.
* To get the current height use `currentheight()`.
*
* @param {number|string} [value]
* CSS value to set the `Player`'s height to.
*
* @return {number|undefined}
* - The current height of the `Player` when getting.
* - Nothing when setting
*/
height(value?: number | string): number | undefined;
/**
* A getter/setter for the `Player`'s width & height.
*
* @param {string} dimension
* This string can be:
* - 'width'
* - 'height'
*
* @param {number|string} [value]
* Value for dimension specified in the first argument.
*
* @return {number}
* The dimension arguments value when getting (width/height).
*/
dimension(dimension: string, value?: number | string): number;
/**
* 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?: boolean): boolean | undefined;
/**
* 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?: boolean): boolean | undefined;
/**
* 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?: string): string | undefined;
aspectRatio_: string;
/**
* Update styles of the `Player` element (height, width and aspect ratio).
*
* @private
* @listens Tech#loadedmetadata
*/
private updateStyleEl_;
/**
* 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
*
* @private
*/
private loadTech_;
techName_: string;
tech_: any;
/**
* Unload and dispose of the current playback {@link Tech}.
*
* @private
*/
private unloadTech_;
textTracksJson_: any[];
/**
* Return a reference to the current {@link Tech}.
* It will print a warning by default about the danger of using the tech directly
* but any argument that is passed in will silence the warning.
*
* @param {*} [safety]
* Anything passed in to silence the warning
*
* @return {Tech}
* The Tech
*/
tech(safety?: any): Tech;
/**
* An object that contains Video.js version.
*
* @typedef {Object} PlayerVersion
*
* @property {string} 'video.js' - Video.js version
*/
/**
* Returns an object with Video.js version.
*
* @return {PlayerVersion}
* An object with Video.js version.
*/
version(): {
/**
* 'video.js' - Video.js version
*/
"": string;
};
/**
* Set up click and touch listeners for the playback element
*
* - On desktops: a click on the video itself will toggle playback
* - On mobile devices: a click on the video toggles controls
* which is done by toggling the user state between active and
* inactive
* - A tap can signal that a user has become active or has become inactive
* e.g. a quick tap on an iPhone movie should reveal the controls. Another
* quick tap should hide them again (signaling the user is in an inactive
* viewing state)
* - In addition to this, we still want the user to be considered inactive after
* a few seconds of inactivity.
*
* > Note: the only part of iOS interaction we can't mimic with this setup
* is a touch and hold on the video element counting as activity in order to
* keep the controls showing, but that shouldn't be an issue. A touch and hold
* on any controls will still keep the user active
*
* @private
*/
private addTechControlsListeners_;
/**
* Remove the listeners used for click and tap controls. This is needed for
* toggling to controls disabled, where a tap/touch should do nothing.
*
* @private
*/
private removeTechControlsListeners_;
/**
* Player waits for the tech to be ready
*
* @private
*/
private handleTechReady_;
/**
* Retrigger the `loadstart` event that was triggered by the {@link Tech}.
*
* @fires Player#loadstart
* @listens Tech#loadstart
* @private
*/
private handleTechLoadStart_;
/**
* Handle autoplay string values, rather than the typical boolean
* values that should be handled by the tech. Note that this is not
* part of any specification. Valid values and what they do can be
* found on the autoplay getter at Player#autoplay()
*/
manualAutoplay_(type: any): Promise<void>;
/**
* Update the internal source caches so that we return the correct source from
* `src()`, `currentSource()`, and `currentSources()`.
*
* > Note: `currentSources` will not be updated if the source that is passed in exists
* in the current `currentSources` cache.
*
*
* @param {Tech~SourceObject} srcObj
* A string or object source to update our caches to.
*/
updateSourceCaches_(srcObj?: string): void;
/**
* *EXPERIMENTAL* Fired when the source is set or changed on the {@link Tech}
* causing the media element to reload.
*
* It will fire for the initial source and each subsequent source.
* This event is a custom event from Video.js and is triggered by the {@link Tech}.
*
* The event object for this event contains a `src` property that will contain the source
* that was available when the event was triggered. This is generally only necessary if Video.js
* is switching techs while the source was being changed.
*
* It is also fired when `load` is called on the player (or media element)
* because the {@link https://html.spec.whatwg.org/multipage/media.html#dom-media-load|specification for `load`}
* says that the resource selection algorithm needs to be aborted and restarted.
* In this case, it is very likely that the `src` property will be set to the
* empty string `""` to indicate we do not know what the source will be but
* that it is changing.
*
* *This event is currently still experimental and may change in minor releases.*
* __To use this, pass `enableSourceset` option to the player.__
*
* @event Player#sourceset
* @type {Event}
* @prop {string} src
* The source url available when the `sourceset` was triggered.
* It will be an empty string if we cannot know what the source is
* but know that the source will change.
*/
/**
* Retrigger the `sourceset` event that was triggered by the {@link Tech}.
*
* @fires Player#sourceset
* @listens Tech#sourceset
* @private
*/
private handleTechSourceset_;
lastSource_: {
player: any;
tech: any;
};
/**
* Add/remove the vjs-has-started class
*
*
* @param {boolean} request
* - true: adds the class
* - false: remove the class
*
* @return {boolean}
* the boolean value of hasStarted_
*/
hasStarted(request: boolean): boolean;
/**
* Fired whenever the media begins or resumes playback
*
* @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play}
* @fires Player#play
* @listens Tech#play
* @private
*/
private handleTechPlay_;
/**
* Retrigger the `ratechange` event that was triggered by the {@link Tech}.
*
* If there were any events queued while the playback rate was zero, fire
* those events now.
*
* @private
* @method Player#handleTechRateChange_
* @fires Player#ratechange
* @listens Tech#ratechange
*/
private handleTechRateChange_;
/**
* Retrigger the `waiting` event that was triggered by the {@link Tech}.
*
* @fires Player#waiting
* @listens Tech#waiting
* @private
*/
private handleTechWaiting_;
/**
* Retrigger the `canplay` event that was triggered by the {@link Tech}.
* > Note: This is not consistent between browsers. See #1351
*
* @fires Player#canplay
* @listens Tech#canplay
* @private
*/
private handleTechCanPlay_;
/**
* Retrigger the `canplaythrough` event that was triggered by the {@link Tech}.
*
* @fires Player#canplaythrough
* @listens Tech#canplaythrough
* @private
*/
private handleTechCanPlayThrough_;
/**
* Retrigger the `playing` event that was triggered by the {@link Tech}.
*
* @fires Player#playing
* @listens Tech#playing
* @private
*/
private handleTechPlaying_;
/**
* Retrigger the `seeking` event that was triggered by the {@link Tech}.
*
* @fires Player#seeking
* @listens Tech#seeking
* @private
*/
private handleTechSeeking_;
/**
* Retrigger the `seeked` event that was triggered by the {@link Tech}.
*
* @fires Player#seeked
* @listens Tech#seeked
* @private
*/
private handleTechSeeked_;
/**
* Retrigger the `pause` event that was triggered by the {@link Tech}.
*
* @fires Player#pause
* @listens Tech#pause
* @private
*/
private handleTechPause_;
/**
* Retrigger the `ended` event that was triggered by the {@link Tech}.
*
* @fires Player#ended
* @listens Tech#ended
* @private
*/
private handleTechEnded_;
/**
* Fired when the duration of the media resource is first known or changed
*
* @listens Tech#durationchange
* @private
*/
private handleTechDurationChange_;
/**
* Handle a click on the media element to play/pause
*
* @param {Event} event
* the event that caused this function to trigger
*
* @listens Tech#click
* @private
*/
private handleTechClick_;
/**
* Handle a double-click on the media element to enter/exit fullscreen,
* or exit documentPictureInPicture mode
*
* @param {Event} event
* the event that caused this function to trigger
*
* @listens Tech#dblclick
* @private
*/
private handleTechDoubleClick_;
/**
* Handle a tap on the media element. It will toggle the user
* activity state, which hides and shows the controls.
*
* @listens Tech#tap
* @private
*/
private handleTechTap_;
/**
* Handle touch to start
*
* @listens Tech#touchstart
* @private
*/
private handleTechTouchStart_;
userWasActive: boolean;
/**
* Handle touch to move
*
* @listens Tech#touchmove
* @private
*/
private handleTechTouchMove_;
/**
* Handle touch to end
*
* @param {Event} event
* the touchend event that triggered
* this function
*
* @listens Tech#touchend
* @private
*/
private handleTechTouchEnd_;
/**
* @private
*/
private toggleFullscreenClass_;
/**
* when the document fschange event triggers it calls this
*/
documentFullscreenChange_(e: any): void;
/**
* Handle Tech Fullscreen Change
*
* @param {Event} event
* the fullscreenchange event that triggered this function
*
* @param {Object} data
* the data that was sent with the event
*
* @private
* @listens Tech#fullscreenchange
* @fires Player#fullscreenchange
*/
private handleTechFullscreenChange_;
handleTechFullscreenError_(event: any, err: any): void;
/**
* @private
*/
private togglePictureInPictureClass_;
/**
* Handle Tech Enter Picture-in-Picture.
*
* @param {Event} event
* the enterpictureinpicture event that triggered this function
*
* @private
* @listens Tech#enterpictureinpicture
*/
private handleTechEnterPictureInPicture_;
/**
* Handle Tech Leave Picture-in-Picture.
*
* @param {Event} event
* the leavepictureinpicture event that triggered this function
*
* @private
* @listens Tech#leavepictureinpicture
*/
private handleTechLeavePictureInPicture_;
/**
* Fires when an error occurred during the loading of an audio/video.
*
* @private
* @listens Tech#error
*/
private handleTechError_;
/**
* Retrigger the `textdata` event that was triggered by the {@link Tech}.
*
* @fires Player#textdata
* @listens Tech#textdata
* @private
*/
private handleTechTextData_;
/**
* Get object for cached values.
*
* @return {Object}
* get the current object cache
*/
getCache(): any;
/**
* Resets the internal cache object.
*
* Using this function outside the player constructor or reset method may
* have unintended side-effects.
*
* @private
*/
private resetCache_;
cache_: {
currentTime: number;
initTime: number;
inactivityTimeout: number;
duration: number;
lastVolume: number;
lastPlaybackRate: number;
media: any;
src: string;
source: {};
sources: any[];
playbackRates: any[];
volume: number;
};
/**
* Pass values to the playback tech
*
* @param {string} [method]
* the method to call
*
* @param {Object} [arg]
* the argument to pass
*
* @private
*/
private techCall_;
/**
* Mediate attempt to call playback tech method
* and return the value of the method called.
*
* @param {string} method
* Tech method
*
* @return {*}
* Value returned by the tech method called, undefined if tech
* is not ready or tech method is not present
*
* @private
*/
private techGet_;
/**
* Attempt to begin playback at the first opportunity.
*
* @return {Promise|undefined}
* Returns a promise if the browser supports Promises (or one
* was passed in as an option). This promise will be resolved on
* the return value of play. If this is undefined it will fulfill the
* promise chain otherwise the promise chain will be fulfilled when
* the promise from play is fulfilled.
*/
play(): Promise<any> | undefined;
/**
* The actual logic for play, takes a callback that will be resolved on the
* return value of play. This allows us to resolve to the play promise if there
* is one on modern browsers.
*
* @private
* @param {Function} [callback]
* The callback that should be called when the techs play is actually called
*/
private play_;
waitToPlay_: (e: any) => void;
/**
* These functions will be run when if play is terminated. If play
* runPlayCallbacks_ is run these function will not be run. This allows us
* to differentiate between a terminated play and an actual call to play.
*/
runPlayTerminatedQueue_(): void;
/**
* When a callback to play is delayed we have to run these
* callbacks when play is actually called on the tech. This function
* runs the callbacks that were delayed and accepts the return value
* from the tech.
*
* @param {undefined|Promise} val
* The return value from the tech.
*/
runPlayCallbacks_(val: undefined | Promise<any>): void;
/**
* Pause the video playback
*/
pause(): void;
/**
* Check if the player is paused or has yet to play
*
* @return {boolean}
* - false: if the media is currently playing
* - true: if media is not currently playing
*/
paused(): boolean;
/**
* Get a TimeRange object representing the current ranges of time that the user
* has played.
*
* @return {TimeRange}
* A time range object that represents all the increments of time that have
* been played.
*/
played(): TimeRange;
/**
* Sets or returns whether or not the user is "scrubbing". Scrubbing is
* when the user has clicked the progress bar handle and is
* dragging it along the progress bar.
*
* @param {boolean} [isScrubbing]
* whether the user is or is not scrubbing
*
* @return {boolean|undefined}
* - The value of scrubbing when getting
* - Nothing when setting
*/
scrubbing(isScrubbing?: boolean): boolean | undefined;
/**
* Get or set the current time (in seconds)
*
* @param {number|string} [seconds]
* The time to seek to in seconds
*
* @return {number|undefined}
* - the current time in seconds when getting
* - Nothing when setting
*/
currentTime(seconds?: number | string): number | undefined;
/**
* Apply the value of initTime stored in cache as currentTime.
*
* @private
*/
private applyInitTime_;
/**
* Normally gets the length in time of the video in seconds;
* in all but the rarest use cases an argument will NOT be passed to the method
*
* > **NOTE**: The video must have started loading before the duration can be
* known, and depending on preload behaviour may not be known until the video starts
* playing.
*
* @fires Player#durationchange
*
* @param {number} [seconds]
* The duration of the video to set in seconds
*
* @return {number|undefined}
* - The duration of the video in seconds when getting
* - Nothing when setting
*/
duration(seconds?: number): number | undefined;
/**
* Calculates how much time is left in the video. Not part
* of the native video API.
*
* @return {number}
* The time remaining in seconds
*/
remainingTime(): number;
/**
* A remaining time function that is intended to be used when
* the time is to be displayed directly to the user.
*
* @return {number}
* The rounded time remaining in seconds
*/
remainingTimeDisplay(): number;
/**
* Get a TimeRange object with an array of the times of the video
* that have been downloaded. If you just want the percent of the
* video that's been downloaded, use bufferedPercent.
*
* @see [Buffered Spec]{@link http://dev.w3.org/html5/spec/video.html#dom-media-buffered}
*
* @return {TimeRange}
* A mock {@link TimeRanges} object (following HTML spec)
*/
buffered(): TimeRange;
/**
* Get the TimeRanges of the media that are currently available
* for seeking to.
*
* @see [Seekable Spec]{@link https://html.spec.whatwg.org/multipage/media.html#dom-media-seekable}
*
* @return {TimeRange}
* A mock {@link TimeRanges} object (following HTML spec)
*/
seekable(): TimeRange;
/**
* Returns whether the player is in the "seeking" state.
*
* @return {boolean} True if the player is in the seeking state, false if not.
*/
seeking(): boolean;
/**
* Returns whether the player is in the "ended" state.
*
* @return {boolean} True if the player is in the ended state, false if not.
*/
ended(): boolean;
/**
* Returns the current state of network activity for the element, from
* the codes in the list below.
* - NETWORK_EMPTY (numeric value 0)
* The element has not yet been initialised. All attributes are in
* their initial states.
* - NETWORK_IDLE (numeric value 1)
* The element's resource selection algorithm is active and has
* selected a resource, but it is not actually using the network at
* this time.
* - NETWORK_LOADING (numeric value 2)
* The user agent is actively trying to download data.
* - NETWORK_NO_SOURCE (numeric value 3)
* The element's resource selection algorithm is active, but it has
* not yet found a resource to use.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#network-states
* @return {number} the current network activity state
*/
networkState(): number;
/**
* Returns a value that expresses the current state of the element
* with respect to rendering the current playback position, from the
* codes in the list below.
* - HAVE_NOTHING (numeric value 0)
* No information regarding the media resource is available.
* - HAVE_METADATA (numeric value 1)
* Enough of the resource has been obtained that the duration of the
* resource is available.
* - HAVE_CURRENT_DATA (numeric value 2)
* Data for the immediate current playback position is available.
* - HAVE_FUTURE_DATA (numeric value 3)
* Data for the immediate current playback position is available, as
* well as enough data for the user agent to advance the current
* playback position in the direction of playback.
* - HAVE_ENOUGH_DATA (numeric value 4)
* The user agent estimates that enough data is available for
* playback to proceed uninterrupted.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-readystate
* @return {number} the current playback rendering state
*/
readyState(): number;
/**
* Get the percent (as a decimal) of the video that's been downloaded.
* This method is not a part of the native HTML video API.
*
* @return {number}
* A decimal between 0 and 1 representing the percent
* that is buffered 0 being 0% and 1 being 100%
*/
bufferedPercent(): number;
/**
* Get the ending time of the last buffered time range
* This is used in the progress bar to encapsulate all time ranges.
*
* @return {number}
* The end of the last buffered time range
*/
bufferedEnd(): number;
/**
* Get or set the current volume of the media
*
* @param {number} [percentAsDecimal]
* The new volume as a decimal percent:
* - 0 is muted/0%/off
* - 1.0 is 100%/full
* - 0.5 is half volume or 50%
*
* @return {number|undefined}
* The current volume as a percent when getting
*/
volume(percentAsDecimal?: number): number | undefined;
/**
* Get the current muted state, or turn mute on or off
*
* @param {boolean} [muted]
* - true to mute
* - false to unmute
*
* @return {boolean|undefined}
* - true if mute is on and getting
* - false if mute is off and getting
* - nothing if setting
*/
muted(muted?: boolean): boolean | undefined;
/**
* Get the current defaultMuted state, or turn defaultMuted on or off. defaultMuted
* indicates the state of muted on initial playback.
*
* ```js
* var myPlayer = videojs('some-player-id');
*
* myPlayer.src("http://www.example.com/path/to/video.mp4");
*
* // get, should be false
* console.log(myPlayer.defaultMuted());
* // set to true
* myPlayer.defaultMuted(true);
* // get should be true
* console.log(myPlayer.defaultMuted());
* ```
*
* @param {boolean} [defaultMuted]
* - true to mute
* - false to unmute
*
* @return {boolean|undefined}
* - true if defaultMuted is on and getting
* - false if defaultMuted is off and getting
* - Nothing when setting
*/
defaultMuted(defaultMuted?: boolean): boolean | undefined;
/**
* Get the last volume, or set it
*
* @param {number} [percentAsDecimal]
* The new last volume as a decimal percent:
* - 0 is muted/0%/off
* - 1.0 is 100%/full
* - 0.5 is half volume or 50%
*
* @return {number|undefined}
* - The current value of lastVolume as a percent when getting
* - Nothing when setting
*
* @private
*/
private lastVolume_;
/**
* Check if current tech can support native fullscreen
* (e.g. with built in controls like iOS)
*
* @return {boolean}
* if native fullscreen is supported
*/
supportsFullScreen(): boolean;
/**
* Check if the player is in fullscreen mode or tell the player that it
* is or is not in fullscreen mode.
*
* > NOTE: As of the latest HTML5 spec, isFullscreen is no longer an official
* property and instead document.fullscreenElement is used. But isFullscreen is
* still a valuable property for internal player workings.
*
* @param {boolean} [isFS]
* Set the players current fullscreen state
*
* @return {boolean|undefined}
* - true if fullscreen is on and getting
* - false if fullscreen is off and getting
* - Nothing when setting
*/
isFullscreen(isFS?: boolean): boolean | undefined;
/**
* Increase the size of the video to full screen
* In some browsers, full screen is not supported natively, so it enters
* "full window mode", where the video fills the browser window.
* In browsers and devices that support native full screen, sometimes the
* browser's default controls will be shown, and not the Video.js custom skin.
* This includes most mobile devices (iOS, Android) and older versions of
* Safari.
*
* @param {Object} [fullscreenOptions]
* Override the player fullscreen options
*
* @fires Player#fullscreenchange
*/
requestFullscreen(fullscreenOptions?: any): Promise<any>;
requestFullscreenHelper_(fullscreenOptions: any): any;
/**
* Return the video to its normal size after having been in full screen mode
*
* @fires Player#fullscreenchange
*/
exitFullscreen(): Promise<any>;
exitFullscreenHelper_(): any;
/**
* When fullscreen isn't supported we can stretch the
* video container to as wide as the browser will let us.
*
* @fires Player#enterFullWindow
*/
enterFullWindow(): void;
isFullWindow: boolean;
docOrigOverflow: any;
/**
* Check for call to either exit full window or
* full screen on ESC key
*
* @param {string} event
* Event to check for key press
*/
fullWindowOnEscKey(event: string): void;
/**
* Exit full window
*
* @fires Player#exitFullWindow
*/
exitFullWindow(): void;
/**
* Get or set disable Picture-in-Picture mode.
*
* @param {boolean} [value]
* - true will disable Picture-in-Picture mode
* - false will enable Picture-in-Picture mode
*/
disablePictureInPicture(value?: boolean): any;
/**
* Check if the player is in Picture-in-Picture mode or tell the player that it
* is or is not in Picture-in-Picture mode.
*
* @param {boolean} [isPiP]
* Set the players current Picture-in-Picture state
*
* @return {boolean|undefined}
* - true if Picture-in-Picture is on and getting
* - false if Picture-in-Picture is off and getting
* - nothing if setting
*/
isInPictureInPicture(isPiP?: boolean): boolean | undefined;
isInPictureInPicture_: boolean;
/**
* Create a floating video window always on top of other windows so that users may
* continue consuming media while they interact with other content sites, or
* applications on their device.
*
* This can use document picture-in-picture or element picture in picture
*
* Set `enableDocumentPictureInPicture` to `true` to use docPiP on a supported browser
* Else set `disablePictureInPicture` to `false` to disable elPiP on a supported browser
*
*
* @see [Spec]{@link https://w3c.github.io/picture-in-picture/}
* @see [Spec]{@link https://wicg.github.io/document-picture-in-picture/}
*
* @fires Player#enterpictureinpicture
*
* @return {Promise}
* A promise with a Picture-in-Picture window.
*/
requestPictureInPicture(): Promise<any>;
/**
* Exit Picture-in-Picture mode.
*
* @see [Spec]{@link https://wicg.github.io/picture-in-picture}
*
* @fires Player#leavepictureinpicture
*
* @return {Promise}
* A promise.
*/
exitPictureInPicture(): Promise<any>;
/**
* Called when this Player receives a hotkey keydown event.
* Supported player-wide hotkeys are:
*
* f - toggle fullscreen
* m - toggle mute
* k or Space - toggle play/pause
*
* @param {Event} event
* The `keydown` event that caused this function to be called.
*/
handleHotkeys(event: Event): void;
/**
* Check whether the player can play a given mimetype
*
* @see https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-navigator-canplaytype
*
* @param {string} type
* The mimetype to check
*
* @return {string}
* 'probably', 'maybe', or '' (empty string)
*/
canPlayType(type: string): string;
/**
* Select source based on tech-order or source-order
* Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
* defaults to tech-order selection
*
* @param {Array} sources
* The sources for a media asset
*
* @return {Object|boolean}
* Object of source and tech order or false
*/
selectSource(sources: any[]): any | boolean;
/**
* Executes source setting and getting logic
*
* @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
* A SourceObject, an array of SourceObjects, or a string referencing
* a URL to a media source. It is _highly recommended_ that an object
* or array of objects is used here, so that source selection
* algorithms can take the `type` into account.
*
* If not provided, this method acts as a getter.
* @param {boolean} [isRetry]
* Indicates whether this is being called internally as a result of a retry
*
* @return {string|undefined}
* If the `source` argument is missing, returns the current source
* URL. Otherwise, returns nothing/undefined.
*/
handleSrc_(source: any, isRetry?: boolean): string | undefined;
resetRetryOnError_: () => void;
/**
* Get or set the video source.
*
* @param {Tech~SourceObject|Tech~SourceObject[]|string} [source]
* A SourceObject, an array of SourceObjects, or a string referencing
* a URL to a media source. It is _highly recommended_ that an object
* or array of objects is used here, so that source selection
* algorithms can take the `type` into account.
*
* If not provided, this method acts as a getter.
*
* @return {string|undefined}
* If the `source` argument is missing, returns the current source
* URL. Otherwise, returns nothing/undefined.
*/
src(source: any): string | undefined;
/**
* Set the source object on the tech, returns a boolean that indicates whether
* there is a tech that can play the source or not
*
* @param {Tech~SourceObject} source
* The source object to set on the Tech
*
* @return {boolean}
* - True if there is no Tech to playback this source
* - False otherwise
*
* @private
*/
private src_;
/**
* Add a <source> element to the <video> element.
*
* @param {string} srcUrl
* The URL of the video source.
*
* @param {string} [mimeType]
* The MIME type of the video source. Optional but recommended.
*
* @return {boolean}
* Returns true if the source element was successfully added, false otherwise.
*/
addSourceElement(srcUrl: string, mimeType?: string): boolean;
/**
* Remove a <source> element from the <video> element by its URL.
*
* @param {string} srcUrl
* The URL of the source to remove.
*
* @return {boolean}
* Returns true if the source element was successfully removed, false otherwise.
*/
removeSourceElement(srcUrl: string): boolean;
/**
* Begin loading the src data.
*/
load(): void;
/**
* Reset the player. Loads the first tech in the techOrder,
* removes all the text tracks in the existing `tech`,
* and calls `reset` on the `tech`.
*/
reset(): void;
doReset_(): void;
/**
* Reset Control Bar's UI by calling sub-methods that reset
* all of Control Bar's components
*/
resetControlBarUI_(): void;
/**
* Reset tech's progress so progress bar is reset in the UI
*/
resetProgressBar_(): void;
/**
* Reset Playback ratio
*/
resetPlaybackRate_(): void;
/**
* Reset Volume bar
*/
resetVolumeBar_(): void;
/**
* Returns all of the current source objects.
*
* @return {Tech~SourceObject[]}
* The current source objects
*/
currentSources(): Tech;
/**
* Returns the current source object.
*
* @return {Tech~SourceObject}
* The current source object
*/
currentSource(): Tech;
/**
* Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
* Can be used in conjunction with `currentType` to assist in rebuilding the current source object.
*
* @return {string}
* The current source
*/
currentSrc(): string;
/**
* Get the current source type e.g. video/mp4
* This can allow you rebuild the current source object so that you could load the same
* source and tech later
*
* @return {string}
* The source MIME type
*/
currentType(): string;
/**
* Get or set the preload attribute
*
* @param {'none'|'auto'|'metadata'} [value]
* Preload mode to pass to tech
*
* @return {string|undefined}
* - The preload attribute value when getting
* - Nothing when setting
*/
preload(value?: "none" | "auto" | "metadata"): string | undefined;
/**
* Get or set the autoplay option. When this is a boolean it will
* modify the attribute on the tech. When this is a string the attribute on
* the tech will be removed and `Player` will handle autoplay on loadstarts.
*
* @param {boolean|'play'|'muted'|'any'} [value]
* - true: autoplay using the browser behavior
* - false: do not autoplay
* - 'play': call play() on every loadstart
* - 'muted': call muted() then play() on every loadstart
* - 'any': call play() on every loadstart. if that fails call muted() then play().
* - *: values other than those listed here will be set `autoplay` to true
*
* @return {boolean|string|undefined}
* - The current value of autoplay when getting
* - Nothing when setting
*/
autoplay(value?: boolean | "play" | "muted" | "any"): boolean | string | undefined;
/**
* Set or unset the playsinline attribute.
* Playsinline tells the browser that non-fullscreen playback is preferred.
*
* @param {boolean} [value]
* - true means that we should try to play inline by default
* - false means that we should use the browser's default playback mode,
* which in most cases is inline. iOS Safari is a notable exception
* and plays fullscreen by default.
*
* @return {string|undefined}
* - the current value of playsinline
* - Nothing when setting
*
* @see [Spec]{@link https://html.spec.whatwg.org/#attr-video-playsinline}
*/
playsinline(value?: boolean): string | undefined;
/**
* Get or set the loop attribute on the video element.
*
* @param {boolean} [value]
* - true means that we should loop the video
* - false means that we should not loop the video
*
* @return {boolean|undefined}
* - The current value of loop when getting
* - Nothing when setting
*/
loop(value?: boolean): boolean | undefined;
/**
* Get or set the poster image source url
*
* @fires Player#posterchange
*
* @param {string} [src]
* Poster image source URL
*
* @return {string|undefined}
* - The current value of poster when getting
* - Nothing when setting
*/
poster(src?: string): string | undefined;
/**
* Some techs (e.g. YouTube) can provide a poster source in an
* asynchronous way. We want the poster component to use this
* poster source so that it covers up the tech's controls.
* (YouTube's play button). However we only want to use this
* source if the player user hasn't set a poster through
* the normal APIs.
*
* @fires Player#posterchange
* @listens Tech#posterchange
* @private
*/
private handleTechPosterChange_;
/**
* Get or set whether or not the controls are showing.
*
* @fires Player#controlsenabled
*
* @param {boolean} [bool]
* - true to turn controls on
* - false to turn controls off
*
* @return {boolean|undefined}
* - The current value of controls when getting
* - Nothing when setting
*/
controls(bool?: boolean): boolean | undefined;
/**
* Toggle native controls on/off. Native controls are the controls built into
* devices (e.g. default iPhone controls) or other techs
* (e.g. Vimeo Controls)
* **This should only be set by the current tech, because only the tech knows
* if it can support native controls**
*
* @fires Player#usingnativecontrols
* @fires Player#usingcustomcontrols
*
* @param {boolean} [bool]
* - true to turn native controls on
* - false to turn native controls off
*
* @return {boolean|undefined}
* - The current value of native controls when getting
* - Nothing when setting
*/
usingNativeControls(bool?: boolean): boolean | undefined;
usingNativeControls_: any;
/**
* Set or get the current MediaError
*
* @fires Player#error
*
* @param {MediaError|string|number} [err]
* A MediaError or a string/number to be turned
* into a MediaError
*
* @return {MediaError|null|undefined}
* - The current MediaError when getting (or null)
* - Nothing when setting
*/
error(err?: MediaError | string | number): MediaError | null | undefined;
error_: MediaError;
/**
* Report user activity
*
* @param {Object} event
* Event object
*/
reportUserActivity(event: any): void;
userActivity_: boolean;
/**
* Get/set if user is active
*
* @fires Player#useractive
* @fires Player#userinactive
*
* @param {boolean} [bool]
* - true if the user is active
* - false if the user is inactive
*
* @return {boolean|undefined}
* - The current value of userActive when getting
* - Nothing when setting
*/
userActive(bool?: boolean): boolean | undefined;
/**
* Listen for user activity based on timeout value
*
* @private
*/
private listenForUserActivity_;
/**
* Gets or sets the current playback rate. A playback rate of
* 1.0 represents normal speed and 0.5 would indicate half-speed
* playback, for instance.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-playbackrate
*
* @param {number} [rate]
* New playback rate to set.
*
* @return {number|undefined}
* - The current playback rate when getting or 1.0
* - Nothing when setting
*/
playbackRate(rate?: number): number | undefined;
/**
* Gets or sets the current default playback rate. A default playback rate of
* 1.0 represents normal speed and 0.5 would indicate half-speed playback, for instance.
* defaultPlaybackRate will only represent what the initial playbackRate of a video was, not
* not the current playbackRate.
*
* @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-defaultplaybackrate
*
* @param {number} [rate]
* New default playback rate to set.
*
* @return {number|undefined}
* - The default playback rate when getting or 1.0
* - Nothing when setting
*/
defaultPlaybackRate(rate?: number): number | undefined;
/**
* Gets or sets the audio flag
*
* @param {boolean} [bool]
* - true signals that this is an audio player
* - false signals that this is not an audio player
*
* @return {boolean|undefined}
* - The current value of isAudio when getting
* - Nothing when setting
*/
isAudio(bool?: boolean): boolean | undefined;
isAudio_: boolean;
updatePlayerHeightOnAudioOnlyMode_(): void;
enableAudioOnlyUI_(): void;
disableAudioOnlyUI_(): void;
/**
* Get the current audioOnlyMode state or set audioOnlyMode to true or false.
*
* Setting this to `true` will hide all player components except the control bar,
* as well as control bar components needed only for video.
*
* @param {boolean} [value]
* The value to set audioOnlyMode to.
*
* @return {Promise|boolean}
* A Promise is returned when setting the state, and a boolean when getting
* the present state
*/
audioOnlyMode(value?: boolean): Promise<any> | boolean;
enablePosterModeUI_(): void;
disablePosterModeUI_(): void;
/**
* Get the current audioPosterMode state or set audioPosterMode to true or false
*
* @param {boolean} [value]
* The value to set audioPosterMode to.
*
* @return {Promise|boolean}
* A Promise is returned when setting the state, and a boolean when getting
* the present state
*/
audioPosterMode(value?: boolean): Promise<any> | boolean;
/**
* A helper method for adding a {@link TextTrack} to our
* {@link TextTrackList}.
*
* In addition to the W3C settings we allow adding additional info through options.
*
* @see http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack
*
* @param {string} [kind]
* the kind of TextTrack you are adding
*
* @param {string} [label]
* the label to give the TextTrack label
*
* @param {string} [language]
* the language to set on the TextTrack
*
* @return {TextTrack|undefined}
* the TextTrack that was added or undefined
* if there is no tech
*/
addTextTrack(kind?: string, label?: string, language?: string): TextTrack | undefined;
/**
* Create a remote {@link TextTrack} and an {@link HTMLTrackEle