diff --git a/.jshintrc b/.jshintrc index f1a9157487..9487b85dc0 100644 --- a/.jshintrc +++ b/.jshintrc @@ -12,6 +12,7 @@ "undef" : true, "laxbreak" : true, "esnext" : true, + "eqeqeq" : true, "predef" : [ "_V_", "goog", diff --git a/src/js/button.js b/src/js/button.js index 1c370c789c..ac095b164a 100644 --- a/src/js/button.js +++ b/src/js/button.js @@ -69,7 +69,7 @@ class Button extends Component { // KeyPress (document level) - Trigger click when keys are pressed handleKeyPress(event) { // Check for space bar (32) or enter (13) keys - if (event.which == 32 || event.which == 13) { + if (event.which === 32 || event.which === 13) { event.preventDefault(); this.handleClick(); } diff --git a/src/js/component.js b/src/js/component.js index 6562a1b806..8753d73e1e 100644 --- a/src/js/component.js +++ b/src/js/component.js @@ -59,8 +59,7 @@ class Component { // If there was no ID from the options, generate one if (!this.id_) { // Don't require the player ID function in the case of mock players - let id = player.id && player.id() || 'no_player'; - + let id = player && player.id && player.id() || 'no_player'; this.id_ = `${id}_component_${Lib.guid++}`; } @@ -1033,7 +1032,7 @@ class Component { */ enableTouchActivity() { // Don't continue if the root player doesn't support reporting user activity - if (!this.player().reportUserActivity) { + if (!this.player() || !this.player().reportUserActivity) { return; } diff --git a/src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js b/src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js index 65695dcd1c..dde72762d7 100644 --- a/src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js +++ b/src/js/control-bar/playback-rate-menu/playback-rate-menu-item.js @@ -28,7 +28,7 @@ class PlaybackRateMenuItem extends MenuItem { } update() { - this.selected(this.player().playbackRate() == this.rate); + this.selected(this.player().playbackRate() === this.rate); } } diff --git a/src/js/control-bar/progress-control/seek-bar.js b/src/js/control-bar/progress-control/seek-bar.js index 0c18642e8a..620084c942 100644 --- a/src/js/control-bar/progress-control/seek-bar.js +++ b/src/js/control-bar/progress-control/seek-bar.js @@ -50,7 +50,7 @@ class SeekBar extends Slider { let newTime = this.calculateDistance(event) * this.player_.duration(); // Don't let video end while scrubbing. - if (newTime == this.player_.duration()) { newTime = newTime - 0.1; } + if (newTime === this.player_.duration()) { newTime = newTime - 0.1; } // Set new time (tell player to seek to new time) this.player_.currentTime(newTime); diff --git a/src/js/control-bar/text-track-controls/chapters-button.js b/src/js/control-bar/text-track-controls/chapters-button.js index b92995e21d..bbff08a25f 100644 --- a/src/js/control-bar/text-track-controls/chapters-button.js +++ b/src/js/control-bar/text-track-controls/chapters-button.js @@ -48,7 +48,7 @@ class ChaptersButton extends TextTrackButton { for (let i = 0, l = tracks.length; i < l; i++) { let track = tracks[i]; - if (track['kind'] == this.kind_) { + if (track['kind'] === this.kind_) { if (!track.cues) { track['mode'] = 'hidden'; /* jshint loopfunc:true */ diff --git a/src/js/control-bar/text-track-controls/text-track-button.js b/src/js/control-bar/text-track-controls/text-track-button.js index d0d097ddef..6e7fa530ba 100644 --- a/src/js/control-bar/text-track-controls/text-track-button.js +++ b/src/js/control-bar/text-track-controls/text-track-button.js @@ -62,4 +62,4 @@ class TextTrackButton extends MenuButton { } MenuButton.registerComponent('TextTrackButton', TextTrackButton); -export default TextTrackButton; \ No newline at end of file +export default TextTrackButton; diff --git a/src/js/core.js b/src/js/core.js index aa326a3a01..b0ff495309 100644 --- a/src/js/core.js +++ b/src/js/core.js @@ -74,7 +74,7 @@ var videojs = function(id, options, ready){ // CDN Version. Used to target right flash swf. videojs.CDN_VERSION = '__VERSION_NO_PATCH__'; -videojs.ACCESS_PROTOCOL = ('https:' == document.location.protocol ? 'https://' : 'http://'); +videojs.ACCESS_PROTOCOL = ('https:' === document.location.protocol ? 'https://' : 'http://'); /** * Full player version diff --git a/src/js/events.js b/src/js/events.js index 507822b150..04cc0808b9 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -168,7 +168,7 @@ var on = function(elem, type, fn){ }; } - if (data.handlers[type].length == 1) { + if (data.handlers[type].length === 1) { if (elem.addEventListener) { elem.addEventListener(type, data.dispatcher, false); } else if (elem.attachEvent) { diff --git a/src/js/lib.js b/src/js/lib.js index ebcff95ca1..615a4decfe 100644 --- a/src/js/lib.js +++ b/src/js/lib.js @@ -23,7 +23,7 @@ var createEl = function(tagName='div', properties={}){ // add the attribute "role". My guess is because it's not a valid attribute in some namespaces, although // browsers handle the attribute just fine. The W3C allows for aria-* attributes to be used in pre-HTML5 docs. // http://www.w3.org/TR/wai-aria-primer/#ariahtml. Using setAttribute gets around this problem. - if (propName.indexOf('aria-') !== -1 || propName == 'role') { + if (propName.indexOf('aria-') !== -1 || propName === 'role') { el.setAttribute(propName, val); } else { el[propName] = val; @@ -616,10 +616,10 @@ var setLocalStorage = function(key, value){ if (!localStorage) { return; } localStorage[key] = value; } catch(e) { - if (e.code == 22 || e.code == 1014) { // Webkit == 22 / Firefox == 1014 + if (e.code === 22 || e.code === 1014) { // Webkit == 22 / Firefox == 1014 log('LocalStorage Full (VideoJS)', e); } else { - if (e.code == 18) { + if (e.code === 18) { log('LocalStorage not allowed (VideoJS)', e); } else { log('LocalStorage Error (VideoJS)', e); diff --git a/src/js/menu/menu-button.js b/src/js/menu/menu-button.js index 5e02336b04..c2ffc3392a 100644 --- a/src/js/menu/menu-button.js +++ b/src/js/menu/menu-button.js @@ -105,7 +105,7 @@ class MenuButton extends Button { handleKeyPress(event) { // Check for space bar (32) or enter (13) keys - if (event.which == 32 || event.which == 13) { + if (event.which === 32 || event.which === 13) { if (this.buttonPressed_){ this.unpressButton(); } else { @@ -113,7 +113,7 @@ class MenuButton extends Button { } event.preventDefault(); // Check for escape (27) key - } else if (event.which == 27){ + } else if (event.which === 27){ if (this.buttonPressed_){ this.unpressButton(); } diff --git a/src/js/player.js b/src/js/player.js index 34d6510ec6..9340281a02 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -162,6 +162,9 @@ class Player extends Component { this.userActive_ = true; this.reportUserActivity(); this.listenForUserActivity(); + + this.on('fullscreenchange', this.handleFullscreenChange); + this.on('stageclick', this.handleStageClick); } /** @@ -201,7 +204,7 @@ class Player extends Component { Lib.obj.each(attrs, function(attr) { // workaround so we don't totally break IE7 // http://stackoverflow.com/questions/3653444/css-styles-not-applied-on-dynamic-elements-in-internet-explorer-7 - if (attr == 'class') { + if (attr === 'class') { el.className = attrs[attr]; } else { el.setAttribute(attr, attrs[attr]); @@ -234,25 +237,7 @@ class Player extends Component { } Lib.insertFirst(tag, el); // Breaks iPhone, fixed in HTML5 setup. - // The event listeners need to be added before the children are added - // in the component init because the tech (loaded with mediaLoader) may - // fire events, like loadstart, that these events need to capture. - // Long term it might be better to expose a way to do this in component.init - // like component.initEventListeners() that runs between el creation and - // adding children this.el_ = el; - this.on('loadstart', this.handleLoadStart); - this.on('waiting', this.handleWaiting); - this.on(['canplay', 'canplaythrough', 'playing', 'ended'], this.handleWaitEnd); - this.on('seeking', this.handleSeeking); - this.on('seeked', this.handleSeeked); - this.on('ended', this.handleEnded); - this.on('play', this.handlePlay); - this.on('firstplay', this.handleFirstPlay); - this.on('pause', this.handlePause); - this.on('progress', this.handleProgress); - this.on('durationchange', this.handleDurationChange); - this.on('fullscreenchange', this.handleFullscreenChange); return el; } @@ -272,6 +257,7 @@ class Player extends Component { // get rid of the HTML5 video tag as soon as we are using another tech if (techName !== 'Html5' && this.tag) { Component.getComponent('Html5').disposeMediaElement(this.tag); + this.tag.player = null; this.tag = null; } @@ -280,16 +266,24 @@ class Player extends Component { // Turn off API access because we're loading a new tech that might load asynchronously this.isReady_ = false; - var techReady = function(){ - this.player_.triggerReady(); - }; + var techReady = Lib.bind(this, function() { + this.triggerReady(); + }); // Grab tech-specific options from player options and add source and parent element to use. - var techOptions = Lib.obj.merge({ 'source': source, 'parentEl': this.el_ }, this.options_[techName.toLowerCase()]); + var techOptions = Lib.obj.merge({ + 'source': source, + 'playerId': this.id(), + 'textTracks': this.textTracks_ + }, this.options_[techName.toLowerCase()]); + + if (this.tag) { + techOptions.tag = this.tag; + } if (source) { this.currentType_ = source.type; - if (source.src == this.cache_.src && this.cache_.currentTime > 0) { + if (source.src === this.cache_.src && this.cache_.currentTime > 0) { techOptions['startTime'] = this.cache_.currentTime; } @@ -298,12 +292,61 @@ class Player extends Component { // Initialize tech instance let techComponent = Component.getComponent(techName); - this.tech = new techComponent(this, techOptions); + this.tech = new techComponent(techOptions); + + this.on(this.tech, 'ready', this.handleTechReady); + this.on(this.tech, 'usenativecontrols', this.handleTechUseNativeControls); + + // Listen to every HTML5 events and trigger them back on the player for the plugins + this.on(this.tech, 'loadstart', this.handleTechLoadStart); + this.on(this.tech, 'waiting', this.handleTechWaiting); + this.on(this.tech, 'canplay', this.handleTechCanPlay); + this.on(this.tech, 'canplaythrough', this.handleTechCanPlayThrough); + this.on(this.tech, 'playing', this.handleTechPlaying); + this.on(this.tech, 'ended', this.handleTechEnded); + this.on(this.tech, 'seeking', this.handleTechSeeking); + this.on(this.tech, 'seeked', this.handleTechSeeked); + 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.onTextTrackChange); + + if (this.controls() && !this.usingNativeControls()) { + this.addTechControlsListeners(); + } + + // Add the tech element in the DOM if it was not already there + // Make sure to not insert the original video element if using Html5 + if (this.tech.el().parentNode !== this.el() && (techName !== 'Html5' || !this.tag)) { + Lib.insertFirst(this.tech.el(), this.el()); + } + + // Get rid of the original video tag reference after the first tech is loaded + if (this.tag) { + this.tag.player = null; + this.tag = null; + } this.tech.ready(techReady); } unloadTech() { + // Save the current text tracks so that we can reuse the same text tracks with the next tech + this.textTracks_ = this.textTracks(); + this.isReady_ = false; this.tech.dispose(); @@ -311,11 +354,72 @@ class Player extends Component { this.tech = false; } + addTechControlsListeners() { + // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do + // trigger mousedown/up. + // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object + // Any touch events are set to block the mousedown event from happening + this.on(this.tech, 'mousedown', this.handleTechClick); + + // If the controls were hidden we don't want that to change without a tap event + // so we'll check if the controls were already showing before reporting user + // activity + this.on(this.tech, 'touchstart', this.handleTechTouchStart); + this.on(this.tech, 'touchmove', this.handleTechTouchMove); + this.on(this.tech, 'touchend', this.handleTechTouchEnd); + + // Turn on component tap events + this.tech.emitTapEvents(); + + // The tap listener needs to come after the touchend listener because the tap + // listener cancels out any reportedUserActivity when setting userActive(false) + this.on(this.tech, 'tap', this.handleTechTap); + } + + /** + * Remove the listeners used for click and tap controls. This is needed for + * toggling to controls disabled, where a tap/touch should do nothing. + */ + removeTechControlsListeners() { + // We don't want to just use `this.off()` because there might be other needed + // listeners added by techs that extend this. + this.off(this.tech, 'tap', this.handleTechTap); + this.off(this.tech, 'touchstart', this.handleTechTouchStart); + this.off(this.tech, 'touchmove', this.handleTechTouchMove); + this.off(this.tech, 'touchend', this.handleTechTouchEnd); + this.off(this.tech, 'mousedown', this.handleTechClick); + } + + /** + * Player waits for the tech to be ready + * @private + */ + handleTechReady() { + this.triggerReady(); + + // Chrome and Safari both have issues with autoplay. + // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work. + // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays) + // This fixes both issues. Need to wait for API, so it updates displays correctly + if (this.tag && this.options_.autoplay && this.paused()) { + delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16. + this.play(); + } + } + + /** + * Fired when the native controls are used + * @private + */ + handleTechUseNativeControls() { + this.usingNativeControls(true); + } + /** * Fired when the user agent begins looking for media data * @event loadstart */ - handleLoadStart() { + handleTechLoadStart() { // TODO: Update to use `emptied` event instead. See #1277. this.removeClass('vjs-ended'); @@ -327,10 +431,12 @@ class Player extends Component { // The firstplay event relies on both the play and loadstart events // which can happen in any order for a new source if (!this.paused()) { + this.trigger('loadstart'); this.trigger('firstplay'); } else { // reset the hasStarted state this.hasStarted(false); + this.trigger('loadstart'); } } @@ -356,7 +462,7 @@ class Player extends Component { * Fired whenever the media begins or resumes playback * @event play */ - handlePlay() { + handleTechPlay() { this.removeClass('vjs-ended'); this.removeClass('vjs-paused'); this.addClass('vjs-playing'); @@ -364,39 +470,65 @@ class Player extends Component { // hide the poster when the user hits play // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-media-play this.hasStarted(true); + + this.trigger('play'); } /** * Fired whenever the media begins waiting * @event waiting */ - handleWaiting() { + handleTechWaiting() { this.addClass('vjs-waiting'); + this.trigger('waiting'); } /** * A handler for events that signal that waiting has ended * which is not consistent between browsers. See #1351 - * @private + * @event canplay + */ + handleTechCanPlay() { + this.removeClass('vjs-waiting'); + this.trigger('canplay'); + } + + /** + * A handler for events that signal that waiting has ended + * which is not consistent between browsers. See #1351 + * @event canplaythrough */ - handleWaitEnd() { + handleTechCanPlayThrough() { this.removeClass('vjs-waiting'); + this.trigger('canplaythrough'); + } + + /** + * A handler for events that signal that waiting has ended + * which is not consistent between browsers. See #1351 + * @event playing + */ + handleTechPlaying() { + this.removeClass('vjs-waiting'); + this.trigger('playing'); } /** * Fired whenever the player is jumping to a new time * @event seeking */ - handleSeeking() { + handleTechSeeking() { this.addClass('vjs-seeking'); + this.trigger('seeking'); } /** * Fired when the player has finished jumping to a new time * @event seeked */ - handleSeeked() { + handleTechSeeked() { this.removeClass('vjs-seeking'); + this.trigger('seeked'); } /** @@ -408,7 +540,7 @@ class Player extends Component { * * @event firstplay */ - handleFirstPlay() { + handleTechFirstPlay() { //If the first starttime attribute is specified //then we will start at the given offset in seconds if(this.options_['starttime']){ @@ -416,24 +548,28 @@ class Player extends Component { } this.addClass('vjs-has-started'); + this.trigger('firstplay'); } /** * Fired whenever the media has been paused * @event pause */ - handlePause() { + handleTechPause() { this.removeClass('vjs-playing'); this.addClass('vjs-paused'); + this.trigger('pause'); } /** * Fired while the user agent is downloading media data * @event progress */ - handleProgress() { + handleTechProgress() { + this.trigger('progress'); + // Add custom event for when source is finished downloading. - if (this.bufferedPercent() == 1) { + if (this.bufferedPercent() === 1) { this.trigger('loadedalldata'); } } @@ -442,7 +578,7 @@ class Player extends Component { * Fired when the end of the media resource is reached (currentTime == duration) * @event ended */ - handleEnded() { + handleTechEnded() { this.addClass('vjs-ended'); if (this.options_['loop']) { this.currentTime(0); @@ -450,13 +586,66 @@ class Player extends Component { } else if (!this.paused()) { this.pause(); } + + this.trigger('ended'); } /** * Fired when the duration of the media resource is first known or changed * @event durationchange */ - handleDurationChange() { + handleTechDurationChange() { + this.updateDuration(); + this.trigger('durationchange'); + } + + /** + * Handle a click on the media element to play/pause + */ + handleTechClick(event) { + // We're using mousedown to detect clicks thanks to Flash, but mousedown + // will also be triggered with right-clicks, so we need to prevent that + if (event.button !== 0) return; + + // When controls are disabled a click should not toggle playback because + // the click is considered a control + if (this.controls()) { + if (this.paused()) { + this.play(); + } else { + this.pause(); + } + } + } + + /** + * Handle a tap on the media element. It will toggle the user + * activity state, which hides and shows the controls. + */ + handleTechTap() { + this.userActive(!this.userActive()); + } + + handleTechTouchStart() { + this.userWasActive = this.userActive(); + } + + handleTechTouchMove() { + if (this.userWasActive){ + this.reportUserActivity(); + } + } + + handleTechTouchEnd(event) { + // Stop the mouse events from also happening + event.preventDefault(); + } + + /** + * Update the duration of the player using the tech + * @private + */ + updateDuration() { // Allows for caching value instead of asking player each time. // We need to get the techGet response and check for a value so we don't // accidentally cause the stack to blow up. @@ -487,6 +676,107 @@ class Player extends Component { } } + /** + * native click events on the SWF aren't triggered on IE11, Win8.1RT + * use stageclick events triggered from inside the SWF instead + * @private + */ + handleStageClick() { + this.reportUserActivity(); + } + + handleTechFullscreenChange() { + this.trigger('fullscreenchange'); + } + + /** + * Fires when an error occurred during the loading of an audio/video + * @event error + */ + handleTechError() { + this.error(this.tech.error().code); + } + + /** + * Fires when the browser is intentionally not getting media data + * @event suspend + */ + handleTechSuspend() { + this.trigger('suspend'); + } + + /** + * Fires when the loading of an audio/video is aborted + * @event abort + */ + handleTechAbort() { + this.trigger('abort'); + } + + /** + * Fires when the current playlist is empty + * @event emptied + */ + handleTechEmptied() { + this.trigger('emptied'); + } + + /** + * Fires when the browser is trying to get media data, but data is not available + * @event stalled + */ + handleTechStalled() { + this.trigger('stalled'); + } + + /** + * Fires when the browser has loaded meta data for the audio/video + * @event loadedmetadata + */ + handleTechLoadedMetaData() { + this.trigger('loadedmetadata'); + } + + /** + * Fires when the browser has loaded the current frame of the audio/video + * @event loaddata + */ + handleTechLoadedData() { + this.trigger('loadeddata'); + } + + /** + * Fires when the current playback position has changed + * @event timeupdate + */ + handleTechTimeUpdate() { + this.trigger('timeupdate'); + } + + /** + * Fires when the playing speed of the audio/video is changed + * @event ratechange + */ + handleTechRateChange() { + this.trigger('ratechange'); + } + + /** + * Fires when the volume has been changed + * @event volumechange + */ + handleTechVolumeChange() { + this.trigger('volumechange'); + } + + /** + * Fires when the text track has been changed + * @event texttrackchange + */ + onTextTrackChange() { + this.trigger('texttrackchange'); + } + /** * Object for cached values. */ @@ -528,7 +818,7 @@ class Player extends Component { Lib.log(`Video.js: ${method} method not defined for ${this.techName} playback technology.`, e); } else { // When a method isn't available on the object it throws a TypeError - if (e.name == 'TypeError') { + if (e.name === 'TypeError') { Lib.log(`Video.js: ${method} unavailable on ${this.techName} playback technology element.`, e); this.tech.isReady_ = false; } else { @@ -653,7 +943,7 @@ class Player extends Component { } if (this.cache_.duration === undefined) { - this.handleDurationChange(); + this.updateDuration(); } return this.cache_.duration || 0; @@ -1090,7 +1380,7 @@ class Player extends Component { this.techCall('src', source.src); } - if (this.options_['preload'] == 'auto') { + if (this.options_['preload'] === 'auto') { this.load(); } @@ -1251,14 +1541,27 @@ class Player extends Component { // Don't trigger a change event unless it actually changed if (this.controls_ !== bool) { this.controls_ = bool; + + if (this.usingNativeControls()) { + this.techCall('setControls', bool); + } + if (bool) { this.removeClass('vjs-controls-disabled'); this.addClass('vjs-controls-enabled'); this.trigger('controlsenabled'); + + if (!this.usingNativeControls()) { + this.addTechControlsListeners(); + } } else { this.removeClass('vjs-controls-enabled'); this.addClass('vjs-controls-disabled'); this.trigger('controlsdisabled'); + + if (!this.usingNativeControls()) { + this.removeTechControlsListeners(); + } } } return this; @@ -1419,7 +1722,7 @@ class Player extends Component { let handleMouseMove = function(e) { // #1068 - Prevent mousemove spamming // Chrome Bug: https://code.google.com/p/chromium/issues/detail?id=366970 - if(e.screenX != lastMoveX || e.screenY != lastMoveY) { + if(e.screenX !== lastMoveX || e.screenY !== lastMoveY) { lastMoveX = e.screenX; lastMoveY = e.screenY; handleActivity(); diff --git a/src/js/slider/slider.js b/src/js/slider/slider.js index 856c439619..1779280cf5 100644 --- a/src/js/slider/slider.js +++ b/src/js/slider/slider.js @@ -211,10 +211,10 @@ class Slider extends Component { } handleKeyPress(event) { - if (event.which == 37 || event.which == 40) { // Left and Down Arrows + if (event.which === 37 || event.which === 40) { // Left and Down Arrows event.preventDefault(); this.stepBack(); - } else if (event.which == 38 || event.which == 39) { // Up and Right Arrows + } else if (event.which === 38 || event.which === 39) { // Up and Right Arrows event.preventDefault(); this.stepForward(); } diff --git a/src/js/tech/flash.js b/src/js/tech/flash.js index 50717848e0..701e47418a 100644 --- a/src/js/tech/flash.js +++ b/src/js/tech/flash.js @@ -21,21 +21,13 @@ let navigator = window.navigator; */ class Flash extends Tech { - constructor(player, options, ready){ - super(player, options, ready); + constructor(options, ready){ + super(options, ready); let { source, parentEl } = options; - // Create a temporary element to be replaced by swf object - let placeHolder = this.el_ = Lib.createEl('div', { id: player.id() + '_temp_flash' }); - // Generate ID for swf object - let objId = player.id()+'_flash_api'; - - // Store player options in local var for optimization - // TODO: switch to using player methods instead of options - // e.g. player.autoplay(); - let playerOptions = player.options_; + let objId = options.playerId+'_flash_api'; // Merge default flashvars with ones passed in to init let flashVars = Lib.obj.merge({ @@ -46,25 +38,25 @@ class Flash extends Tech { 'errorEventProxyFunction': 'videojs.Flash.onError', // Player Settings - 'autoplay': playerOptions.autoplay, - 'preload': playerOptions.preload, - 'loop': playerOptions.loop, - 'muted': playerOptions.muted + 'autoplay': options.autoplay, + 'preload': options.preload, + 'loop': options.loop, + 'muted': options.muted - }, options['flashVars']); + }, options.flashVars); // Merge default parames with ones passed in let params = Lib.obj.merge({ 'wmode': 'opaque', // Opaque is needed to overlay controls, but can affect playback performance 'bgcolor': '#000000' // Using bgcolor prevents a white flash when the object is loading - }, options['params']); + }, options.params); // Merge default attributes with ones passed in let attributes = Lib.obj.merge({ 'id': objId, 'name': objId, // Both ID and Name needed or swf to identify itself 'class': 'vjs-tech' - }, options['attributes']); + }, options.attributes); // If source was supplied pass as a flash var. if (source) { @@ -73,41 +65,24 @@ class Flash extends Tech { }); } - // Add placeholder to player div - Lib.insertFirst(placeHolder, parentEl); - // Having issues with Flash reloading on certain page actions (hide/resize/fullscreen) in certain browsers // This allows resetting the playhead when we catch the reload - if (options['startTime']) { + if (options.startTime) { this.ready(function(){ this.load(); this.play(); - this['currentTime'](options['startTime']); - }); - } - - // firefox doesn't bubble mousemove events to parent. videojs/video-js-swf#37 - // bugzilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=836786 - if (Lib.IS_FIREFOX) { - this.ready(function(){ - this.on('mousemove', function(){ - // since it's a custom event, don't bubble higher than the player - this.player().trigger({ 'type':'mousemove', 'bubbles': false }); - }); + this.currentTime(options.startTime); }); } - // native click events on the SWF aren't triggered on IE11, Win8.1RT - // use stageclick events triggered from inside the SWF instead - player.on('stageclick', player.reportUserActivity); - window.videojs = window.videojs || {}; window.videojs.Flash = window.videojs.Flash || {}; window.videojs.Flash.onReady = Flash.onReady; window.videojs.Flash.onEvent = Flash.onEvent; window.videojs.Flash.onError = Flash.onError; - this.el_ = Flash.embed(options['swf'], placeHolder, flashVars, params, attributes); + this.el_ = Flash.embed(options.swf, flashVars, params, attributes); + this.el_.tech = this; } play() { @@ -120,7 +95,7 @@ class Flash extends Tech { src(src) { if (src === undefined) { - return this['currentSrc'](); + return this.currentSrc(); } // Setting src through `src` not `setSrc` will be deprecated @@ -134,7 +109,7 @@ class Flash extends Tech { // Currently the SWF doesn't autoplay if you load a source later. // e.g. Load player w/ no source, wait 2s, set src. - if (this.player_.autoplay()) { + if (this.autoplay()) { var tech = this; this.setTimeout(function(){ tech.play(); }, 0); } @@ -290,17 +265,13 @@ Flash.formats = { Flash.onReady = function(currSwf){ let el = Lib.el(currSwf); + let tech = el && el.tech; - // get player from the player div property - const player = el && el.parentNode && el.parentNode['player']; - - // if there is no el or player then the tech has been disposed + // if there is no el then the tech has been disposed // and the tech element was removed from the player div - if (player) { - // reference player on tech element - el['player'] = player; + if (tech && tech.el()) { // check that the flash object is really ready - Flash['checkReady'](player.tech); + Flash.checkReady(tech); } }; @@ -326,21 +297,21 @@ Flash.checkReady = function(tech){ // Trigger events from the swf on the player Flash.onEvent = function(swfID, eventName){ - let player = Lib.el(swfID)['player']; - player.trigger(eventName); + let tech = Lib.el(swfID).tech; + tech.trigger(eventName); }; // Log errors from the swf Flash.onError = function(swfID, err){ - const player = Lib.el(swfID)['player']; + const tech = Lib.el(swfID).tech; const msg = 'FLASH: '+err; - if (err == 'srcnotfound') { - player.error({ code: 4, message: msg }); + if (err === 'srcnotfound') { + tech.trigger('error', { code: 4, message: msg }); // errors we haven't categorized into the media errors } else { - player.error(msg); + tech.trigger('error', msg); } }; @@ -364,15 +335,12 @@ Flash.version = function(){ }; // Flash embedding method. Only used in non-iframe mode -Flash.embed = function(swf, placeHolder, flashVars, params, attributes){ +Flash.embed = function(swf, flashVars, params, attributes){ const code = Flash.getEmbedCode(swf, flashVars, params, attributes); // Get element by embedding code and retrieving created element const obj = Lib.createEl('div', { innerHTML: code }).childNodes[0]; - const par = placeHolder.parentNode; - - placeHolder.parentNode.replaceChild(obj, placeHolder); return obj; }; diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js index 739be2dbed..c40c0678f2 100644 --- a/src/js/tech/html5.js +++ b/src/js/tech/html5.js @@ -17,18 +17,16 @@ import document from 'global/document'; */ class Html5 extends Tech { - constructor(player, options, ready){ - super(player, options, ready); + constructor(options, ready){ + super(options, ready); - this.setupTriggers(); - - const source = options['source']; + const source = options.source; // Set the source if one is provided // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted) // 2) Check to see if the network state of the tag was failed at init, and if so, reset the source // anyway so the error gets fired. - if (source && (this.el_.currentSrc !== source.src || (player.tag && player.tag.initNetworkState_ === 3))) { + if (source && (this.el_.currentSrc !== source.src || (options.tag && options.tag.initNetworkState_ === 3))) { this.setSource(source); } @@ -42,14 +40,14 @@ class Html5 extends Tech { let node = nodes[nodesLength]; let nodeName = node.nodeName.toLowerCase(); if (nodeName === 'track') { - if (!this['featuresNativeTextTracks']) { + if (!this.featuresNativeTextTracks) { // Empty video tag tracks so the built-in player doesn't use them also. // This may not be fast enough to stop HTML5 browsers from reading the tags // so we'll need to turn off any default tracks if we're manually doing // captions and subtitles. videoElement.textTracks removeNodes.push(node); } else { - this.remoteTextTracks().addTrack_(node['track']); + this.remoteTextTracks().addTrack_(node.track); } } } @@ -59,7 +57,7 @@ class Html5 extends Tech { } } - if (this['featuresNativeTextTracks']) { + if (this.featuresNativeTextTracks) { this.on('loadstart', Lib.bind(this, this.hideCaptions)); } @@ -67,21 +65,10 @@ class Html5 extends Tech { // Our goal should be to get the custom controls on mobile solid everywhere // so we can remove this all together. Right now this will block custom // controls on touch enabled laptops like the Chrome Pixel - if (Lib.TOUCH_ENABLED && player.options()['nativeControlsForTouch'] === true) { - this.useNativeControls(); + if (Lib.TOUCH_ENABLED && options.nativeControlsForTouch === true) { + this.trigger('usenativecontrols'); } - // Chrome and Safari both have issues with autoplay. - // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work. - // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays) - // This fixes both issues. Need to wait for API, so it updates displays correctly - player.ready(function(){ - if (this.tag && this.options_['autoplay'] && this.paused()) { - delete this.tag['poster']; // Chrome Fix. Fixed in Chrome v16. - this.play(); - } - }); - this.triggerReady(); } @@ -92,8 +79,7 @@ class Html5 extends Tech { } createEl() { - let player = this.player_; - let el = player.tag; + let el = this.options_.tag; // Check if this browser supports moving the element into the box. // On the iPhone video will break if you move the element, @@ -105,29 +91,27 @@ class Html5 extends Tech { const clone = el.cloneNode(false); Html5.disposeMediaElement(el); el = clone; - player.tag = null; } else { el = Lib.createEl('video'); // determine if native controls should be used - let attributes = VjsUtil.mergeOptions({}, player.tagAttributes); - if (!Lib.TOUCH_ENABLED || player.options()['nativeControlsForTouch'] !== true) { + let tagAttributes = this.options_.tag && Lib.getElementAttributes(this.options_.tag); + let attributes = VjsUtil.mergeOptions({}, tagAttributes); + if (!Lib.TOUCH_ENABLED || this.options_.nativeControlsForTouch !== true) { delete attributes.controls; } Lib.setElementAttributes(el, Lib.obj.merge(attributes, { - id: player.id() + '_html5_api', + id: this.options_.playerId + '_html5_api', class: 'vjs-tech' }) ); } - // associate the player with the new tag - el['player'] = player; - if (player.options_.tracks) { - for (let i = 0; i < player.options_.tracks.length; i++) { - const track = player.options_.tracks[i]; + if (this.options_.tracks) { + for (let i = 0; i < this.options_.tracks.length; i++) { + const track = this.options_.tracks[i]; let trackEl = document.createElement('track'); trackEl.kind = track.kind; trackEl.label = track.label; @@ -139,8 +123,6 @@ class Html5 extends Tech { el.appendChild(trackEl); } } - - Lib.insertFirst(el, player.el()); } // Update specific tag settings, in case they were overridden @@ -148,8 +130,8 @@ class Html5 extends Tech { for (let i = settingsAttrs.length - 1; i >= 0; i--) { const attr = settingsAttrs[i]; let overwriteAttrs = {}; - if (typeof player.options_[attr] !== 'undefined') { - overwriteAttrs[attr] = player.options_[attr]; + if (typeof this.options_[attr] !== 'undefined') { + overwriteAttrs[attr] = this.options_[attr]; } Lib.setElementAttributes(el, overwriteAttrs); } @@ -176,62 +158,6 @@ class Html5 extends Tech { } } - // Make video events trigger player events - // May seem verbose here, but makes other APIs possible. - // Triggers removed using this.off when disposed - setupTriggers() { - for (let i = Html5.Events.length - 1; i >= 0; i--) { - this.on(Html5.Events[i], this.eventHandler); - } - } - - eventHandler(evt) { - // In the case of an error on the video element, set the error prop - // on the player and let the player handle triggering the event. On - // some platforms, error events fire that do not cause the error - // property on the video element to be set. See #1465 for an example. - if (evt.type == 'error' && this.error()) { - this.player().error(this.error().code); - - // in some cases we pass the event directly to the player - } else { - // No need for media events to bubble up. - evt.bubbles = false; - - this.player().trigger(evt); - } - } - - useNativeControls() { - let tech = this; - let player = this.player(); - - // If the player controls are enabled turn on the native controls - tech.setControls(player.controls()); - - // Update the native controls when player controls state is updated - let controlsOn = function(){ - tech.setControls(true); - }; - let controlsOff = function(){ - tech.setControls(false); - }; - player.on('controlsenabled', controlsOn); - player.on('controlsdisabled', controlsOff); - - // Clean up when not using native controls anymore - let cleanUp = function(){ - player.off('controlsenabled', controlsOn); - player.off('controlsdisabled', controlsOff); - }; - tech.on('dispose', cleanUp); - player.on('usingcustomcontrols', cleanUp); - - // Update the state of the player to using native controls - player.usingNativeControls(true); - } - - play() { this.el_.play(); } pause() { this.el_.pause(); } paused() { return this.el_.paused; } @@ -260,7 +186,7 @@ class Html5 extends Tech { height() { return this.el_.offsetHeight; } supportsFullScreen() { - if (typeof this.el_.webkitEnterFullScreen == 'function') { + if (typeof this.el_.webkitEnterFullScreen === 'function') { // Seems to be broken in Chromium/Chrome && Safari in Leopard if (/Android/.test(Lib.USER_AGENT) || !/Chrome|Mac OS X 10.5/.test(Lib.USER_AGENT)) { @@ -275,14 +201,11 @@ class Html5 extends Tech { if ('webkitDisplayingFullscreen' in video) { this.one('webkitbeginfullscreen', function() { - this.player_.isFullscreen(true); - this.one('webkitendfullscreen', function() { - this.player_.isFullscreen(false); - this.player_.trigger('fullscreenchange'); + this.trigger('fullscreenchange'); }); - this.player_.trigger('fullscreenchange'); + this.trigger('fullscreenchange'); }); } @@ -642,14 +565,9 @@ Html5.unpatchCanPlayType = function() { // by default, patch the video element Html5.patchCanPlayType(); -// List of all HTML5 events (various uses). -Html5.Events = 'loadstart,suspend,abort,error,emptied,stalled,loadedmetadata,loadeddata,canplay,canplaythrough,playing,waiting,seeking,seeked,ended,durationchange,timeupdate,progress,play,pause,ratechange,volumechange'.split(','); - Html5.disposeMediaElement = function(el){ if (!el) { return; } - el['player'] = null; - if (el.parentNode) { el.parentNode.removeChild(el); } diff --git a/src/js/tech/tech.js b/src/js/tech/tech.js index 0aab1caaae..e05c97b743 100644 --- a/src/js/tech/tech.js +++ b/src/js/tech/tech.js @@ -18,29 +18,32 @@ import document from 'global/document'; */ class Tech extends Component { - constructor(player, options={}, ready=function(){}){ + constructor(options={}, ready=function(){}){ + options = options || {}; // we don't want the tech to report user activity automatically. // This is done manually in addControlsListeners options.reportTouchActivity = false; - super(player, options, ready); + super(null, options, ready); + + this.textTracks_ = options.textTracks; // Manually track progress in cases where the browser/flash player doesn't report it. - if (!this['featuresProgressEvents']) { + if (!this.featuresProgressEvents) { this.manualProgressOn(); } // Manually track timeupdates in cases where the browser/flash player doesn't report it. - if (!this['featuresTimeupdateEvents']) { + if (!this.featuresTimeupdateEvents) { this.manualTimeUpdatesOn(); } this.initControlsListeners(); - if (options['nativeCaptions'] === false || options['nativeTextTracks'] === false) { - this['featuresNativeTextTracks'] = false; + if (options.nativeCaptions === false || options.nativeTextTracks === false) { + this.featuresNativeTextTracks = false; } - if (!this['featuresNativeTextTracks']) { + if (!this.featuresNativeTextTracks) { this.emulateTextTracks(); } @@ -68,20 +71,6 @@ class Tech extends Component { * any controls will still keep the user active */ initControlsListeners() { - let player = this.player(); - - let activateControls = function(){ - if (player.controls() && !player.usingNativeControls()) { - this.addControlsListeners(); - } - }; - - // Set up event listeners once the tech is ready and has an element to apply - // listeners to - this.ready(activateControls); - this.on(player, 'controlsenabled', activateControls); - this.on(player, 'controlsdisabled', this.removeControlsListeners); - // if we're loading the playback object after it has started loading or playing the // video (often with autoplay on) then the loadstart event has already fired and we // need to fire it manually because many things rely on it. @@ -89,88 +78,9 @@ class Tech extends Component { // that may also have fired. this.ready(function(){ if (this.networkState && this.networkState() > 0) { - this.player().trigger('loadstart'); - } - }); - } - - addControlsListeners() { - let userWasActive; - - // Some browsers (Chrome & IE) don't trigger a click on a flash swf, but do - // trigger mousedown/up. - // http://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object - // Any touch events are set to block the mousedown event from happening - this.on('mousedown', this.handleClick); - - // If the controls were hidden we don't want that to change without a tap event - // so we'll check if the controls were already showing before reporting user - // activity - this.on('touchstart', function(event) { - userWasActive = this.player_.userActive(); - }); - - this.on('touchmove', function(event) { - if (userWasActive){ - this.player().reportUserActivity(); + this.trigger('loadstart'); } }); - - this.on('touchend', function(event) { - // Stop the mouse events from also happening - event.preventDefault(); - }); - - // Turn on component tap events - this.emitTapEvents(); - - // The tap listener needs to come after the touchend listener because the tap - // listener cancels out any reportedUserActivity when setting userActive(false) - this.on('tap', this.handleTap); - } - - /** - * Remove the listeners used for click and tap controls. This is needed for - * toggling to controls disabled, where a tap/touch should do nothing. - */ - removeControlsListeners() { - // We don't want to just use `this.off()` because there might be other needed - // listeners added by techs that extend this. - this.off('tap'); - this.off('touchstart'); - this.off('touchmove'); - this.off('touchleave'); - this.off('touchcancel'); - this.off('touchend'); - this.off('click'); - this.off('mousedown'); - } - - /** - * Handle a click on the media element. By default will play/pause the media. - */ - handleClick(event) { - // We're using mousedown to detect clicks thanks to Flash, but mousedown - // will also be triggered with right-clicks, so we need to prevent that - if (event.button !== 0) return; - - // When controls are disabled a click should not toggle playback because - // the click is considered a control - if (this.player().controls()) { - if (this.player().paused()) { - this.player().play(); - } else { - this.player().pause(); - } - } - } - - /** - * Handle a tap on the media element. By default it will toggle the user - * activity state, which hides and shows the controls. - */ - handleTap() { - this.player().userActive(!this.player().userActive()); } /* Fallbacks for unsupported event types @@ -178,6 +88,8 @@ class Tech extends Component { // Manually trigger progress events based on changes to the buffered amount // Many flash players and older HTML5 browsers don't send progress or progress-like events manualProgressOn() { + this.on('durationchange', this.onDurationChange); + this.manualProgress = true; // Trigger progress watching when a source begins loading @@ -187,16 +99,18 @@ class Tech extends Component { manualProgressOff() { this.manualProgress = false; this.stopTrackingProgress(); + + this.off('durationchange', this.onDurationChange); } trackProgress() { - this.progressInterval = this.setInterval(function(){ + this.progressInterval = this.setInterval(Lib.bind(this, function(){ // Don't trigger unless buffered amount is greater than last time - let bufferedPercent = this.player().bufferedPercent(); + let bufferedPercent = this.bufferedPercent(); - if (this.bufferedPercent_ != bufferedPercent) { - this.player().trigger('progress'); + if (this.bufferedPercent_ !== bufferedPercent) { + this.trigger('progress'); } this.bufferedPercent_ = bufferedPercent; @@ -204,7 +118,40 @@ class Tech extends Component { if (bufferedPercent === 1) { this.stopTrackingProgress(); } - }, 500); + }), 500); + } + + onDurationChange() { + this.duration_ = this.duration(); + } + + bufferedPercent() { + let bufferedDuration = 0, + start, end; + + if (!this.duration_) { + return 0; + } + + let buffered = this.buffered(); + + if (!buffered || !buffered.length) { + buffered = Lib.createTimeRange(0,0); + } + + for (var i=0; i this.duration_) { + end = this.duration_; + } + + bufferedDuration += end - start; + } + + return bufferedDuration / this.duration_; } stopTrackingProgress() { @@ -213,36 +160,38 @@ class Tech extends Component { /*! Time Tracking -------------------------------------------------------------- */ manualTimeUpdatesOn() { - let player = this.player_; - this.manualTimeUpdates = true; - this.on(player, 'play', this.trackCurrentTime); - this.on(player, 'pause', this.stopTrackingCurrentTime); + this.on('play', this.trackCurrentTime); + this.on('pause', this.stopTrackingCurrentTime); // timeupdate is also called by .currentTime whenever current time is set - // Watch for native timeupdate event - this.one('timeupdate', function(){ + // Watch for native timeupdate event only + var onTimeUpdate = function(e){ + if (e.manuallyTriggered) return; + + this.off('timeupdate', onTimeUpdate); + // Update known progress support for this playback technology - this['featuresTimeupdateEvents'] = true; + this.featuresTimeupdateEvents = true; // Turn off manual progress tracking this.manualTimeUpdatesOff(); - }); + }; + + this.on('timeupdate', onTimeUpdate); } manualTimeUpdatesOff() { - let player = this.player_; - this.manualTimeUpdates = false; this.stopTrackingCurrentTime(); - this.off(player, 'play', this.trackCurrentTime); - this.off(player, 'pause', this.stopTrackingCurrentTime); + this.off('play', this.trackCurrentTime); + this.off('pause', this.stopTrackingCurrentTime); } trackCurrentTime() { if (this.currentTimeInterval) { this.stopTrackingCurrentTime(); } this.currentTimeInterval = this.setInterval(function(){ - this.player().trigger('timeupdate'); + this.trigger({ type: 'timeupdate', target: this, manuallyTriggered: true }); }, 250); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15 } @@ -252,7 +201,7 @@ class Tech extends Component { // #1002 - if the video ends right before the next timeupdate would happen, // the progress bar won't make it all the way to the end - this.player().trigger('timeupdate'); + this.trigger({ type: 'timeupdate', target: this, manuallyTriggered: true }); } dispose() { @@ -266,21 +215,13 @@ class Tech extends Component { setCurrentTime() { // improve the accuracy of manual timeupdates - if (this.manualTimeUpdates) { this.player().trigger('timeupdate'); } + if (this.manualTimeUpdates) { this.trigger({ type: 'timeupdate', target: this, manuallyTriggered: true }); } } - // TODO: Consider looking at moving this into the text track display directly - // https://github.com/videojs/video.js/issues/1863 initTextTrackListeners() { - let player = this.player_; - - let textTrackListChanges = function() { - let textTrackDisplay = player.getChild('textTrackDisplay'); - - if (textTrackDisplay) { - textTrackDisplay.updateDisplay(); - } - }; + let textTrackListChanges = Lib.bind(this, function() { + this.trigger('texttrackchange'); + }); let tracks = this.textTracks(); @@ -296,12 +237,10 @@ class Tech extends Component { } emulateTextTracks() { - let player = this.player_; - - if (!window['WebVTT']) { + if (!window['WebVTT'] && this.el().parentNode != null) { let script = document.createElement('script'); - script.src = player.options()['vtt.js'] || '../node_modules/vtt.js/dist/vtt.js'; - player.el().appendChild(script); + script.src = this.options_['vtt.js'] || '../node_modules/vtt.js/dist/vtt.js'; + this.el().parentNode.appendChild(script); window['WebVTT'] = true; } @@ -311,15 +250,17 @@ class Tech extends Component { } let textTracksChanges = function() { - let textTrackDisplay = player.getChild('textTrackDisplay'); + let updateDisplay = Lib.bind(this, function() { + this.trigger('texttrackchange'); + }); - textTrackDisplay.updateDisplay(); + this.trigger('texttrackchange'); for (let i = 0; i < this.length; i++) { let track = this[i]; - track.removeEventListener('cuechange', Lib.bind(textTrackDisplay, textTrackDisplay.updateDisplay)); + track.removeEventListener('cuechange', updateDisplay); if (track.mode === 'showing') { - track.addEventListener('cuechange', Lib.bind(textTrackDisplay, textTrackDisplay.updateDisplay)); + track.addEventListener('cuechange', updateDisplay); } } }; @@ -338,13 +279,13 @@ class Tech extends Component { */ textTracks() { - this.player_.textTracks_ = this.player_.textTracks_ || new TextTrackList(); - return this.player_.textTracks_; + this.textTracks_ = this.textTracks_ || new TextTrackList(); + return this.textTracks_; } remoteTextTracks() { - this.player_.remoteTextTracks_ = this.player_.remoteTextTracks_ || new TextTrackList(); - return this.player_.remoteTextTracks_; + this.remoteTextTracks_ = this.remoteTextTracks_ || new TextTrackList(); + return this.remoteTextTracks_; } addTextTrack(kind, label, language) { @@ -356,7 +297,7 @@ class Tech extends Component { } addRemoteTextTrack(options) { - let track = createTrackHelper(this, options['kind'], options['label'], options['language'], options); + let track = createTrackHelper(this, options.kind, options.label, options.language, options); this.remoteTextTracks().addTrack_(track); return { track: track @@ -388,14 +329,15 @@ Tech.prototype.textTracks_; var createTrackHelper = function(self, kind, label, language, options={}) { let tracks = self.textTracks(); - options['kind'] = kind; + options.kind = kind; + if (label) { - options['label'] = label; + options.label = label; } if (language) { - options['language'] = language; + options.language = language; } - options['player'] = self.player_; + options.tech = self; let track = new TextTrack(options); tracks.addTrack_(track); @@ -403,18 +345,18 @@ var createTrackHelper = function(self, kind, label, language, options={}) { return track; }; -Tech.prototype['featuresVolumeControl'] = true; +Tech.prototype.featuresVolumeControl = true; // Resizing plugins using request fullscreen reloads the plugin -Tech.prototype['featuresFullscreenResize'] = false; -Tech.prototype['featuresPlaybackRate'] = false; +Tech.prototype.featuresFullscreenResize = false; +Tech.prototype.featuresPlaybackRate = false; // Optional events that we can manually mimic with timers // currently not triggered by video-js-swf -Tech.prototype['featuresProgressEvents'] = false; -Tech.prototype['featuresTimeupdateEvents'] = false; +Tech.prototype.featuresProgressEvents = false; +Tech.prototype.featuresTimeupdateEvents = false; -Tech.prototype['featuresNativeTextTracks'] = false; +Tech.prototype.featuresNativeTextTracks = false; /** * A functional mixin for techs that want to use the Source Handler pattern. diff --git a/src/js/tracks/text-track-display.js b/src/js/tracks/text-track-display.js index 7ca83acabf..7c6b88bba1 100644 --- a/src/js/tracks/text-track-display.js +++ b/src/js/tracks/text-track-display.js @@ -32,6 +32,7 @@ class TextTrackDisplay extends Component { super(player, options, ready); player.on('loadstart', Lib.bind(this, this.toggleDisplay)); + player.on('texttrackchange', Lib.bind(this, this.toggleDisplay)); // This used to be called during player init, but was causing an error // if a track should show by default and the display hadn't loaded yet. diff --git a/src/js/tracks/text-track.js b/src/js/tracks/text-track.js index f89d250a49..43f1d7c309 100644 --- a/src/js/tracks/text-track.js +++ b/src/js/tracks/text-track.js @@ -29,8 +29,8 @@ import XHR from '../xhr.js'; * }; */ let TextTrack = function(options={}) { - if (!options['player']) { - throw new Error('A player was not provided.'); + if (!options.tech) { + throw new Error('A tech was not provided.'); } let tt = this; @@ -42,7 +42,7 @@ let TextTrack = function(options={}) { } } - tt.player_ = options['player']; + tt.tech_ = options.tech; let mode = TextTrackEnum.TextTrackMode[options['mode']] || 'disabled'; let kind = TextTrackEnum.TextTrackKind[options['kind']] || 'subtitles'; @@ -69,7 +69,7 @@ let TextTrack = function(options={}) { } }); if (mode !== 'disabled') { - tt.player_.on('timeupdate', timeupdateHandler); + tt.tech_.on('timeupdate', timeupdateHandler); } Object.defineProperty(tt, 'kind', { @@ -110,7 +110,7 @@ let TextTrack = function(options={}) { } mode = newMode; if (mode === 'showing') { - this.player_.on('timeupdate', timeupdateHandler); + this.tech_.on('timeupdate', timeupdateHandler); } this.trigger('modechange'); } @@ -137,7 +137,7 @@ let TextTrack = function(options={}) { return activeCues; // nothing to do } - let ct = this.player_.currentTime(); + let ct = this.tech_.currentTime(); let active = []; for (let i = 0, l = this['cues'].length; i < l; i++) { @@ -191,7 +191,7 @@ TextTrack.prototype.allowedEvents_ = { }; TextTrack.prototype.addCue = function(cue) { - let tracks = this.player_.textTracks(); + let tracks = this.tech_.textTracks(); if (tracks) { for (let i = 0; i < tracks.length; i++) { diff --git a/src/js/xhr.js b/src/js/xhr.js index 2d2250e1c3..ca84ae87a0 100644 --- a/src/js/xhr.js +++ b/src/js/xhr.js @@ -102,7 +102,7 @@ var xhr = function(options, callback){ // XMLHTTPRequest } else { - const fileUrl = (urlInfo.protocol == 'file:' || winLoc.protocol == 'file:'); + const fileUrl = (urlInfo.protocol === 'file:' || winLoc.protocol === 'file:'); request.onreadystatechange = function() { if (request.readyState === 4) { diff --git a/test/karma.conf.js b/test/karma.conf.js index 9d1448281a..687c6e6548 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -92,6 +92,8 @@ module.exports = function(config) { captureTimeout: 60000, + browserNoActivityTimeout: 60000, + sauceLabs: { startConnect: true, tunnelIdentifier: process.env.TRAVIS_JOB_NUMBER, diff --git a/test/unit/flash.js b/test/unit/flash.js index 8bbd07d601..2b607d7f21 100644 --- a/test/unit/flash.js +++ b/test/unit/flash.js @@ -146,8 +146,13 @@ test('ready triggering before and after disposing the tech', function() { fixtureDiv.appendChild(playerDiv); techEl.id = 'foo1234'; + + techEl.tech = { + el() { return techEl; } + }; + playerDiv['player'] = { - tech: {} + tech: techEl.tech }; Flash['onReady'](techEl.id); diff --git a/test/unit/media.html5.js b/test/unit/media.html5.js index 2f5de2269c..5013f8ff8b 100644 --- a/test/unit/media.html5.js +++ b/test/unit/media.html5.js @@ -24,7 +24,7 @@ q.module('HTML5', { addChild: function(){}, trigger: function(){} }; - tech = new Html5(player, {}); + tech = new Html5({}); }, 'teardown': function() { tech.dispose(); @@ -51,13 +51,6 @@ test('should detect whether the volume can be changed', function(){ Lib.TEST_VID = testVid; }); -test('should re-link the player if the tech is moved', function(){ - Html5.movingMediaElementInDOM = false; - tech.createEl(); - - strictEqual(player, tech.el()['player']); -}); - test('test playbackRate', function() { var playbackRate; diff --git a/test/unit/media.js b/test/unit/media.js index 9944029c8a..5030b973b1 100644 --- a/test/unit/media.js +++ b/test/unit/media.js @@ -26,48 +26,28 @@ q.module('Media Tech', { }); test('should synthesize timeupdate events by default', function() { - var timeupdates = 0, playHandler, i, tech; - tech = new Tech({ - id: this.noop, - on: function(event, handler) { - if (event === 'play') { - playHandler = handler; - } - }, - trigger: function(event) { - if (event === 'timeupdate') { - timeupdates++; - } - } - }); - playHandler.call(tech); + var timeupdates = 0, tech; + + tech = new Tech(); tech.on('timeupdate', function() { timeupdates++; }); + tech.trigger('play'); + this.clock.tick(250); - equal(timeupdates, 1, 'triggered one timeupdate'); + equal(timeupdates, 1, 'triggered at least one timeupdate'); }); test('stops timeupdates if the tech produces them natively', function() { - var timeupdates = 0, tech, playHandler, expected; - tech = new Tech({ - id: this.noop, - off: this.noop, - on: function(event, handler) { - if (event === 'play') { - playHandler = handler; - } - }, - bufferedPercent: this.noop, - trigger: function(event) { - if (event === 'timeupdate') { - timeupdates++; - } - } + var timeupdates = 0, tech, expected; + tech = new Tech(); + tech.on('timeupdate', function() { + timeupdates++; }); - playHandler.call(tech); + tech.trigger('play'); + // simulate a native timeupdate event tech.trigger('timeupdate'); @@ -77,51 +57,29 @@ test('stops timeupdates if the tech produces them natively', function() { }); test('stops manual timeupdates while paused', function() { - var timeupdates = 0, tech, playHandler, pauseHandler, expected; - tech = new Tech({ - id: this.noop, - on: function(event, handler) { - if (event === 'play') { - playHandler = handler; - } else if (event === 'pause') { - pauseHandler = handler; - } - }, - bufferedPercent: this.noop, - trigger: function(event) { - if (event === 'timeupdate') { - timeupdates++; - } - } + var timeupdates = 0, tech, expected; + tech = new Tech(); + tech.on('timeupdate', function() { + timeupdates++; }); - playHandler.call(tech); + + tech.trigger('play'); this.clock.tick(10 * 250); ok(timeupdates > 0, 'timeupdates fire during playback'); - pauseHandler.call(tech); + tech.trigger('pause'); timeupdates = 0; this.clock.tick(10 * 250); equal(timeupdates, 0, 'timeupdates do not fire when paused'); - playHandler.call(tech); + tech.trigger('play'); this.clock.tick(10 * 250); ok(timeupdates > 0, 'timeupdates fire when playback resumes'); }); test('should synthesize progress events by default', function() { var progresses = 0, tech; - tech = new Tech({ - id: this.noop, - on: this.noop, - bufferedPercent: function() { - return 0; - }, - trigger: function(event) { - if (event === 'progress') { - progresses++; - } - } - }); + tech = new Tech(); tech.on('progress', function() { progresses++; }); @@ -131,12 +89,7 @@ test('should synthesize progress events by default', function() { }); test('dispose() should stop time tracking', function() { - var tech = new Tech({ - id: this.noop, - on: this.noop, - off: this.noop, - trigger: this.noop - }); + var tech = new Tech(); tech.dispose(); // progress and timeupdate events will throw exceptions after the @@ -150,10 +103,6 @@ test('dispose() should stop time tracking', function() { }); test('should add the source hanlder interface to a tech', function(){ - var mockPlayer = { - off: this.noop, - trigger: this.noop - }; var sourceA = { src: 'foo.mp4', type: 'video/mp4' }; var sourceB = { src: 'no-support', type: 'no-support' }; @@ -168,7 +117,7 @@ test('should add the source hanlder interface to a tech', function(){ ok(MyTech.selectSourceHandler, 'added a selectSourceHandler function to the Tech'); // Create an instance of Tech - var tech = new MyTech(mockPlayer); + var tech = new MyTech(); // Check for the expected instance methods ok(tech.setSource, 'added a setSource function to the tech instance'); @@ -233,17 +182,12 @@ test('should add the source hanlder interface to a tech', function(){ }); test('should handle unsupported sources with the source hanlder API', function(){ - var mockPlayer = { - off: this.noop, - trigger: this.noop - }; - // Define a new tech class var MyTech = Tech.extend(); // Extend Tech with source handlers Tech.withSourceHandlers(MyTech); // Create an instance of Tech - var tech = new MyTech(mockPlayer); + var tech = new MyTech(); var usedNative; MyTech.nativeSourceHandler = { diff --git a/test/unit/mediafaker.js b/test/unit/mediafaker.js index fbb93a7f64..8664db0623 100644 --- a/test/unit/mediafaker.js +++ b/test/unit/mediafaker.js @@ -10,8 +10,8 @@ import Component from '../../src/js/component.js'; */ class MediaFaker extends Tech { - constructor(player, options, handleReady){ - super(player, options, handleReady); + constructor(options, handleReady){ + super(options, handleReady); this.triggerReady(); } @@ -20,12 +20,10 @@ class MediaFaker extends Tech { className: 'vjs-tech' }); - if (this.player().poster()) { + /*if (this.player().poster()) { // transfer the poster image to mimic HTML el.poster = this.player().poster(); - } - - Lib.insertFirst(el, this.player_.el()); + }*/ return el; } @@ -34,6 +32,8 @@ class MediaFaker extends Tech { poster() { return this.el().poster; } setPoster(val) { this.el().poster = val; } + setControls(val) {} + currentTime() { return 0; } seeking() { return false; } src() { return 'movie.mp4'; } @@ -41,7 +41,7 @@ class MediaFaker extends Tech { muted() { return false; } pause() { return false; } paused() { return true; } - play() { this.player().trigger('play'); } + play() { this.trigger('play'); } supportsFullScreen() { return false; } buffered() { return {}; } duration() { return {}; } diff --git a/test/unit/player.js b/test/unit/player.js index d42fe1216b..31c5916a37 100644 --- a/test/unit/player.js +++ b/test/unit/player.js @@ -233,7 +233,7 @@ test('should hide the poster when play is called', function() { player.play(); equal(player.hasStarted(), true, 'the show poster flag is false after play'); - player.trigger('loadstart'); + player.tech.trigger('loadstart'); equal(player.hasStarted(), false, 'the resource selection algorithm sets the show poster flag to true'); @@ -278,7 +278,7 @@ test('should be able to initialize player twice on the same tag using string ref }); test('should set controls and trigger events', function() { - expect(6); + //expect(6); var player = TestHelpers.makePlayer({ 'controls': false }); ok(player.controls() === false, 'controls set through options'); @@ -297,9 +297,9 @@ test('should set controls and trigger events', function() { ok(true, 'disabled fired once'); }); player.controls(false); - player.controls(true); + //player.controls(true); // Check for unnecessary events - player.controls(true); + //player.controls(true); player.dispose(); }); @@ -441,10 +441,10 @@ test('should not add multiple first play events despite subsequent loads', funct ok(true, 'First play should fire once.'); }); - // Checking to make sure handleLoadStart removes first play listener before adding a new one. - player.trigger('loadstart'); - player.trigger('loadstart'); - player.trigger('play'); + // Checking to make sure onLoadStart removes first play listener before adding a new one. + player.tech.trigger('loadstart'); + player.tech.trigger('loadstart'); + player.tech.trigger('play'); }); test('should fire firstplay after resetting the player', function() { @@ -456,14 +456,14 @@ test('should fire firstplay after resetting the player', function() { }); // init firstplay listeners - player.trigger('loadstart'); - player.trigger('play'); + player.tech.trigger('loadstart'); + player.tech.trigger('play'); ok(fpFired, 'First firstplay fired'); // reset the player - player.trigger('loadstart'); + player.tech.trigger('loadstart'); fpFired = false; - player.trigger('play'); + player.tech.trigger('play'); ok(fpFired, 'Second firstplay fired'); // the play event can fire before the loadstart event. @@ -471,8 +471,8 @@ test('should fire firstplay after resetting the player', function() { player.tech.paused = function(){ return false; }; fpFired = false; // reset the player - player.trigger('loadstart'); - // player.trigger('play'); + player.tech.trigger('loadstart'); + // player.tech.trigger('play'); ok(fpFired, 'Third firstplay fired'); }); @@ -481,14 +481,14 @@ test('should remove vjs-has-started class', function(){ var player = TestHelpers.makePlayer({}); - player.trigger('loadstart'); - player.trigger('play'); + player.tech.trigger('loadstart'); + player.tech.trigger('play'); ok(player.el().className.indexOf('vjs-has-started') !== -1, 'vjs-has-started class added'); - player.trigger('loadstart'); + player.tech.trigger('loadstart'); ok(player.el().className.indexOf('vjs-has-started') === -1, 'vjs-has-started class removed'); - player.trigger('play'); + player.tech.trigger('play'); ok(player.el().className.indexOf('vjs-has-started') !== -1, 'vjs-has-started class added again'); }); @@ -497,18 +497,18 @@ test('should add and remove vjs-ended class', function() { var player = TestHelpers.makePlayer({}); - player.trigger('loadstart'); - player.trigger('play'); - player.trigger('ended'); + player.tech.trigger('loadstart'); + player.tech.trigger('play'); + player.tech.trigger('ended'); ok(player.el().className.indexOf('vjs-ended') !== -1, 'vjs-ended class added'); - player.trigger('play'); + player.tech.trigger('play'); ok(player.el().className.indexOf('vjs-ended') === -1, 'vjs-ended class removed'); - player.trigger('ended'); + player.tech.trigger('ended'); ok(player.el().className.indexOf('vjs-ended') !== -1, 'vjs-ended class re-added'); - player.trigger('loadstart'); + player.tech.trigger('loadstart'); ok(player.el().className.indexOf('vjs-ended') === -1, 'vjs-ended class removed'); }); @@ -576,20 +576,18 @@ test('Data attributes on the video element should persist in the new wrapper ele }); test('should restore attributes from the original video tag when creating a new element', function(){ - var player, html5Mock, el; - - player = TestHelpers.makePlayer(); - html5Mock = { player_: player }; + var tag, html5Mock, el; // simulate attributes stored from the original tag - player.tagAttributes = { - 'preload': 'auto', - 'autoplay': true, - 'webkit-playsinline': true - }; + tag = Lib.createEl('video'); + tag.setAttribute('preload', 'auto'); + tag.setAttribute('autoplay', ''); + tag.setAttribute('webkit-playsinline', ''); + + html5Mock = { options_: { tag: tag } }; // set options that should override tag attributes - player.options_['preload'] = 'none'; + html5Mock.options_.preload = 'none'; // create the element el = Html5.prototype.createEl.call(html5Mock); @@ -677,7 +675,7 @@ test('pause is called when player ended event is fired and player is not paused' player.pause = function() { pauses++; }; - player.trigger('ended'); + player.tech.trigger('ended'); equal(pauses, 1, 'pause was called'); }); @@ -691,7 +689,7 @@ test('pause is not called if the player is paused and ended is fired', function( player.pause = function() { pauses++; }; - player.trigger('ended'); + player.tech.trigger('ended'); equal(pauses, 0, 'pause was not called when ended fired'); }); diff --git a/test/unit/tracks/text-track-list.js b/test/unit/tracks/text-track-list.js index 9eb7052986..6cdd5fee2d 100644 --- a/test/unit/tracks/text-track-list.js +++ b/test/unit/tracks/text-track-list.js @@ -168,7 +168,7 @@ test('trigger "change" event when "modechange" is fired on a track', function() test('trigger "change" event when mode changes on a TextTracl', function() { var tt = new TextTrack({ - player: { + tech: { on: noop } }), diff --git a/test/unit/tracks/text-track.js b/test/unit/tracks/text-track.js index 0a40f003ff..04b7982b8f 100644 --- a/test/unit/tracks/text-track.js +++ b/test/unit/tracks/text-track.js @@ -3,7 +3,7 @@ import window from 'global/window'; import TestHelpers from '../test-helpers.js'; var noop = Function.prototype; -var defaultPlayer = { +var defaultTech = { textTracks: noop, on: noop, off: noop, @@ -12,12 +12,12 @@ var defaultPlayer = { q.module('Text Track'); -test('text-track requires a player', function() { +test('text-track requires a tech', function() { window.throws(function() { new TextTrack(); }, - new Error('A player was not provided.'), - 'a player is required for text track'); + new Error('A tech was not provided.'), + 'a tech is required for text track'); }); test('can create a TextTrack with various properties', function() { @@ -27,7 +27,7 @@ test('can create a TextTrack with various properties', function() { id = '1', mode = 'disabled', tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: kind, label: label, language: language, @@ -44,7 +44,7 @@ test('can create a TextTrack with various properties', function() { test('defaults when items not provided', function() { var tt = new TextTrack({ - player: defaultPlayer + tech: defaultTech }); equal(tt.kind, 'subtitles', 'kind defaulted to subtitles'); @@ -55,7 +55,7 @@ test('defaults when items not provided', function() { test('kind can only be one of several options, defaults to subtitles', function() { var tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: 'foo' }); @@ -63,35 +63,35 @@ test('kind can only be one of several options, defaults to subtitles', function( notEqual(tt.kind, 'foo', 'the kind is set to subtitles, not foo'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: 'subtitles' }); equal(tt.kind, 'subtitles', 'the kind is set to subtitles'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: 'captions' }); equal(tt.kind, 'captions', 'the kind is set to captions'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: 'descriptions' }); equal(tt.kind, 'descriptions', 'the kind is set to descriptions'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: 'chapters' }); equal(tt.kind, 'chapters', 'the kind is set to chapters'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: 'metadata' }); @@ -100,7 +100,7 @@ test('kind can only be one of several options, defaults to subtitles', function( test('mode can only be one of several options, defaults to disabled', function() { var tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, mode: 'foo' }); @@ -108,21 +108,21 @@ test('mode can only be one of several options, defaults to disabled', function() notEqual(tt.mode, 'foo', 'the mode is set to disabld, not foo'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, mode: 'disabled' }); equal(tt.mode, 'disabled', 'the mode is set to disabled'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, mode: 'hidden' }); equal(tt.mode, 'hidden', 'the mode is set to hidden'); tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, mode: 'showing' }); @@ -136,7 +136,7 @@ test('kind, label, language, id, cue, and activeCues are read only', function() id = '1', mode = 'disabled', tt = new TextTrack({ - player: defaultPlayer, + tech: defaultTech, kind: kind, label: label, language: language, @@ -161,7 +161,7 @@ test('kind, label, language, id, cue, and activeCues are read only', function() test('mode can only be set to a few options', function() { var tt = new TextTrack({ - player: defaultPlayer + tech: defaultTech, }); tt.mode = 'foo'; @@ -186,7 +186,7 @@ test('mode can only be set to a few options', function() { test('cues and activeCues return a TextTrackCueList', function() { var tt = new TextTrack({ - player: defaultPlayer + tech: defaultTech, }); ok(tt.cues.getCueById, 'cues are a TextTrackCueList'); @@ -195,7 +195,7 @@ test('cues and activeCues return a TextTrackCueList', function() { test('cues can be added and removed from a TextTrack', function() { var tt = new TextTrack({ - player: defaultPlayer + tech: defaultTech, }), cues; @@ -224,7 +224,7 @@ test('fires cuechange when cues become active and inactive', function() { changes = 0, cuechangeHandler, tt = new TextTrack({ - player: player, + tech: player.tech, mode: 'showing' }); @@ -241,19 +241,19 @@ test('fires cuechange when cues become active and inactive', function() { tt.oncuechange = cuechangeHandler; tt.addEventListener('cuechange', cuechangeHandler); - player.currentTime = function() { + player.tech.currentTime = function() { return 2; }; - player.trigger('timeupdate'); + player.tech.trigger('timeupdate'); equal(changes, 2, 'a cuechange event trigger addEventListener and oncuechange'); - player.currentTime = function() { + player.tech.currentTime = function() { return 7; }; - player.trigger('timeupdate'); + player.tech.trigger('timeupdate'); equal(changes, 4, 'a cuechange event trigger addEventListener and oncuechange'); }); diff --git a/test/unit/tracks/tracks.js b/test/unit/tracks/tracks.js index 41a95f1800..f281df79c5 100644 --- a/test/unit/tracks/tracks.js +++ b/test/unit/tracks/tracks.js @@ -119,7 +119,7 @@ test('listen to remove and add track events in native text tracks', function() { player.player_ = player; player.options_ = options = {}; - html = new Html5(player, options); + html = new Html5(options); ok(events['removetrack'], 'removetrack listener was added'); ok(events['addtrack'], 'addtrack listener was added');