diff --git a/src/js/player.js b/src/js/player.js index 0118c985d7..b95606bf09 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -44,6 +44,86 @@ import './tracks/text-track-settings.js'; // Import Html5 tech, at least for disposing the original video tag. import './tech/html5.js'; +const TECH_EVENTS_RETRIGGER = [ + /** + * Fired while the user agent is downloading media data + * + * @private + * @method Player.prototype.handleTechProgress_ + */ + 'progress', + /** + * Fires when the loading of an audio/video is aborted + * + * @private + * @method Player.prototype.handleTechAbort_ + */ + 'abort', + /** + * Fires when the browser is intentionally not getting media data + * + * @private + * @method Player.prototype.handleTechSuspend_ + */ + 'suspend', + /** + * Fires when the current playlist is empty + * + * @private + * @method Player.prototype.handleTechEmptied_ + */ + 'emptied', + /** + * Fires when the browser is trying to get media data, but data is not available + * + * @private + * @method Player.prototype.handleTechStalled_ + */ + 'stalled', + /** + * Fires when the browser has loaded meta data for the audio/video + * + * @private + * @method Player.prototype.handleTechLoadedmetadata_ + */ + 'loadedmetadata', + /** + * Fires when the browser has loaded the current frame of the audio/video + * + * @private + * @method Player.prototype.handleTechLoaddeddata_ + */ + 'loadeddata', + /** + * Fires when the current playback position has changed + * + * @private + * @method Player.prototype.handleTechTimeUpdate_ + */ + 'timeupdate', + /** + * Fires when the playing speed of the audio/video is changed + * + * @private + * @method Player.prototype.handleTechRatechange_ + */ + 'ratechange', + /** + * Fires when the volume has been changed + * + * @private + * @method Player.prototype.handleTechVolumechange_ + */ + 'volumechange', + /** + * Fires when the text track has been changed + * + * @private + * @method Player.prototype.handleTechTexttrackchange_ + */ + 'texttrackchange' +]; + /** * An instance of the `Player` class is created when any of the Video.js setup methods are used to initialize a video. * ```js @@ -60,20 +140,10 @@ import './tech/html5.js'; * @param {Element} tag The original video tag used for configuring options * @param {Object=} options Object of option names and values * @param {Function=} ready Ready callback function - * @extends Component * @class Player */ class Player extends Component { - /** - * player's constructor function - * - * @constructs - * @method init - * @param {Element} tag The original video tag used for configuring options - * @param {Object=} options Player options - * @param {Function=} ready Ready callback function - */ constructor(tag, options, ready) { // Make sure tag ID exists tag.id = tag.id || `vjs_video_${Guid.newGUID()}`; @@ -257,8 +327,6 @@ class Player extends Component { * ``` * This is especially helpful if you are dynamically adding and removing videos * to/from the DOM. - * - * @method dispose */ dispose() { this.trigger('dispose'); @@ -291,7 +359,6 @@ class Player extends Component { * Create the component's DOM element * * @return {Element} - * @method createEl */ createEl() { const el = this.el_ = super.createEl('div'); @@ -381,7 +448,6 @@ class Player extends Component { * * @param {Number=} value Value for width * @return {Number} Width when getting - * @method width */ width(value) { return this.dimension('width', value); @@ -392,7 +458,6 @@ class Player extends Component { * * @param {Number=} value Value for height * @return {Number} Height when getting - * @method height */ height(value) { return this.dimension('height', value); @@ -404,7 +469,6 @@ class Player extends Component { * @param {String} dimension Either width or height * @param {Number=} value Value for dimension * @return {Component} - * @method dimension */ dimension(dimension, value) { const privDimension = dimension + '_'; @@ -435,7 +499,6 @@ class Player extends Component { * Add/remove the vjs-fluid class * * @param {Boolean} bool Value of true adds the class, value of false removes the class - * @method fluid */ fluid(bool) { if (bool === undefined) { @@ -456,7 +519,6 @@ class Player extends Component { * * @param {String=} ratio Aspect ratio for player * @return aspectRatio - * @method aspectRatio */ aspectRatio(ratio) { if (ratio === undefined) { @@ -478,8 +540,6 @@ class Player extends Component { /** * Update styles of the player element (height, width and aspect ratio) - * - * @method updateStyleEl_ */ updateStyleEl_() { if (window.VIDEOJS_NO_DYNAMIC_STYLE === true) { @@ -568,7 +628,6 @@ class Player extends Component { * * @param {String} techName Name of the playback technology * @param {String} source Video source - * @method loadTech_ * @private */ loadTech_(techName, source) { @@ -637,6 +696,9 @@ class Player extends Component { textTrackConverter.jsonToTextTracks(this.textTracksJson_ || [], this.tech_); // Listen to all HTML5-defined events and trigger them on the player + TECH_EVENTS_RETRIGGER.forEach((event) => { + this.on(this.tech_, event, this[`handleTech${toTitleCase(event)}_`]); + }); this.on(this.tech_, 'loadstart', this.handleTechLoadStart_); this.on(this.tech_, 'waiting', this.handleTechWaiting_); this.on(this.tech_, 'canplay', this.handleTechCanPlay_); @@ -648,20 +710,9 @@ class Player extends Component { this.on(this.tech_, 'play', this.handleTechPlay_); this.on(this.tech_, 'firstplay', this.handleTechFirstPlay_); this.on(this.tech_, 'pause', this.handleTechPause_); - this.on(this.tech_, 'progress', this.handleTechProgress_); this.on(this.tech_, 'durationchange', this.handleTechDurationChange_); this.on(this.tech_, 'fullscreenchange', this.handleTechFullscreenChange_); this.on(this.tech_, 'error', this.handleTechError_); - this.on(this.tech_, 'suspend', this.handleTechSuspend_); - this.on(this.tech_, 'abort', this.handleTechAbort_); - this.on(this.tech_, 'emptied', this.handleTechEmptied_); - this.on(this.tech_, 'stalled', this.handleTechStalled_); - this.on(this.tech_, 'loadedmetadata', this.handleTechLoadedMetaData_); - this.on(this.tech_, 'loadeddata', this.handleTechLoadedData_); - this.on(this.tech_, 'timeupdate', this.handleTechTimeUpdate_); - this.on(this.tech_, 'ratechange', this.handleTechRateChange_); - this.on(this.tech_, 'volumechange', this.handleTechVolumeChange_); - this.on(this.tech_, 'texttrackchange', this.handleTechTextTrackChange_); this.on(this.tech_, 'loadedmetadata', this.updateStyleEl_); this.on(this.tech_, 'posterchange', this.handleTechPosterChange_); this.on(this.tech_, 'textdata', this.handleTechTextData_); @@ -688,7 +739,6 @@ class Player extends Component { /** * Unload playback technology * - * @method unloadTech_ * @private */ unloadTech_() { @@ -713,7 +763,6 @@ class Player extends Component { * * @param {Object} * @return {Object} The Tech - * @method tech */ tech(safety) { if (safety && safety.IWillNotUseThisInPlugins) { @@ -749,7 +798,6 @@ class Player extends Component { * on any controls will still keep the user active * * @private - * @method addTechControlsListeners_ */ addTechControlsListeners_() { // Make sure to remove all the previous listeners in case we are called multiple times. @@ -777,7 +825,6 @@ class Player extends Component { * Remove the listeners used for click and tap controls. This is needed for * toggling to controls disabled, where a tap/touch should do nothing. * - * @method removeTechControlsListeners_ * @private */ removeTechControlsListeners_() { @@ -793,7 +840,6 @@ class Player extends Component { /** * Player waits for the tech to be ready * - * @method handleTechReady_ * @private */ handleTechReady_() { @@ -828,8 +874,8 @@ class Player extends Component { /** * Fired when the user agent begins looking for media data * + * @event loadstart * @private - * @method handleTechLoadStart_ */ handleTechLoadStart_() { // TODO: Update to use `emptied` event instead. See #1277. @@ -858,7 +904,6 @@ class Player extends Component { * @param {Boolean} hasStarted The value of true adds the class the value of false remove the class * @return {Boolean} Boolean value if has started * @private - * @method hasStarted */ hasStarted(hasStarted) { if (hasStarted !== undefined) { @@ -882,7 +927,6 @@ class Player extends Component { * Fired whenever the media begins or resumes playback * * @private - * @method handleTechPlay_ */ handleTechPlay_() { this.removeClass('vjs-ended'); @@ -900,7 +944,6 @@ class Player extends Component { * Fired whenever the media begins waiting * * @private - * @method handleTechWaiting_ */ handleTechWaiting_() { this.addClass('vjs-waiting'); @@ -913,7 +956,6 @@ class Player extends Component { * which is not consistent between browsers. See #1351 * * @private - * @method handleTechCanPlay_ */ handleTechCanPlay_() { this.removeClass('vjs-waiting'); @@ -925,7 +967,6 @@ class Player extends Component { * which is not consistent between browsers. See #1351 * * @private - * @method handleTechCanPlayThrough_ */ handleTechCanPlayThrough_() { this.removeClass('vjs-waiting'); @@ -937,7 +978,6 @@ class Player extends Component { * which is not consistent between browsers. See #1351 * * @private - * @method handleTechPlaying_ */ handleTechPlaying_() { this.removeClass('vjs-waiting'); @@ -948,7 +988,6 @@ class Player extends Component { * Fired whenever the player is jumping to a new time * * @private - * @method handleTechSeeking_ */ handleTechSeeking_() { this.addClass('vjs-seeking'); @@ -959,7 +998,6 @@ class Player extends Component { * Fired when the player has finished jumping to a new time * * @private - * @method handleTechSeeked_ */ handleTechSeeked_() { this.removeClass('vjs-seeking'); @@ -973,7 +1011,6 @@ class Player extends Component { * prevent playback, use `myPlayer.one('play');` instead. * * @private - * @method handleTechFirstPlay_ */ handleTechFirstPlay_() { // If the first starttime attribute is specified @@ -990,7 +1027,6 @@ class Player extends Component { * Fired whenever the media has been paused * * @private - * @method handleTechPause_ */ handleTechPause_() { this.removeClass('vjs-playing'); @@ -998,21 +1034,11 @@ class Player extends Component { this.trigger('pause'); } - /** - * Fired while the user agent is downloading media data - * - * @private - * @method handleTechProgress_ - */ - handleTechProgress_() { - this.trigger('progress'); - } - /** * Fired when the end of the media resource is reached (currentTime == duration) * + * @event ended * @private - * @method handleTechEnded_ */ handleTechEnded_() { this.addClass('vjs-ended'); @@ -1030,7 +1056,6 @@ class Player extends Component { * Fired when the duration of the media resource is first known or changed * * @private - * @method handleTechDurationChange_ */ handleTechDurationChange_() { this.duration(this.techGet_('duration')); @@ -1041,7 +1066,6 @@ class Player extends Component { * * @param {Object=} event Event object * @private - * @method handleTechClick_ */ handleTechClick_(event) { // We're using mousedown to detect clicks thanks to Flash, but mousedown @@ -1066,7 +1090,6 @@ class Player extends Component { * activity state, which hides and shows the controls. * * @private - * @method handleTechTap_ */ handleTechTap_() { this.userActive(!this.userActive()); @@ -1076,7 +1099,6 @@ class Player extends Component { * Handle touch to start * * @private - * @method handleTechTouchStart_ */ handleTechTouchStart_() { this.userWasActive = this.userActive(); @@ -1086,7 +1108,6 @@ class Player extends Component { * Handle touch to move * * @private - * @method handleTechTouchMove_ */ handleTechTouchMove_() { if (this.userWasActive) { @@ -1098,7 +1119,6 @@ class Player extends Component { * Handle touch to end * * @private - * @method handleTechTouchEnd_ */ handleTechTouchEnd_(event) { // Stop the mouse events from also happening @@ -1109,7 +1129,6 @@ class Player extends Component { * Fired when the player switches in or out of fullscreen mode * * @private - * @method handleFullscreenChange_ */ handleFullscreenChange_() { if (this.isFullscreen()) { @@ -1124,7 +1143,6 @@ class Player extends Component { * use stageclick events triggered from inside the SWF instead * * @private - * @method handleStageClick_ */ handleStageClick_() { this.reportUserActivity(); @@ -1134,7 +1152,6 @@ class Player extends Component { * Handle Tech Fullscreen Change * * @private - * @method handleTechFullscreenChange_ */ handleTechFullscreenChange_(event, data) { if (data) { @@ -1147,7 +1164,6 @@ class Player extends Component { * Fires when an error occurred during the loading of an audio/video * * @private - * @method handleTechError_ */ handleTechError_() { const error = this.tech_.error(); @@ -1155,56 +1171,6 @@ class Player extends Component { this.error(error); } - /** - * Fires when the browser is intentionally not getting media data - * - * @private - * @method handleTechSuspend_ - */ - handleTechSuspend_() { - this.trigger('suspend'); - } - - /** - * Fires when the loading of an audio/video is aborted - * - * @private - * @method handleTechAbort_ - */ - handleTechAbort_() { - this.trigger('abort'); - } - - /** - * Fires when the current playlist is empty - * - * @private - * @method handleTechEmptied_ - */ - handleTechEmptied_() { - this.trigger('emptied'); - } - - /** - * Fires when the browser is trying to get media data, but data is not available - * - * @private - * @method handleTechStalled_ - */ - handleTechStalled_() { - this.trigger('stalled'); - } - - /** - * Fires when the browser has loaded meta data for the audio/video - * - * @private - * @method handleTechLoadedMetaData_ - */ - handleTechLoadedMetaData_() { - this.trigger('loadedmetadata'); - } - handleTechTextData_() { let data = null; @@ -1214,61 +1180,10 @@ class Player extends Component { this.trigger('textdata', data); } - /** - * Fires when the browser has loaded the current frame of the audio/video - * - * @private - * @method handleTechLoadedData_ - */ - handleTechLoadedData_() { - this.trigger('loadeddata'); - } - - /** - * Fires when the current playback position has changed - * - * @private - * @method handleTechTimeUpdate_ - */ - handleTechTimeUpdate_() { - this.trigger('timeupdate'); - } - - /** - * Fires when the playing speed of the audio/video is changed - * - * @private - * @method handleTechRateChange_ - */ - handleTechRateChange_() { - this.trigger('ratechange'); - } - - /** - * Fires when the volume has been changed - * - * @private - * @method handleTechVolumeChange_ - */ - handleTechVolumeChange_() { - this.trigger('volumechange'); - } - - /** - * Fires when the text track has been changed - * - * @private - * @method handleTechTextTrackChange_ - */ - handleTechTextTrackChange_() { - this.trigger('texttrackchange'); - } - /** * Get object for cached values. * * @return {Object} - * @method getCache */ getCache() { return this.cache_; @@ -1280,7 +1195,6 @@ class Player extends Component { * @param {String=} method Method * @param {Object=} arg Argument * @private - * @method techCall_ */ techCall_(method, arg) { // If it's not ready yet, call method when it is @@ -1308,7 +1222,6 @@ class Player extends Component { * @param {String} method Tech method * @return {Method} * @private - * @method techGet_ */ techGet_(method) { if (this.tech_ && this.tech_.isReady_) { @@ -1344,7 +1257,6 @@ class Player extends Component { * ``` * * @return {Player} self - * @method play */ play() { // Only calls the tech's play if we already have a src loaded @@ -1366,7 +1278,6 @@ class Player extends Component { * ``` * * @return {Player} self - * @method pause */ pause() { this.techCall_('pause'); @@ -1381,7 +1292,6 @@ class Player extends Component { * ``` * * @return {Boolean} false if the media is currently playing, or true otherwise - * @method paused */ paused() { // The initial state of paused should be true (in Safari it's actually false) @@ -1395,7 +1305,6 @@ class Player extends Component { * @param {Boolean} isScrubbing True/false the user is scrubbing * @return {Boolean} The scrubbing status when getting * @return {Object} The player when setting - * @method scrubbing */ scrubbing(isScrubbing) { if (isScrubbing !== undefined) { @@ -1425,7 +1334,6 @@ class Player extends Component { * @param {Number|String=} seconds The time to seek to * @return {Number} The time in seconds, when not setting * @return {Player} self, when the current time is set - * @method currentTime */ currentTime(seconds) { if (seconds !== undefined) { @@ -1457,7 +1365,6 @@ class Player extends Component { * * @param {Number} seconds Duration when setting * @return {Number} The duration of the video in seconds when getting - * @method duration */ duration(seconds) { if (seconds === undefined) { @@ -1495,7 +1402,6 @@ class Player extends Component { * Not a native video element function, but useful * * @return {Number} The time remaining in seconds - * @method remainingTime */ remainingTime() { return this.duration() - this.currentTime(); @@ -1521,7 +1427,6 @@ class Player extends Component { * ``` * * @return {Object} A mock TimeRange object (following HTML spec) - * @method buffered */ buffered() { let buffered = this.techGet_('buffered'); @@ -1542,7 +1447,6 @@ class Player extends Component { * (This method isn't in the HTML5 spec, but it's very convenient) * * @return {Number} A decimal between 0 and 1 representing the percent - * @method bufferedPercent */ bufferedPercent() { return bufferedPercent(this.buffered(), this.duration()); @@ -1553,7 +1457,6 @@ class Player extends Component { * This is used in the progress bar to encapsulate all time ranges. * * @return {Number} The end of the last buffered time range - * @method bufferedEnd */ bufferedEnd() { const buffered = this.buffered(); @@ -1580,7 +1483,6 @@ class Player extends Component { * @param {Number} percentAsDecimal The new volume as a decimal percent * @return {Number} The current volume when getting * @return {Player} self when setting - * @method volume */ volume(percentAsDecimal) { let vol; @@ -1611,7 +1513,6 @@ class Player extends Component { * @param {Boolean=} muted True to mute, false to unmute * @return {Boolean} True if mute is on, false if not when getting * @return {Player} self when setting mute - * @method muted */ muted(muted) { if (muted !== undefined) { @@ -1627,7 +1528,6 @@ class Player extends Component { * Check to see if fullscreen is supported * * @return {Boolean} - * @method supportsFullScreen */ supportsFullScreen() { return this.techGet_('supportsFullScreen') || false; @@ -1648,7 +1548,6 @@ class Player extends Component { * @param {Boolean=} isFS Update the player's fullscreen state * @return {Boolean} true if fullscreen false if not when getting * @return {Player} self when setting - * @method isFullscreen */ isFullscreen(isFS) { if (isFS !== undefined) { @@ -1671,7 +1570,6 @@ class Player extends Component { * Safari. * * @return {Player} self - * @method requestFullscreen */ requestFullscreen() { const fsApi = FullscreenApi; @@ -1721,7 +1619,6 @@ class Player extends Component { * ``` * * @return {Player} self - * @method exitFullscreen */ exitFullscreen() { const fsApi = FullscreenApi; @@ -1743,8 +1640,6 @@ class Player extends Component { /** * When fullscreen isn't supported we can stretch the video container to as wide as the browser will let us. - * - * @method enterFullWindow */ enterFullWindow() { this.isFullWindow = true; @@ -1768,7 +1663,6 @@ class Player extends Component { * Check for call to either exit full window or full screen on ESC key * * @param {String} event Event to check for key press - * @method fullWindowOnEscKey */ fullWindowOnEscKey(event) { if (event.keyCode === 27) { @@ -1782,8 +1676,6 @@ class Player extends Component { /** * Exit full window - * - * @method exitFullWindow */ exitFullWindow() { this.isFullWindow = false; @@ -1805,7 +1697,6 @@ class Player extends Component { * * @param {String} type The mimetype to check * @return {String} 'probably', 'maybe', or '' (empty string) - * @method canPlayType */ canPlayType(type) { let can; @@ -1847,7 +1738,6 @@ class Player extends Component { * * @param {Array} sources The sources for a media asset * @return {Object|Boolean} Object of source and tech order, otherwise false - * @method selectSource */ selectSource(sources) { // Get only the techs specified in `techOrder` that exist and are supported by the @@ -1942,7 +1832,6 @@ class Player extends Component { * @param {String|Object|Array=} source The source URL, object, or array of sources * @return {String} The current video source when getting * @return {String} The player when setting - * @method src */ src(source) { if (source === undefined) { @@ -2012,7 +1901,6 @@ class Player extends Component { * * @param {Array} sources Array of source objects * @private - * @method sourceList_ */ sourceList_(sources) { const sourceTech = this.selectSource(sources); @@ -2041,7 +1929,6 @@ class Player extends Component { * Begin loading the src data. * * @return {Player} Returns the player - * @method load */ load() { this.techCall_('load'); @@ -2053,7 +1940,6 @@ class Player extends Component { * and calls `reset` on the tech`. * * @return {Player} Returns the player - * @method reset */ reset() { this.loadTech_(toTitleCase(this.options_.techOrder[0]), null); @@ -2066,7 +1952,6 @@ class Player extends Component { * Can be used in conjuction with `currentType` to assist in rebuilding the current source object. * * @return {String} The current source - * @method currentSrc */ currentSrc() { return this.techGet_('currentSrc') || this.cache_.src || ''; @@ -2078,7 +1963,6 @@ class Player extends Component { * source and tech later * * @return {String} The source MIME type - * @method currentType */ currentType() { return this.currentType_ || ''; @@ -2090,7 +1974,6 @@ class Player extends Component { * @param {Boolean} value Boolean to determine if preload should be used * @return {String} The preload attribute value when getting * @return {Player} Returns the player when setting - * @method preload */ preload(value) { if (value !== undefined) { @@ -2107,7 +1990,6 @@ class Player extends Component { * @param {Boolean} value Boolean to determine if video should autoplay * @return {String} The autoplay attribute value when getting * @return {Player} Returns the player when setting - * @method autoplay */ autoplay(value) { if (value !== undefined) { @@ -2124,7 +2006,6 @@ class Player extends Component { * @param {Boolean} value Boolean to determine if video should loop * @return {String} The loop attribute value when getting * @return {Player} Returns the player when setting - * @method loop */ loop(value) { if (value !== undefined) { @@ -2149,7 +2030,6 @@ class Player extends Component { * @param {String=} src Poster image source URL * @return {String} poster URL when getting * @return {Player} self when setting - * @method poster */ poster(src) { if (src === undefined) { @@ -2183,7 +2063,6 @@ class Player extends Component { * the normal APIs. * * @private - * @method handleTechPosterChange_ */ handleTechPosterChange_() { if (!this.poster_ && this.tech_ && this.tech_.poster) { @@ -2199,7 +2078,6 @@ class Player extends Component { * * @param {Boolean} bool Set controls to showing or not * @return {Boolean} Controls are showing - * @method controls */ controls(bool) { if (bool !== undefined) { @@ -2246,7 +2124,6 @@ class Player extends Component { * @param {Boolean} bool True signals that native controls are on * @return {Player} Returns the player * @private - * @method usingNativeControls */ usingNativeControls(bool) { if (bool !== undefined) { @@ -2292,7 +2169,6 @@ class Player extends Component { * @param {*} err A MediaError or a String/Number to be turned into a MediaError * @return {MediaError|null} when getting * @return {Player} when setting - * @method error */ error(err) { if (err === undefined) { @@ -2324,42 +2200,10 @@ class Player extends Component { return this; } - /** - * Returns whether or not the player is in the "ended" state. - * - * @return {Boolean} True if the player is in the ended state, false if not. - * @method ended - */ - ended() { - return this.techGet_('ended'); - } - - /** - * Returns whether or not the player is in the "seeking" state. - * - * @return {Boolean} True if the player is in the seeking state, false if not. - * @method seeking - */ - seeking() { - return this.techGet_('seeking'); - } - - /** - * Returns the TimeRanges of the media that are currently available - * for seeking to. - * - * @return {TimeRanges} the seekable intervals of the media timeline - * @method seekable - */ - seekable() { - return this.techGet_('seekable'); - } - /** * Report user activity * * @param {Object} event Event object - * @method reportUserActivity */ reportUserActivity(event) { this.userActivity_ = true; @@ -2370,7 +2214,6 @@ class Player extends Component { * * @param {Boolean} bool Value when setting * @return {Boolean} Value if user is active user when getting - * @method userActive */ userActive(bool) { if (bool !== undefined) { @@ -2418,7 +2261,6 @@ class Player extends Component { * Listen for user activity based on timeout value * * @private - * @method listenForUserActivity_ */ listenForUserActivity_() { let mouseInProgress; @@ -2510,7 +2352,6 @@ class Player extends Component { * @param {Number} rate New playback rate to set. * @return {Number} Returns the new playback rate when setting * @return {Number} Returns the current playback rate when getting - * @method playbackRate */ playbackRate(rate) { if (rate !== undefined) { @@ -2531,7 +2372,6 @@ class Player extends Component { * @return {Boolean} Returns true if player is audio, false if not when getting * @return {Player} Returns the player if setting * @private - * @method isAudio */ isAudio(bool) { if (bool !== undefined) { @@ -2542,63 +2382,11 @@ class Player extends Component { return !!this.isAudio_; } - /** - * 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 - * @method networkState - */ - networkState() { - return this.techGet_('networkState'); - } - - /** - * 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 - * @method readyState - */ - readyState() { - return this.techGet_('readyState'); - } - /** * Get a video track list * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist * * @return {VideoTrackList} thes current video track list - * @method videoTracks */ videoTracks() { // if we have not yet loadTech_, we create videoTracks_ @@ -2616,7 +2404,6 @@ class Player extends Component { * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist * * @return {AudioTrackList} thes current audio track list - * @method audioTracks */ audioTracks() { // if we have not yet loadTech_, we create videoTracks_ @@ -2629,20 +2416,19 @@ class Player extends Component { return this.tech_.audioTracks(); } - /* - * Text tracks are tracks of timed text events. - * Captions - text displayed over the video for the hearing impaired - * Subtitles - text displayed over the video for those who don't understand language in the video - * Chapters - text displayed in a menu allowing the user to jump to particular points (chapters) in the video - * Descriptions (not supported yet) - audio descriptions that are read back to the user by a screen reading device - */ + /** + * Text tracks are tracks of timed text events. + * Captions - text displayed over the video for the hearing impaired + * Subtitles - text displayed over the video for those who don't understand language in the video + * Chapters - text displayed in a menu allowing the user to jump to particular points (chapters) in the video + * Descriptions (not supported yet) - audio descriptions that are read back to the user by a screen reading device + */ /** * Get an array of associated text tracks. captions, subtitles, chapters, descriptions * http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-texttracks * * @return {Array} Array of track objects - * @method textTracks */ textTracks() { // cannot use techGet_ directly because it checks to see whether the tech is ready. @@ -2656,7 +2442,6 @@ class Player extends Component { * Get an array of remote text tracks * * @return {Array} - * @method remoteTextTracks */ remoteTextTracks() { if (this.tech_) { @@ -2668,7 +2453,6 @@ class Player extends Component { * Get an array of remote html track elements * * @return {HTMLTrackElement[]} - * @method remoteTextTrackEls */ remoteTextTrackEls() { if (this.tech_) { @@ -2684,7 +2468,6 @@ class Player extends Component { * @param {String} kind Captions, subtitles, chapters, descriptions, or metadata * @param {String=} label Optional label * @param {String=} language Optional language - * @method addTextTrack */ addTextTrack(kind, label, language) { if (this.tech_) { @@ -2696,7 +2479,6 @@ class Player extends Component { * Add a remote text track * * @param {Object} options Options for remote text track - * @method addRemoteTextTrack */ addRemoteTextTrack(options) { if (this.tech_) { @@ -2708,7 +2490,6 @@ class Player extends Component { * Remove a remote text track * * @param {Object} track Remote text track to remove - * @method removeRemoteTextTrack */ // destructure the input into an object with a track argument, defaulting to arguments[0] // default the whole argument to an empty object if nothing was passed in @@ -2722,7 +2503,6 @@ class Player extends Component { * Get video width * * @return {Number} Video width - * @method videoWidth */ videoWidth() { return this.tech_ && this.tech_.videoWidth && this.tech_.videoWidth() || 0; @@ -2732,7 +2512,6 @@ class Player extends Component { * Get video height * * @return {Number} Video height - * @method videoHeight */ videoHeight() { return this.tech_ && this.tech_.videoHeight && this.tech_.videoHeight() || 0; @@ -2754,7 +2533,6 @@ class Player extends Component { * @param {String} code The locale string * @return {String} The locale string when getting * @return {Player} self when setting - * @method language */ language(code) { if (code === undefined) { @@ -2771,7 +2549,6 @@ class Player extends Component { * Languages specified directly in the player options have precedence * * @return {Array} Array of languages - * @method languages */ languages() { return mergeOptions(Player.prototype.options_.languages, this.languages_); @@ -2781,7 +2558,6 @@ class Player extends Component { * Converts track info to JSON * * @return {Object} JSON object of options - * @method toJSON */ toJSON() { const options = mergeOptions(this.options_); @@ -2837,7 +2613,6 @@ class Player extends Component { * @param {Element} tag The player tag * @return {Array} An array of sources and track objects * @static - * @method getTagSettings */ static getTagSettings(tag) { const baseOptions = { @@ -2882,6 +2657,23 @@ class Player extends Component { return baseOptions; } + /** + * Determine wether or not flexbox is supported + * + * @return {Boolean} wether or not flexbox is supported + */ + flexNotSupported_() { + const elem = document.createElement('i'); + + // Note: We don't actually use flexBasis (or flexOrder), but it's one of the more + // common flex features that we can rely on when checking for flex support. + return !('flexBasis' in elem.style || + 'webkitFlexBasis' in elem.style || + 'mozFlexBasis' in elem.style || + 'msFlexBasis' in elem.style || + // IE10-specific (2012 flex spec) + 'msFlexOrder' in elem.style); + } } /* @@ -2941,49 +2733,126 @@ Player.prototype.options_ = { notSupportedMessage: 'No compatible source was found for this media.' }; -// The following no-op expressions are here only for purposes of documentation. - -/** - * Fired when the user agent begins looking for media data - * - * @event loadstart - */ -Player.prototype.handleTechLoadStart_; // eslint-disable-line - +[ + /** + * Returns whether or not the player is in the "ended" state. + * + * @return {Boolean} True if the player is in the ended state, false if not. + * @method Player.prototype.ended + */ + 'ended', + /** + * Returns whether or not the player is in the "seeking" state. + * + * @return {Boolean} True if the player is in the seeking state, false if not. + * @method Player.prototype.seeking + */ + 'seeking', + /** + * Returns the TimeRanges of the media that are currently available + * for seeking to. + * + * @return {TimeRanges} the seekable intervals of the media timeline + * @method Player.prototype.seekable + */ + 'seekable', + /** + * 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 + * @method Player.prototype.networkState + */ + 'networkState', + /** + * 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 + * @method Player.prototype.readyState + */ + 'readyState' +].forEach(function(fn) { + Player.prototype[fn] = function() { + return this.techGet_(fn); + }; +}); + +TECH_EVENTS_RETRIGGER.forEach(function(event) { + Player.prototype[`handleTech${toTitleCase(event)}_`] = function() { + return this.trigger(event); + }; +}); + +/* document methods */ /** * Fired when the player has initial duration and dimension information * * @event loadedmetadata + * @private + * @method Player.prototype.handleLoadedMetaData_ */ -Player.prototype.handleLoadedMetaData_; // eslint-disable-line /** * Fired when the player receives text data * * @event textdata + * @private + * @method Player.prototype.handleTextData_ */ -Player.prototype.handleTextData_; // eslint-disable-line /** * Fired when the player has downloaded data at the current playback position * * @event loadeddata + * @private + * @method Player.prototype.handleLoadedData_ */ -Player.prototype.handleLoadedData_; // eslint-disable-line /** * Fired when the user is active, e.g. moves the mouse over the player * * @event useractive + * @private + * @method Player.prototype.handleUserActive_ */ -Player.prototype.handleUserActive_; // eslint-disable-line /** * Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction * * @event userinactive + * @private + * @method Player.prototype.handleUserInactive_ */ -Player.prototype.handleUserInactive_; // eslint-disable-line /** * Fired when the current playback position has changed * @@ -2991,42 +2860,25 @@ Player.prototype.handleUserInactive_; // eslint-disable-line * playback technology in use. * * @event timeupdate + * @private + * @method Player.prototype.handleTimeUpdate_ */ -Player.prototype.handleTimeUpdate_; // eslint-disable-line - -/** - * Fired when video playback ends - * - * @event ended - */ -Player.prototype.handleTechEnded_; // eslint-disable-line /** * Fired when the volume changes * * @event volumechange + * @private + * @method Player.prototype.handleVolumeChange_ */ -Player.prototype.handleVolumeChange_; // eslint-disable-line /** * Fired when an error occurs * * @event error + * @private + * @method Player.prototype.handleError_ */ -Player.prototype.handleError_; // eslint-disable-line - -Player.prototype.flexNotSupported_ = function() { - const elem = document.createElement('i'); - - // Note: We don't actually use flexBasis (or flexOrder), but it's one of the more - // common flex features that we can rely on when checking for flex support. - return !('flexBasis' in elem.style || - 'webkitFlexBasis' in elem.style || - 'mozFlexBasis' in elem.style || - 'msFlexBasis' in elem.style || - // IE10-specific (2012 flex spec) - 'msFlexOrder' in elem.style); -}; Component.registerComponent('Player', Player); export default Player;