From 3a094d49f4fbb67ad476d368b530ad5bf90977ed Mon Sep 17 00:00:00 2001 From: Paul Ryan Date: Thu, 17 Jul 2014 09:46:28 -0600 Subject: [PATCH 1/2] Added vjs-waiting class on waiting and removed in all non-waiting states --- src/js/player.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/js/player.js b/src/js/player.js index caa2e5d59d..5d1d2802c9 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -224,6 +224,11 @@ vjs.Player.prototype.createEl = function(){ // adding children this.el_ = el; this.on('loadstart', this.onLoadStart); + this.on('waiting', this.onWaiting); + this.on('seeked', this.onWaitEnd); + this.on('canplay', this.onWaitEnd); + this.on('canplaythrough', this.onWaitEnd); + this.on('playing', this.onWaitEnd); this.on('ended', this.onEnded); this.on('play', this.onPlay); this.on('firstplay', this.onFirstPlay); @@ -477,6 +482,22 @@ vjs.Player.prototype.onPlay = function(){ vjs.addClass(this.el_, 'vjs-playing'); }; +/** + * Fired whenever the media begins wating + * @event waiting + */ +vjs.Player.prototype.onWaiting = function(){ + vjs.addClass(this.el_, 'vjs-waiting'); +}; + +/** + * Fired whenever the waitng state has ended + * @event seeked, canplay, canplaythrough, playing + */ +vjs.Player.prototype.onWaitEnd = function(){ + vjs.removeClass(this.el_, 'vjs-waiting'); +}; + /** * Fired the first time a video is played * From 1625152131d385041854781d493be2f584312c19 Mon Sep 17 00:00:00 2001 From: Steve Heffernan Date: Tue, 29 Jul 2014 11:48:23 -0700 Subject: [PATCH 2/2] Split up seeking and waiting styles. Updated loading spinner to use them. --- src/css/video-js.less | 22 ++++++++++++++-------- src/js/loading-spinner.js | 16 +++++++++------- src/js/player.js | 39 +++++++++++++++++++++++++++------------ 3 files changed, 50 insertions(+), 27 deletions(-) diff --git a/src/css/video-js.less b/src/css/video-js.less index 81fad22495..5ad26e6cb7 100644 --- a/src/css/video-js.less +++ b/src/css/video-js.less @@ -627,8 +627,11 @@ easily in the skin designer. http://designer.videojs.com/ /* Loading Spinner -------------------------------------------------------------------------------- */ + .vjs-loading-spinner { + /* Should be hidden by default */// display: none; + position: absolute; top: 50%; left: 50%; @@ -643,19 +646,22 @@ easily in the skin designer. http://designer.videojs.com/ margin-top: -0.5em; opacity: 0.75; +} +/* Show the spinner when waiting for data and seeking to a new time */ +.vjs-waiting .vjs-loading-spinner, +.vjs-seeking .vjs-loading-spinner { + display: block; + + /* only animate when showing because it can be processor heavy */// .animation(spin 1.5s infinite linear); } -/* Errors are unrecoverable without user interaction, - so hide the spinner in the case of an error */ -.video-js.vjs-error .vjs-loading-spinner { - /* using !important flag because currently the loading spinner - uses hide()/show() instead of classes. The !important can be - removed when that's updated */ - display: none !important; +/* Errors are unrecoverable without user interaction so hide the spinner */ +.vjs-error .vjs-loading-spinner { + display: none; - /* ensure animation doesn't continue while hidden */ + /* ensure animation doesn't continue while hidden */// .animation(none); } diff --git a/src/js/loading-spinner.js b/src/js/loading-spinner.js index ea78f4d26e..4c050dc6af 100644 --- a/src/js/loading-spinner.js +++ b/src/js/loading-spinner.js @@ -12,23 +12,25 @@ vjs.LoadingSpinner = vjs.Component.extend({ init: function(player, options){ vjs.Component.call(this, player, options); - player.on('canplay', vjs.bind(this, this.hide)); - player.on('canplaythrough', vjs.bind(this, this.hide)); - player.on('playing', vjs.bind(this, this.hide)); - player.on('seeking', vjs.bind(this, this.show)); + // MOVING DISPLAY HANDLING TO CSS + + // player.on('canplay', vjs.bind(this, this.hide)); + // player.on('canplaythrough', vjs.bind(this, this.hide)); + // player.on('playing', vjs.bind(this, this.hide)); + // player.on('seeking', vjs.bind(this, this.show)); // in some browsers seeking does not trigger the 'playing' event, // so we also need to trap 'seeked' if we are going to set a // 'seeking' event - player.on('seeked', vjs.bind(this, this.hide)); + // player.on('seeked', vjs.bind(this, this.hide)); - player.on('ended', vjs.bind(this, this.hide)); + // player.on('ended', vjs.bind(this, this.hide)); // Not showing spinner on stalled any more. Browsers may stall and then not trigger any events that would remove the spinner. // Checked in Chrome 16 and Safari 5.1.2. http://help.videojs.com/discussions/problems/883-why-is-the-download-progress-showing // player.on('stalled', vjs.bind(this, this.show)); - player.on('waiting', vjs.bind(this, this.show)); + // player.on('waiting', vjs.bind(this, this.show)); } }); diff --git a/src/js/player.js b/src/js/player.js index 5d1d2802c9..972f10b3f5 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -225,10 +225,9 @@ vjs.Player.prototype.createEl = function(){ this.el_ = el; this.on('loadstart', this.onLoadStart); this.on('waiting', this.onWaiting); - this.on('seeked', this.onWaitEnd); - this.on('canplay', this.onWaitEnd); - this.on('canplaythrough', this.onWaitEnd); - this.on('playing', this.onWaitEnd); + this.on(['canplay', 'canplaythrough', 'playing', 'ended'], this.onWaitEnd); + this.on('seeking', this.onSeeking); + this.on('seeked', this.onSeeked); this.on('ended', this.onEnded); this.on('play', this.onPlay); this.on('firstplay', this.onFirstPlay); @@ -478,8 +477,8 @@ vjs.Player.prototype.onLoadedAllData; * @event play */ vjs.Player.prototype.onPlay = function(){ - vjs.removeClass(this.el_, 'vjs-paused'); - vjs.addClass(this.el_, 'vjs-playing'); + this.removeClass('vjs-paused'); + this.addClass('vjs-playing'); }; /** @@ -487,15 +486,31 @@ vjs.Player.prototype.onPlay = function(){ * @event waiting */ vjs.Player.prototype.onWaiting = function(){ - vjs.addClass(this.el_, 'vjs-waiting'); + this.addClass('vjs-waiting'); }; /** - * Fired whenever the waitng state has ended - * @event seeked, canplay, canplaythrough, playing + * A handler for events that signal that waiting has eneded + * which is not consistent between browsers. See #1351 */ vjs.Player.prototype.onWaitEnd = function(){ - vjs.removeClass(this.el_, 'vjs-waiting'); + this.removeClass('vjs-waiting'); +}; + +/** + * Fired whenever the player is jumping to a new time + * @event seeking + */ +vjs.Player.prototype.onSeeking = function(){ + this.addClass('vjs-seeking'); +}; + +/** + * Fired when the player has finished jumping to a new time + * @event seeked + */ +vjs.Player.prototype.onSeeked = function(){ + this.removeClass('vjs-seeking'); }; /** @@ -522,8 +537,8 @@ vjs.Player.prototype.onFirstPlay = function(){ * @event pause */ vjs.Player.prototype.onPause = function(){ - vjs.removeClass(this.el_, 'vjs-playing'); - vjs.addClass(this.el_, 'vjs-paused'); + this.removeClass('vjs-playing'); + this.addClass('vjs-paused'); }; /**