Skip to content

Commit de93728

Browse files
author
terrill
committed
Wait to get media duration before building player
1 parent 56df315 commit de93728

6 files changed

Lines changed: 171 additions & 171 deletions

File tree

‎build/ableplayer.dist.js‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1125,58 +1125,64 @@ var AblePlayerInstances = [];
11251125

11261126
thisObj.setupTranscript().then(function() {
11271127

1128-
thisObj.setFullscreen(false);
1128+
thisObj.getMediaTimes().then(function(mediaTimes) {
11291129

1130-
if (typeof thisObj.volume === 'undefined') {
1131-
thisObj.volume = thisObj.defaultVolume;
1132-
}
1133-
thisObj.setVolume(thisObj.volume);
1130+
thisObj.duration = mediaTimes['duration'];
1131+
thisObj.elapsed = mediaTimes['elapsed'];
11341132

1135-
if (thisObj.transcriptType) {
1136-
thisObj.addTranscriptAreaEvents();
1137-
thisObj.updateTranscript();
1138-
}
1139-
if (thisObj.mediaType === 'video') {
1140-
thisObj.initDescription();
1141-
}
1142-
if (thisObj.captions.length) {
1143-
thisObj.initDefaultCaption();
1144-
}
1133+
thisObj.setFullscreen(false);
11451134

1146-
// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
1147-
// This tells browsers to ignore the text tracks so Able Player can handle them
1148-
// However, timing is critical as browsers - especially Safari - tend to ignore this request
1149-
// unless it's sent late in the intialization process.
1150-
// If browsers ignore the request, the result is redundant captions
1151-
thisObj.setMediaAttributes();
1152-
thisObj.addControls();
1153-
thisObj.addEventListeners();
1154-
1155-
// inject each of the hidden forms that will be accessed from the Preferences popup menu
1156-
prefsGroups = thisObj.getPreferencesGroups();
1157-
for (i = 0; i < prefsGroups.length; i++) {
1158-
thisObj.injectPrefsForm(prefsGroups[i]);
1159-
}
1160-
thisObj.setupPopups();
1161-
thisObj.updateCaption();
1162-
thisObj.injectVTS();
1163-
if (thisObj.chaptersDivLocation) {
1164-
thisObj.populateChaptersDiv();
1165-
}
1166-
thisObj.showSearchResults();
1167-
1168-
// Go ahead and load media, without user requesting it
1169-
// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
1170-
// However, the media needs to load before the 'loadedmetadata' event is fired
1171-
// and until that happens we can't get the media's duration
1172-
if (thisObj.player === 'html5') {
1173-
thisObj.$media[0].load();
1174-
}
1175-
// refreshControls is called twice building/initializing the player
1176-
// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
1177-
setTimeout(function() {
1178-
thisObj.refreshControls('init');
1179-
},100);
1135+
if (typeof thisObj.volume === 'undefined') {
1136+
thisObj.volume = thisObj.defaultVolume;
1137+
}
1138+
thisObj.setVolume(thisObj.volume);
1139+
1140+
if (thisObj.transcriptType) {
1141+
thisObj.addTranscriptAreaEvents();
1142+
thisObj.updateTranscript();
1143+
}
1144+
if (thisObj.mediaType === 'video') {
1145+
thisObj.initDescription();
1146+
}
1147+
if (thisObj.captions.length) {
1148+
thisObj.initDefaultCaption();
1149+
}
1150+
1151+
// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
1152+
// This tells browsers to ignore the text tracks so Able Player can handle them
1153+
// However, timing is critical as browsers - especially Safari - tend to ignore this request
1154+
// unless it's sent late in the intialization process.
1155+
// If browsers ignore the request, the result is redundant captions
1156+
thisObj.setMediaAttributes();
1157+
thisObj.addControls();
1158+
thisObj.addEventListeners();
1159+
1160+
// inject each of the hidden forms that will be accessed from the Preferences popup menu
1161+
prefsGroups = thisObj.getPreferencesGroups();
1162+
for (i = 0; i < prefsGroups.length; i++) {
1163+
thisObj.injectPrefsForm(prefsGroups[i]);
1164+
}
1165+
thisObj.setupPopups();
1166+
thisObj.updateCaption();
1167+
thisObj.injectVTS();
1168+
if (thisObj.chaptersDivLocation) {
1169+
thisObj.populateChaptersDiv();
1170+
}
1171+
thisObj.showSearchResults();
1172+
1173+
// Go ahead and load media, without user requesting it
1174+
// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
1175+
// However, the media needs to load before the 'loadedmetadata' event is fired
1176+
// and until that happens we can't get the media's duration
1177+
if (thisObj.player === 'html5') {
1178+
thisObj.$media[0].load();
1179+
}
1180+
// refreshControls is called twice building/initializing the player
1181+
// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
1182+
setTimeout(function() {
1183+
thisObj.refreshControls('init');
1184+
},100);
1185+
});
11801186
},
11811187
function() { // initPlayer fail
11821188
thisObj.provideFallback();
@@ -4030,12 +4036,6 @@ var AblePlayerInstances = [];
40304036
$sliderDiv = $('<div class="able-seekbar"></div>');
40314037
sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel;
40324038
this.$controllerDiv.append($sliderDiv);
4033-
if (typeof this.duration === 'undefined' || this.duration === 0) {
4034-
// set arbitrary starting duration, and change it when duration is known
4035-
this.duration = 60;
4036-
// also set elapsed to 0
4037-
this.elapsed = 0;
4038-
}
40394039
this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible');
40404040
}
40414041

‎build/ableplayer.js‎

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1125,58 +1125,64 @@ var AblePlayerInstances = [];
11251125

11261126
thisObj.setupTranscript().then(function() {
11271127

1128-
thisObj.setFullscreen(false);
1128+
thisObj.getMediaTimes().then(function(mediaTimes) {
11291129

1130-
if (typeof thisObj.volume === 'undefined') {
1131-
thisObj.volume = thisObj.defaultVolume;
1132-
}
1133-
thisObj.setVolume(thisObj.volume);
1130+
thisObj.duration = mediaTimes['duration'];
1131+
thisObj.elapsed = mediaTimes['elapsed'];
11341132

1135-
if (thisObj.transcriptType) {
1136-
thisObj.addTranscriptAreaEvents();
1137-
thisObj.updateTranscript();
1138-
}
1139-
if (thisObj.mediaType === 'video') {
1140-
thisObj.initDescription();
1141-
}
1142-
if (thisObj.captions.length) {
1143-
thisObj.initDefaultCaption();
1144-
}
1133+
thisObj.setFullscreen(false);
11451134

1146-
// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
1147-
// This tells browsers to ignore the text tracks so Able Player can handle them
1148-
// However, timing is critical as browsers - especially Safari - tend to ignore this request
1149-
// unless it's sent late in the intialization process.
1150-
// If browsers ignore the request, the result is redundant captions
1151-
thisObj.setMediaAttributes();
1152-
thisObj.addControls();
1153-
thisObj.addEventListeners();
1154-
1155-
// inject each of the hidden forms that will be accessed from the Preferences popup menu
1156-
prefsGroups = thisObj.getPreferencesGroups();
1157-
for (i = 0; i < prefsGroups.length; i++) {
1158-
thisObj.injectPrefsForm(prefsGroups[i]);
1159-
}
1160-
thisObj.setupPopups();
1161-
thisObj.updateCaption();
1162-
thisObj.injectVTS();
1163-
if (thisObj.chaptersDivLocation) {
1164-
thisObj.populateChaptersDiv();
1165-
}
1166-
thisObj.showSearchResults();
1167-
1168-
// Go ahead and load media, without user requesting it
1169-
// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
1170-
// However, the media needs to load before the 'loadedmetadata' event is fired
1171-
// and until that happens we can't get the media's duration
1172-
if (thisObj.player === 'html5') {
1173-
thisObj.$media[0].load();
1174-
}
1175-
// refreshControls is called twice building/initializing the player
1176-
// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
1177-
setTimeout(function() {
1178-
thisObj.refreshControls('init');
1179-
},100);
1135+
if (typeof thisObj.volume === 'undefined') {
1136+
thisObj.volume = thisObj.defaultVolume;
1137+
}
1138+
thisObj.setVolume(thisObj.volume);
1139+
1140+
if (thisObj.transcriptType) {
1141+
thisObj.addTranscriptAreaEvents();
1142+
thisObj.updateTranscript();
1143+
}
1144+
if (thisObj.mediaType === 'video') {
1145+
thisObj.initDescription();
1146+
}
1147+
if (thisObj.captions.length) {
1148+
thisObj.initDefaultCaption();
1149+
}
1150+
1151+
// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
1152+
// This tells browsers to ignore the text tracks so Able Player can handle them
1153+
// However, timing is critical as browsers - especially Safari - tend to ignore this request
1154+
// unless it's sent late in the intialization process.
1155+
// If browsers ignore the request, the result is redundant captions
1156+
thisObj.setMediaAttributes();
1157+
thisObj.addControls();
1158+
thisObj.addEventListeners();
1159+
1160+
// inject each of the hidden forms that will be accessed from the Preferences popup menu
1161+
prefsGroups = thisObj.getPreferencesGroups();
1162+
for (i = 0; i < prefsGroups.length; i++) {
1163+
thisObj.injectPrefsForm(prefsGroups[i]);
1164+
}
1165+
thisObj.setupPopups();
1166+
thisObj.updateCaption();
1167+
thisObj.injectVTS();
1168+
if (thisObj.chaptersDivLocation) {
1169+
thisObj.populateChaptersDiv();
1170+
}
1171+
thisObj.showSearchResults();
1172+
1173+
// Go ahead and load media, without user requesting it
1174+
// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
1175+
// However, the media needs to load before the 'loadedmetadata' event is fired
1176+
// and until that happens we can't get the media's duration
1177+
if (thisObj.player === 'html5') {
1178+
thisObj.$media[0].load();
1179+
}
1180+
// refreshControls is called twice building/initializing the player
1181+
// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
1182+
setTimeout(function() {
1183+
thisObj.refreshControls('init');
1184+
},100);
1185+
});
11801186
},
11811187
function() { // initPlayer fail
11821188
thisObj.provideFallback();
@@ -4030,12 +4036,6 @@ var AblePlayerInstances = [];
40304036
$sliderDiv = $('<div class="able-seekbar"></div>');
40314037
sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel;
40324038
this.$controllerDiv.append($sliderDiv);
4033-
if (typeof this.duration === 'undefined' || this.duration === 0) {
4034-
// set arbitrary starting duration, and change it when duration is known
4035-
this.duration = 60;
4036-
// also set elapsed to 0
4037-
this.elapsed = 0;
4038-
}
40394039
this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible');
40404040
}
40414041

‎build/ableplayer.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ableplayer",
3-
"version": "4.2.4",
3+
"version": "4.2.5",
44
"description": "fully accessible HTML5 media player",
55
"homepage": "http://ableplayer.github.io/ableplayer",
66
"bugs": "https://github.com/ableplayer/ableplayer/issues",

‎scripts/buildplayer.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -994,12 +994,6 @@
994994
$sliderDiv = $('<div class="able-seekbar"></div>');
995995
sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel;
996996
this.$controllerDiv.append($sliderDiv);
997-
if (typeof this.duration === 'undefined' || this.duration === 0) {
998-
// set arbitrary starting duration, and change it when duration is known
999-
this.duration = 60;
1000-
// also set elapsed to 0
1001-
this.elapsed = 0;
1002-
}
1003997
this.seekBar = new AccessibleSlider(this.mediaType, $sliderDiv, 'horizontal', baseSliderWidth, 0, this.duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible');
1004998
}
1005999

‎scripts/initialize.js‎

Lines changed: 58 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -571,58 +571,64 @@
571571

572572
thisObj.setupTranscript().then(function() {
573573

574-
thisObj.setFullscreen(false);
575-
576-
if (typeof thisObj.volume === 'undefined') {
577-
thisObj.volume = thisObj.defaultVolume;
578-
}
579-
thisObj.setVolume(thisObj.volume);
580-
581-
if (thisObj.transcriptType) {
582-
thisObj.addTranscriptAreaEvents();
583-
thisObj.updateTranscript();
584-
}
585-
if (thisObj.mediaType === 'video') {
586-
thisObj.initDescription();
587-
}
588-
if (thisObj.captions.length) {
589-
thisObj.initDefaultCaption();
590-
}
591-
592-
// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
593-
// This tells browsers to ignore the text tracks so Able Player can handle them
594-
// However, timing is critical as browsers - especially Safari - tend to ignore this request
595-
// unless it's sent late in the intialization process.
596-
// If browsers ignore the request, the result is redundant captions
597-
thisObj.setMediaAttributes();
598-
thisObj.addControls();
599-
thisObj.addEventListeners();
600-
601-
// inject each of the hidden forms that will be accessed from the Preferences popup menu
602-
prefsGroups = thisObj.getPreferencesGroups();
603-
for (i = 0; i < prefsGroups.length; i++) {
604-
thisObj.injectPrefsForm(prefsGroups[i]);
605-
}
606-
thisObj.setupPopups();
607-
thisObj.updateCaption();
608-
thisObj.injectVTS();
609-
if (thisObj.chaptersDivLocation) {
610-
thisObj.populateChaptersDiv();
611-
}
612-
thisObj.showSearchResults();
613-
614-
// Go ahead and load media, without user requesting it
615-
// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
616-
// However, the media needs to load before the 'loadedmetadata' event is fired
617-
// and until that happens we can't get the media's duration
618-
if (thisObj.player === 'html5') {
619-
thisObj.$media[0].load();
620-
}
621-
// refreshControls is called twice building/initializing the player
622-
// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
623-
setTimeout(function() {
624-
thisObj.refreshControls('init');
625-
},100);
574+
thisObj.getMediaTimes().then(function(mediaTimes) {
575+
576+
thisObj.duration = mediaTimes['duration'];
577+
thisObj.elapsed = mediaTimes['elapsed'];
578+
579+
thisObj.setFullscreen(false);
580+
581+
if (typeof thisObj.volume === 'undefined') {
582+
thisObj.volume = thisObj.defaultVolume;
583+
}
584+
thisObj.setVolume(thisObj.volume);
585+
586+
if (thisObj.transcriptType) {
587+
thisObj.addTranscriptAreaEvents();
588+
thisObj.updateTranscript();
589+
}
590+
if (thisObj.mediaType === 'video') {
591+
thisObj.initDescription();
592+
}
593+
if (thisObj.captions.length) {
594+
thisObj.initDefaultCaption();
595+
}
596+
597+
// setMediaAttributes() sets textTrack.mode to 'disabled' for all tracks
598+
// This tells browsers to ignore the text tracks so Able Player can handle them
599+
// However, timing is critical as browsers - especially Safari - tend to ignore this request
600+
// unless it's sent late in the intialization process.
601+
// If browsers ignore the request, the result is redundant captions
602+
thisObj.setMediaAttributes();
603+
thisObj.addControls();
604+
thisObj.addEventListeners();
605+
606+
// inject each of the hidden forms that will be accessed from the Preferences popup menu
607+
prefsGroups = thisObj.getPreferencesGroups();
608+
for (i = 0; i < prefsGroups.length; i++) {
609+
thisObj.injectPrefsForm(prefsGroups[i]);
610+
}
611+
thisObj.setupPopups();
612+
thisObj.updateCaption();
613+
thisObj.injectVTS();
614+
if (thisObj.chaptersDivLocation) {
615+
thisObj.populateChaptersDiv();
616+
}
617+
thisObj.showSearchResults();
618+
619+
// Go ahead and load media, without user requesting it
620+
// Ideally, we would wait until user clicks play, rather than unnecessarily consume their bandwidth
621+
// However, the media needs to load before the 'loadedmetadata' event is fired
622+
// and until that happens we can't get the media's duration
623+
if (thisObj.player === 'html5') {
624+
thisObj.$media[0].load();
625+
}
626+
// refreshControls is called twice building/initializing the player
627+
// this is the second. Best to pause a bit before executing, to be sure all prior steps are complete
628+
setTimeout(function() {
629+
thisObj.refreshControls('init');
630+
},100);
631+
});
626632
},
627633
function() { // initPlayer fail
628634
thisObj.provideFallback();

0 commit comments

Comments
 (0)