diff --git a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js index e810f8a4c4..69d9c65346 100644 --- a/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js +++ b/common/lib/xmodule/xmodule/js/src/video/09_video_caption.js @@ -334,8 +334,22 @@ function () { keydown: this.videoCaption.captionKeyDown }); - this.videoCaption.automaticScroll = true; + // Enables or disables automatic scrolling of the captions when the + // video is playing. This feature has to be disabled when tabbing + // through them as it interferes with that action. Initially, have this + // flag enabled as we assume mouse use. Then, if the first caption + // (through forward tabbing) or the last caption (through backwards + // tabbing) gets the focus, disable that feature. Renable it if tabbing + // then cycles out of the the captions. + this.videoCaption.autoScrolling = true; + // Keeps track of where the focus is situated in the array of captions. + // Used to implement the automatic scrolling behavior and decide if the + // outline around a caption has to be hidden or shown on a mouseenter or + // mouseleave. this.videoCaption.currentCaptionIndex = 0; + // Used to track if the focus is coming from a click or tabbing. This + // has to be known to decide if, when a caption gets the focus, an + // outline has to be drawn (tabbing) or not (mouse click). this.videoCaption.isMouseFocus = false; this.videoCaption.subtitlesEl.prepend($('
  • ').height(this.videoCaption.topSpacingHeight())); @@ -359,7 +373,7 @@ function () { var caption = $(event.target); this.videoCaption.isMouseFocus = true; caption.css('outlineWidth', '0px'); - this.videoCaption.automaticScroll = true; + this.videoCaption.autoScrolling = true; } function captionClick(event) { @@ -372,7 +386,7 @@ function () { // If the focus comes from a mouse click, hide the outline and turn on // automatic scrolling. if (this.videoCaption.isMouseFocus) { - this.videoCaption.automaticScroll = true; + this.videoCaption.autoScrolling = true; caption.css({ 'outlineWidth': '0px', 'outlineStyle': 'none' @@ -389,7 +403,7 @@ function () { // The second and second to last elements turn automatic scrolling // off again as it may have been enabled in captionBlur. if (captionIndex <= 1 || captionIndex >= this.videoCaption.captions.length-2) { - this.videoCaption.automaticScroll = false; + this.videoCaption.autoScrolling = false; } } } @@ -408,7 +422,7 @@ function () { // captions. if (captionIndex === 0 || captionIndex === this.videoCaption.captions.length-1) { - this.videoCaption.automaticScroll = true; + this.videoCaption.autoScrolling = true; } } @@ -422,7 +436,9 @@ function () { function scrollCaption() { var el = this.videoCaption.subtitlesEl.find('.current:first'); - if (!this.videoCaption.frozen && el.length && this.videoCaption.automaticScroll) { + // Automatic scrolling gets disabled if one of the captions has received + // focus through tabbing. + if (!this.videoCaption.frozen && el.length && this.videoCaption.autoScrolling) { this.videoCaption.subtitlesEl.scrollTo( el, {