Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
f48b0e1
Merge pull request #665 from ableplayer/main
joedolson Aug 11, 2025
8276147
Both slower and faster SVG should have same viewBox
joedolson Aug 12, 2025
dff4377
Merge branch 'develop' of https://github.com/ableplayer/ableplayer in…
joedolson Aug 12, 2025
5ce7938
Typos
joedolson Aug 12, 2025
14f73ae
Bug fix: Didn't handle case where player was Youtube and Sign was local.
joedolson Aug 14, 2025
4415775
Improve logic for identifying appropriate sign src.
joedolson Aug 14, 2025
3244629
Adjust min-height of captions/description container
joedolson Aug 31, 2025
8c3d183
Give big play button a partially transparent background.
joedolson Aug 31, 2025
4746d2e
Move colors to inherited variables.
joedolson Aug 31, 2025
089783f
Missing wrapper on playlist 1 demo
joedolson Aug 31, 2025
ba70559
Update URLs, URL indices, move urls for contributing to contribution.
joedolson Aug 31, 2025
c99ac08
fix for regex in the postprocessCTag function
jeanem Sep 4, 2025
4785eca
Merge pull request #679 from jeanem/post-processing-fix
joedolson Sep 5, 2025
03915e2
Remove some unused variables.
joedolson Sep 5, 2025
acdbb7c
Add headings for individual demos
joedolson Sep 5, 2025
083683f
Remove fixed width and height on big play button
joedolson Sep 5, 2025
73894a1
toggleButtonState logic was backwards, resulting in reversed triggers.
joedolson Sep 5, 2025
9b5abec
Description button state is always set at init, and doesn't need to b…
joedolson Sep 5, 2025
d868d92
Check for sign language source checked media object instead of source.
joedolson Sep 5, 2025
c98859c
The volume popup is `.able-volume-slider`, not popup.
joedolson Sep 5, 2025
e09ea94
Update inline documentation about the play and playing events
joedolson Sep 6, 2025
198a5d7
Don't refresh controls on the 'play' event.
joedolson Sep 6, 2025
bd4be73
Why is this here?
joedolson Sep 6, 2025
679394f
Volume option is requested in syncSignVideo, but not used.
joedolson Sep 6, 2025
4edf90c
Improved comment
joedolson Sep 6, 2025
2c84971
If JSON translations not found, look for old version before erroring.
joedolson Sep 18, 2025
e79652d
Note that this demo uses images instead of svgs.
joedolson Sep 18, 2025
ef7f2ab
Update built packages
joedolson Sep 18, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 10 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -360,10 +360,7 @@ Setting this to "off" is useful if all videos have plenty of audio space for des

### Sign language

Sign language translation is supported in a separate video player, synchronized with the main player. Tips for filming a sign language interpreter are available from [Signing Books for the Deaf][]:

* [Filming the Signer][]
* [Editing the Signer][]
Sign language translation is supported in a separate video player, synchronized with the main player. Some tips for filming a sign language interpreter are available from [Signing Books for the Deaf][].

#### Loading from local source

Expand Down Expand Up @@ -573,7 +570,6 @@ If you don’t have access to your server’s .htaccess file, you should be able
If your site is running on a Windows server, consult the documentation from Microsoft. For example:

- [Configuring MIME Types in IIS 7][]
- [How to add MIME Types with IIS7 Web.config][]

## Keyboard Shortcuts

Expand Down Expand Up @@ -610,41 +606,27 @@ One of *Able Player’s* accessibility features is that the player is highly cus
- Highlight transcript as video plays
- Keyboard-enable transcript

## Acknowledgments
## Acknowledgements

- Able Player development is supported in part by the [AccessComputing][] project at the University of Washington, with financial support from the National Science Foundation (grants #CNS-0540615, CNS-0837508, and CNS-1042260).
- Additional support has been provided by the [Committee on Institutional Cooperation][] (CIC).
- Turtle and rabbit icons (available as optional alternatives for the speed buttons) are provided courtesy of [Icons8][].
- Sample video tracks are provided courtesy of [The DO-IT Center][] at the University of Washington. Additional videos are available on the [DO-IT Video][] website, which uses Able Player.
- Sample audio tracks feature songs by Terrill Thompson, Able Player's creator and original lead developer. Check out [Terrill's music site] for more listening, and to support his work.

[AccessComputing]: http://washington.edu/accesscomputing
[Committee on Institutional Cooperation]: https://www.cic.net/home
[Configuring MIME Types in IIS 7]: http://technet.microsoft.com/en-us/library/17bda1f4-8a0d-440f-986a-5aaa9d40b74c.aspx
[Editing the Signer]: http://www.sign-lang.uni-hamburg.de/signingbooks/sbrc/grid/d71/guide13.htm
[develop]: https://github.com/ableplayer/ableplayer/tree/develop
[examples]: http://ableplayer.github.io/ableplayer/demos/
[Filming the Signer]: http://www.sign-lang.uni-hamburg.de/signingbooks/sbrc/grid/d71/guide12.htm
[Flavors, by Flow Theory]: http://www.terrillthompson.com/music/2012/01/flow-theory-flavors/
[DO-IT Video]: http://washington.edu/doit/video
[Google Developer Console]: https://console.developers.google.com/
[Google's Getting Started page]: https://developers.google.com/api-client-library/javascript/start/start-js#Getkeysforyourapplication
[Grunt]: http://gruntjs.com/
[How to add MIME Types with IIS7 Web.config]: http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
[AccessComputing]: https://www.washington.edu/accesscomputing/
[Committee on Institutional Cooperation]: https://btaa.org/about/news-and-publications/news/2016/06/30/the-committee-on-institutional-cooperation-is-now-the-big-ten-academic-alliance
[Configuring MIME Types in IIS 7]: https://learn.microsoft.com/en-us/previous-versions/windows/it-pro/windows-server-2008-R2-and-2008/cc753281(v=ws.10)
[examples]: https://ableplayer.github.io/ableplayer/demos/
[DO-IT Video]: https://doit.uw.edu/videos/
[Icons8]: https://icons8.com
[issues]: https://github.com/ableplayer/ableplayer/issues
[jQuery]: http://jquery.com/
[jquery.cookie]: https://github.com/carhartl/jquery-cookie
[jQuery]: https://jquery.com/
[js-cookie]: https://github.com/js-cookie/js-cookie
[JW Player]: http://www.jwplayer.com/
[Modernizr]: http://modernizr.com/
[npm]: https://www.npmjs.com/
[Signing Books for the Deaf]: http://www.sign-lang.uni-hamburg.de/signingbooks/
[Signing Books for the Deaf]: https://pragmaprojects.eu/signingbooks/index.php/the-project/summary
[Terrill's music site]: https://terrillthompson.com/music
[The DO-IT Center]: http://washington.edu/doit
[The DO-IT Center]: https://doit.uw.edu/
[Video Demo #7]: demos/video7.html
[WebVTT validator]: https://quuz.org/webvtt/
[WebAIM’s 2017 Screen Reader User Survey]: https://webaim.org/projects/screenreadersurvey7/#browsers
[WebVTT]: https://w3c.github.io/webvtt/
[Web Speech API]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API
[YouTube's Terms of Service]: https://developers.google.com/youtube/terms/required-minimum-functionality#overlays-and-frames
103 changes: 43 additions & 60 deletions build/ableplayer.dist.js
Original file line number Diff line number Diff line change
Expand Up @@ -1486,7 +1486,7 @@ var AblePlayerInstances = [];
break;

case 'slower':
svg[0] = '0 0 20 20';
svg[0] = '0 0 11 20';
svg[1] = 'M0 7.321q0-0.29 0.212-0.502t0.502-0.212h10q0.29 0 0.502 0.212t0.212 0.502-0.212 0.502l-5 5q-0.212 0.212-0.502 0.212t-0.502-0.212l-5-5q-0.212-0.212-0.212-0.502z';
svg[2] = 'icon-slower';
svg[3] = this.slowerButtonImg;
Expand Down Expand Up @@ -3694,7 +3694,7 @@ var AblePlayerInstances = [];

AblePlayer.prototype.injectBigPlayButton = function () {

var thisObj, svgData, buttonIcon, svgPath;
var thisObj;

thisObj = this;

Expand Down Expand Up @@ -5012,7 +5012,7 @@ var postProcessing = {
return vttContent.replace(
/<c class="([\w\s]+)">/g,
function (_, classNames) {
var classes = classNames.replace(/\./g, " ");
var classes = classNames.replace(/ /g, ".");
return "<c." + classes + ">";
}
);
Expand Down Expand Up @@ -7539,6 +7539,13 @@ if (typeof module !== "undefined" && module.exports) {
this.youTubeSignPlayer.playVideo();
}
}
if (options && typeof options.volume !== 'undefined') {
if ( this.signVideo ) {
this.signVideo.volume = 0;
} else {
this.youTubeSignPlayer.setVolume(0);
}
}
}
};

Expand Down Expand Up @@ -7722,17 +7729,6 @@ if (typeof module !== "undefined" && module.exports) {
}
}

if (context === 'descriptions' || context == 'init'){
if (this.$descButton) {
this.toggleButtonState(
this.$descButton,
this.descOn,
this.tt.turnOffDescriptions,
this.tt.turnOnDescriptions,
);
}
}

if (context === 'captions' || context == 'init') {

if (this.$ccButton) {
Expand All @@ -7753,6 +7749,7 @@ if (typeof module !== "undefined" && module.exports) {
this.captionsOn,
ariaLabelOff,
ariaLabelOn,
'buttonOff',
ariaPressed
);
}
Expand All @@ -7777,14 +7774,6 @@ if (typeof module !== "undefined" && module.exports) {
if (!this.hideBigPlayButton) {
this.$bigPlayButton.show();
this.$bigPlayButton.attr('aria-hidden', 'false');

}
if (this.fullscreen) {
this.$bigPlayButton.width($(window).width());
this.$bigPlayButton.height($(window).height());
} else {
this.$bigPlayButton.width(this.$mediaContainer.width());
this.$bigPlayButton.height(this.$mediaContainer.height());
}
} else {
this.$bigPlayButton.hide();
Expand Down Expand Up @@ -7908,7 +7897,6 @@ if (typeof module !== "undefined" && module.exports) {
};

AblePlayer.prototype.handlePlay = function(e) {

if (this.paused) {
this.okToPlay = true;
this.playMedia();
Expand Down Expand Up @@ -8206,7 +8194,6 @@ if (typeof module !== "undefined" && module.exports) {
};

AblePlayer.prototype.handleTranscriptToggle = function () {

var thisObj = this;
var visible = this.$transcriptDiv.is(':visible');
if ( visible ) {
Expand Down Expand Up @@ -8455,22 +8442,22 @@ if (typeof module !== "undefined" && module.exports) {

AblePlayer.prototype.toggleButtonState = function($button, isOn, onLabel, offLabel, offClass = 'buttonOff', ariaPressed = false, ariaExpanded = false) {
if (isOn) {
$button.removeClass(offClass).attr('aria-label', onLabel);
$button.find('span.able-clipped').text(onLabel);
$button.addClass(offClass).attr('aria-label', offLabel);
$button.find('span.able-clipped').text(offLabel);
if ( ariaPressed ) {
$button.attr('aria-pressed', 'true');
$button.attr('aria-pressed', 'false');
}
if ( ariaExpanded ) {
$button.attr( 'aria-expanded', 'true' );
$button.attr( 'aria-expanded', 'false' );
}
} else {
$button.addClass(offClass).attr('aria-label', offLabel);
$button.find('span.able-clipped').text(offLabel);
$button.removeClass(offClass).attr('aria-label', onLabel);
$button.find('span.able-clipped').text(onLabel);
if ( ariaPressed ) {
$button.attr('aria-pressed', 'false');
$button.attr('aria-pressed', 'true');
}
if ( ariaExpanded ) {
$button.attr( 'aria-expanded', 'false' );
$button.attr( 'aria-expanded', 'true' );
}
}
};
Expand Down Expand Up @@ -10612,9 +10599,7 @@ if (typeof module !== "undefined" && module.exports) {
};

AblePlayer.prototype.onClickPlayerButton = function (el) {

var whichButton, prefsPopup;

whichButton = this.getButtonNameFromClass($(el).attr('class'));
switch ( whichButton ) {
case 'play':
Expand Down Expand Up @@ -10845,17 +10830,13 @@ if (typeof module !== "undefined" && module.exports) {
})
.on('loadedmetadata',function() {
thisObj.duration = thisObj.media.duration;
var x = 50.5;
var y = 51.9;
var diff = Math.abs(Math.round(x)-Math.round(y));
})
.on('canplay',function() {
})
.on('canplaythrough',function() {
thisObj.onMediaNewSourceLoad();
thisObj.onMediaNewSourceLoad();
})
.on('play',function() {
thisObj.refreshControls('playpause');
})
.on('playing',function() {
thisObj.playing = true;
Expand Down Expand Up @@ -10977,7 +10958,6 @@ if (typeof module !== "undefined" && module.exports) {
};

AblePlayer.prototype.addEventListeners = function () {

var thisObj = this;

$(window).on('resize',function () {
Expand Down Expand Up @@ -11018,7 +10998,7 @@ if (typeof module !== "undefined" && module.exports) {
if (e.button !== 0) {
return false;
}
if ($('.able-popup:visible').length || $('.able-volume-popup:visible')) {
if ($('.able-popup:visible').length || $('.able-volume-slider:visible').length ) {
thisObj.closePopups();
}
if (e.target.tagName === 'VIDEO') {
Expand Down Expand Up @@ -11771,23 +11751,22 @@ if (typeof module !== "undefined" && module.exports) {

(function ($) {
AblePlayer.prototype.initSignLanguage = function() {

var hasLocalSrc = ( this.$media.data('sign-src') !== undefined && this.$media.data('sign-src') !== "" );
this.hasSignLanguage = false;
var hasLocalSrc = ( this.$sources.first().attr('data-sign-src') !== undefined && this.$sources.first().attr('data-sign-src') !== "" );
var hasRemoteSrc = ( this.$media.data('youtube-sign-src') !== undefined && this.$media.data('youtube-sign-src') !== "" );
if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc ) ) {
this.hasSignLanguage = true;
var hasRemoteSource = ( this.$sources.first().attr('data-youtube-sign-src') !== undefined && this.$sources.first().attr('data-youtube-sign-src') !== '' );
if ( ! this.isIOS() && ( hasLocalSrc || hasRemoteSrc || hasRemoteSource ) && ( this.player === 'html5' || this.player === 'youtube' ) ) {
let ytSignSrc = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') );
let signSrc = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') );
let signVideo = DOMPurify.sanitize( this.$media.data('youtube-sign-src') );
this.signFile = (hasLocalSrc ) ? signSrc : false;
if ( hasRemoteSrc ) {
this.signYoutubeId = this.youTubeSignId;
this.signYoutubeId = signVideo;
} else if ( hasRemoteSource ) {
this.signYoutubeId = ytSignSrc;
}
this.injectSignPlayerCode();
return;
}
if (this.player === 'html5') {
this.signYoutubeId = this.youTubeSignId ?? DOMPurify.sanitize( this.$sources.first().attr('data-youtube-sign-src') );
this.signFile = DOMPurify.sanitize( this.$sources.first().attr('data-sign-src') );
if (this.signFile || this.signYoutubeId) {
if ( this.signFile || this.signYoutubeId ) {
if (this.isIOS()) {
this.hasSignLanguage = false;
if (this.debug) {

}
Expand All @@ -11798,11 +11777,7 @@ if (typeof module !== "undefined" && module.exports) {
this.hasSignLanguage = true;
this.injectSignPlayerCode();
}
} else {
this.hasSignLanguage = false;
}
} else {
this.hasSignLanguage = false;
}
};

Expand Down Expand Up @@ -13019,8 +12994,16 @@ if (typeof module !== "undefined" && module.exports) {
})
.fail(function() {

thisObj.provideFallback();
deferred.fail();
translationFile = thisObj.rootPath + 'translations/' + thisObj.lang + '.js';
$.getJSON(translationFile, function(data) {
thisObj.tt = data;
deferred.resolve();
})
.fail( function() {

thisObj.provideFallback();
deferred.fail();
});
})
return deferred.promise();
};
Expand Down
Loading