Wait to get media duration before building player

acri-jp · Feb 22, 2020 · de93728 · de93728
1 parent 56df315
commit de93728
Show file tree

Hide file tree

Showing 6 changed files with 171 additions and 171 deletions.
diff --git a/build/ableplayer.dist.js b/build/ableplayer.dist.js
@@ -1125,58 +1125,64 @@ var AblePlayerInstances = [];
 
 					thisObj.setupTranscript().then(function() {
 
-						thisObj.setFullscreen(false);
+            thisObj.getMediaTimes().then(function(mediaTimes) {
 
-						if (typeof thisObj.volume === 'undefined') {
-  						thisObj.volume = thisObj.defaultVolume;
-						}
-						thisObj.setVolume(thisObj.volume);
+              thisObj.duration = mediaTimes['duration'];
+              thisObj.elapsed = mediaTimes['elapsed'];
 
-						if (thisObj.transcriptType) {
-							thisObj.addTranscriptAreaEvents();
-							thisObj.updateTranscript();
-						}
-						if (thisObj.mediaType === 'video') {
-							thisObj.initDescription();
-						}
-						if (thisObj.captions.length) {
-							thisObj.initDefaultCaption();
-						}
+              thisObj.setFullscreen(false);
 
-						// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
-						// This tells browsers to ignore the text tracks so Able Player can handle them
-						// However, timing is critical as browsers - especially Safari - tend to ignore this request
-						// unless it's sent late in the intialization process.
-						// If browsers ignore the request, the result is redundant captions
-						thisObj.setMediaAttributes();
-						thisObj.addControls();
-						thisObj.addEventListeners();
-
-						// inject each of the hidden forms that will be accessed from the Preferences popup menu
-						prefsGroups = thisObj.getPreferencesGroups();
-						for (i = 0; i < prefsGroups.length; i++) {
-							thisObj.injectPrefsForm(prefsGroups[i]);
-							 }
-						thisObj.setupPopups();
-						thisObj.updateCaption();
-						thisObj.injectVTS();
-						if (thisObj.chaptersDivLocation) {
-							thisObj.populateChaptersDiv();
-							 }
-						thisObj.showSearchResults();
-
-						// Go ahead and load media, without user requesting it
-						// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
-            // However, the media needs to load before the 'loadedmetadata' event is fired
-            // and until that happens we can't get the media's duration
-						if (thisObj.player === 'html5') {
-							thisObj.$media[0].load();
-						}
-						// refreshControls is called twice building/initializing the player
-						// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
-						setTimeout(function() {
-							thisObj.refreshControls('init');
-						},100);
+              if (typeof thisObj.volume === 'undefined') {
+  						  thisObj.volume = thisObj.defaultVolume;
+						  }
+              thisObj.setVolume(thisObj.volume);
+
+              if (thisObj.transcriptType) {
+							  thisObj.addTranscriptAreaEvents();
+                thisObj.updateTranscript();
+						  }
+              if (thisObj.mediaType === 'video') {
+							  thisObj.initDescription();
+						  }
+              if (thisObj.captions.length) {
+							  thisObj.initDefaultCaption();
+						  }
+
+              // setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
+              // This tells browsers to ignore the text tracks so Able Player can handle them
+              // However, timing is critical as browsers - especially Safari - tend to ignore this request
+              // unless it's sent late in the intialization process.
+              // If browsers ignore the request, the result is redundant captions
+              thisObj.setMediaAttributes();
+              thisObj.addControls();
+              thisObj.addEventListeners();
+
+              // inject each of the hidden forms that will be accessed from the Preferences popup menu
+              prefsGroups = thisObj.getPreferencesGroups();
+              for (i = 0; i < prefsGroups.length; i++) {
+							  thisObj.injectPrefsForm(prefsGroups[i]);
+				      }
+              thisObj.setupPopups();
+              thisObj.updateCaption();
+              thisObj.injectVTS();
+              if (thisObj.chaptersDivLocation) {
+							  thisObj.populateChaptersDiv();
+				      }
+              thisObj.showSearchResults();
+
+              // Go ahead and load media, without user requesting it
+              // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
+              // However, the media needs to load before the 'loadedmetadata' event is fired
+              // and until that happens we can't get the media's duration
+              if (thisObj.player === 'html5') {
+							  thisObj.$media[0].load();
+						  }
+              // refreshControls is called twice building/initializing the player
+              // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
+              setTimeout(function() {
+							  thisObj.refreshControls('init');
+						  },100);
+            });
 					},
 					function() {	 // initPlayer fail
 						thisObj.provideFallback();
@@ -4030,12 +4036,6 @@ var AblePlayerInstances = [];
       $sliderDiv = $('<div class="able-seekbar"></div>');
 			sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel;
 			this.$controllerDiv.append($sliderDiv);
-			if (typeof this.duration === 'undefined' || this.duration === 0) {
-			  // set arbitrary starting duration, and change it when duration is known
-				this.duration = 60;
-				// also set elapsed to 0
-				this.elapsed = 0;
-		  }
 			this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible');
 		}
 

diff --git a/build/ableplayer.js b/build/ableplayer.js
@@ -1125,58 +1125,64 @@ var AblePlayerInstances = [];
 
 					thisObj.setupTranscript().then(function() {
 
-						thisObj.setFullscreen(false);
+            thisObj.getMediaTimes().then(function(mediaTimes) {
 
-						if (typeof thisObj.volume === 'undefined') {
-  						thisObj.volume = thisObj.defaultVolume;
-						}
-						thisObj.setVolume(thisObj.volume);
+              thisObj.duration = mediaTimes['duration'];
+              thisObj.elapsed = mediaTimes['elapsed'];
 
-						if (thisObj.transcriptType) {
-							thisObj.addTranscriptAreaEvents();
-							thisObj.updateTranscript();
-						}
-						if (thisObj.mediaType === 'video') {
-							thisObj.initDescription();
-						}
-						if (thisObj.captions.length) {
-							thisObj.initDefaultCaption();
-						}
+              thisObj.setFullscreen(false);
 
-						// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
-						// This tells browsers to ignore the text tracks so Able Player can handle them
-						// However, timing is critical as browsers - especially Safari - tend to ignore this request
-						// unless it's sent late in the intialization process.
-						// If browsers ignore the request, the result is redundant captions
-						thisObj.setMediaAttributes();
-						thisObj.addControls();
-						thisObj.addEventListeners();
-
-						// inject each of the hidden forms that will be accessed from the Preferences popup menu
-						prefsGroups = thisObj.getPreferencesGroups();
-						for (i = 0; i < prefsGroups.length; i++) {
-							thisObj.injectPrefsForm(prefsGroups[i]);
-							 }
-						thisObj.setupPopups();
-						thisObj.updateCaption();
-						thisObj.injectVTS();
-						if (thisObj.chaptersDivLocation) {
-							thisObj.populateChaptersDiv();
-							 }
-						thisObj.showSearchResults();
-
-						// Go ahead and load media, without user requesting it
-						// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
-            // However, the media needs to load before the 'loadedmetadata' event is fired
-            // and until that happens we can't get the media's duration
-						if (thisObj.player === 'html5') {
-							thisObj.$media[0].load();
-						}
-						// refreshControls is called twice building/initializing the player
-						// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
-						setTimeout(function() {
-							thisObj.refreshControls('init');
-						},100);
+              if (typeof thisObj.volume === 'undefined') {
+  						  thisObj.volume = thisObj.defaultVolume;
+						  }
+              thisObj.setVolume(thisObj.volume);
+
+              if (thisObj.transcriptType) {
+							  thisObj.addTranscriptAreaEvents();
+                thisObj.updateTranscript();
+						  }
+              if (thisObj.mediaType === 'video') {
+							  thisObj.initDescription();
+						  }
+              if (thisObj.captions.length) {
+							  thisObj.initDefaultCaption();
+						  }
+
+              // setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
+              // This tells browsers to ignore the text tracks so Able Player can handle them
+              // However, timing is critical as browsers - especially Safari - tend to ignore this request
+              // unless it's sent late in the intialization process.
+              // If browsers ignore the request, the result is redundant captions
+              thisObj.setMediaAttributes();
+              thisObj.addControls();
+              thisObj.addEventListeners();
+
+              // inject each of the hidden forms that will be accessed from the Preferences popup menu
+              prefsGroups = thisObj.getPreferencesGroups();
+              for (i = 0; i < prefsGroups.length; i++) {
+							  thisObj.injectPrefsForm(prefsGroups[i]);
+				      }
+              thisObj.setupPopups();
+              thisObj.updateCaption();
+              thisObj.injectVTS();
+              if (thisObj.chaptersDivLocation) {
+							  thisObj.populateChaptersDiv();
+				      }
+              thisObj.showSearchResults();
+
+              // Go ahead and load media, without user requesting it
+              // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
+              // However, the media needs to load before the 'loadedmetadata' event is fired
+              // and until that happens we can't get the media's duration
+              if (thisObj.player === 'html5') {
+							  thisObj.$media[0].load();
+						  }
+              // refreshControls is called twice building/initializing the player
+              // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
+              setTimeout(function() {
+							  thisObj.refreshControls('init');
+						  },100);
+            });
 					},
 					function() {	 // initPlayer fail
 						thisObj.provideFallback();
@@ -4030,12 +4036,6 @@ var AblePlayerInstances = [];
       $sliderDiv = $('<div class="able-seekbar"></div>');
 			sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel;
 			this.$controllerDiv.append($sliderDiv);
-			if (typeof this.duration === 'undefined' || this.duration === 0) {
-			  // set arbitrary starting duration, and change it when duration is known
-				this.duration = 60;
-				// also set elapsed to 0
-				this.elapsed = 0;
-		  }
 			this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible');
 		}
 

diff --git a/build/ableplayer.min.js b/build/ableplayer.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ableplayer",
-  "version": "4.2.4",
+  "version": "4.2.5",
   "description": "fully accessible HTML5 media player",
   "homepage": "http://ableplayer.github.io/ableplayer",
   "bugs": "https://github.com/ableplayer/ableplayer/issues",

diff --git a/scripts/buildplayer.js b/scripts/buildplayer.js
@@ -994,12 +994,6 @@
       $sliderDiv = $('<div class="able-seekbar"></div>');
 			sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel;
 			this.$controllerDiv.append($sliderDiv);
-			if (typeof this.duration === 'undefined' || this.duration === 0) {
-			  // set arbitrary starting duration, and change it when duration is known
-				this.duration = 60;
-				// also set elapsed to 0
-				this.elapsed = 0;
-		  }
 			this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible');
 		}
 

diff --git a/scripts/initialize.js b/scripts/initialize.js
@@ -571,58 +571,64 @@
 
 					thisObj.setupTranscript().then(function() {
 
-						thisObj.setFullscreen(false);
-
-						if (typeof thisObj.volume === 'undefined') {
-  						thisObj.volume = thisObj.defaultVolume;
-						}
-						thisObj.setVolume(thisObj.volume);
-
-						if (thisObj.transcriptType) {
-							thisObj.addTranscriptAreaEvents();
-							thisObj.updateTranscript();
-						}
-						if (thisObj.mediaType === 'video') {
-							thisObj.initDescription();
-						}
-						if (thisObj.captions.length) {
-							thisObj.initDefaultCaption();
-						}
-
-						// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
-						// This tells browsers to ignore the text tracks so Able Player can handle them
-						// However, timing is critical as browsers - especially Safari - tend to ignore this request
-						// unless it's sent late in the intialization process.
-						// If browsers ignore the request, the result is redundant captions
-						thisObj.setMediaAttributes();
-						thisObj.addControls();
-						thisObj.addEventListeners();
-
-						// inject each of the hidden forms that will be accessed from the Preferences popup menu
-						prefsGroups = thisObj.getPreferencesGroups();
-						for (i = 0; i < prefsGroups.length; i++) {
-							thisObj.injectPrefsForm(prefsGroups[i]);
-							 }
-						thisObj.setupPopups();
-						thisObj.updateCaption();
-						thisObj.injectVTS();
-						if (thisObj.chaptersDivLocation) {
-							thisObj.populateChaptersDiv();
-							 }
-						thisObj.showSearchResults();
-
-						// Go ahead and load media, without user requesting it
-						// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
-            // However, the media needs to load before the 'loadedmetadata' event is fired
-            // and until that happens we can't get the media's duration
-						if (thisObj.player === 'html5') {
-							thisObj.$media[0].load();
-						}
-						// refreshControls is called twice building/initializing the player
-						// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
-						setTimeout(function() {
-							thisObj.refreshControls('init');
-						},100);
+            thisObj.getMediaTimes().then(function(mediaTimes) {
+
+              thisObj.duration = mediaTimes['duration'];
+              thisObj.elapsed = mediaTimes['elapsed'];
+
+              thisObj.setFullscreen(false);
+
+              if (typeof thisObj.volume === 'undefined') {
+  						  thisObj.volume = thisObj.defaultVolume;
+						  }
+              thisObj.setVolume(thisObj.volume);
+
+              if (thisObj.transcriptType) {
+							  thisObj.addTranscriptAreaEvents();
+                thisObj.updateTranscript();
+						  }
+              if (thisObj.mediaType === 'video') {
+							  thisObj.initDescription();
+						  }
+              if (thisObj.captions.length) {
+							  thisObj.initDefaultCaption();
+						  }
+
+              // setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
+              // This tells browsers to ignore the text tracks so Able Player can handle them
+              // However, timing is critical as browsers - especially Safari - tend to ignore this request
+              // unless it's sent late in the intialization process.
+              // If browsers ignore the request, the result is redundant captions
+              thisObj.setMediaAttributes();
+              thisObj.addControls();
+              thisObj.addEventListeners();
+
+              // inject each of the hidden forms that will be accessed from the Preferences popup menu
+              prefsGroups = thisObj.getPreferencesGroups();
+              for (i = 0; i < prefsGroups.length; i++) {
+							  thisObj.injectPrefsForm(prefsGroups[i]);
+				      }
+              thisObj.setupPopups();
+              thisObj.updateCaption();
+              thisObj.injectVTS();
+              if (thisObj.chaptersDivLocation) {
+							  thisObj.populateChaptersDiv();
+				      }
+              thisObj.showSearchResults();
+
+              // Go ahead and load media, without user requesting it
+              // Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
+              // However, the media needs to load before the 'loadedmetadata' event is fired
+              // and until that happens we can't get the media's duration
+              if (thisObj.player === 'html5') {
+							  thisObj.$media[0].load();
+						  }
+              // refreshControls is called twice building/initializing the player
+              // this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
+              setTimeout(function() {
+							  thisObj.refreshControls('init');
+						  },100);
+            });
 					},
 					function() {	 // initPlayer fail
 						thisObj.provideFallback();