wai-website-theme 1.2 → 1.3

data/assets/ableplayer/scripts/dialog.js

@@ -24,9 +24,9 @@
          'title': thisObj.closeButtonLabel,
          'aria-label': thisObj.closeButtonLabel
       }).text('X');
-      closeButton.keydown(function (event) {
+      closeButton.keydown(function (e) {
         // Space key down
-        if (event.which === 32) {
+        if (e.which === 32) {
           thisObj.hide();
         }
       }).click(function () {
@@ -53,19 +53,19 @@
       'role': dialogRole
     });
 
-    modal.keydown(function (event) {
+    modal.keydown(function (e) {
       // Escape
-      if (event.which === 27) {
+      if (e.which === 27) {
         if (thisObj.escapeHook) {
-          thisObj.escapeHook(event, this);
+          thisObj.escapeHook(e, this);
         }
         else {
           thisObj.hide();
-          event.preventDefault();
+          e.preventDefault();
         }
       }
       // Tab
-      else if (event.which === 9) {
+      else if (e.which === 9) {
         // Manually loop tab navigation inside the modal.
         var parts = modal.find('*');
         var focusable = parts.filter(focusableElementsSelector).filter(':visible');
@@ -76,21 +76,21 @@
 
         var focused = $(':focus');
         var currentIndex = focusable.index(focused);
-        if (event.shiftKey) {
+        if (e.shiftKey) {
           // If backwards from first element, go to last.
           if (currentIndex === 0) {
             focusable.get(focusable.length - 1).focus();
-            event.preventDefault();
+            e.preventDefault();
           }
         }
         else {
           if (currentIndex === focusable.length - 1) {
             focusable.get(0).focus();
-            event.preventDefault();
+            e.preventDefault();
           }
         }
       }
-      event.stopPropagation();
+      e.stopPropagation();
     });
 
     $('body > *').not('.able-modal-overlay').not('.able-modal-dialog').attr('aria-hidden', 'false');
@@ -107,8 +107,8 @@
       $('body').append(overlay);
 
       // Keep from moving focus out of dialog when clicking outside of it.
-      overlay.on('mousedown.accessibleModal', function (event) {
-        event.preventDefault();
+      overlay.on('mousedown.accessibleModal', function (e) {
+        e.preventDefault();
       });
     }
 

data/assets/ableplayer/scripts/dragdrop.js

@@ -42,19 +42,19 @@
 
     // add event listener to toolbar to start and end drag
     // other event listeners will be added when drag starts
-    $toolbar.on('mousedown', function(event) {
-      event.stopPropagation();
+    $toolbar.on('mousedown', function(e) {
+      e.stopPropagation();
       if (!thisObj.windowMenuClickRegistered) {
         thisObj.windowMenuClickRegistered = true;
-        thisObj.startMouseX = event.pageX;
-        thisObj.startMouseY = event.pageY;
+        thisObj.startMouseX = e.pageX;
+        thisObj.startMouseY = e.pageY;
         thisObj.dragDevice = 'mouse';
         thisObj.startDrag(which, $window);
       }
       return false;
     });
-    $toolbar.on('mouseup', function(event) {
-      event.stopPropagation();
+    $toolbar.on('mouseup', function(e) {
+      e.stopPropagation();
       if (thisObj.dragging && thisObj.dragDevice === 'mouse') {
         thisObj.endDrag(which);
       }
@@ -62,18 +62,20 @@
     });
 
     // add event listeners for resizing
-    $resizeHandle.on('mousedown', function(event) {
-      event.stopPropagation();
+    $resizeHandle.on('mousedown', function(e) {
+
+      e.stopPropagation();
       if (!thisObj.windowMenuClickRegistered) {
         thisObj.windowMenuClickRegistered = true;
-        thisObj.startMouseX = event.pageX;
-        thisObj.startMouseY = event.pageY;
+        thisObj.startMouseX = e.pageX;
+        thisObj.startMouseY = e.pageY;
         thisObj.startResize(which, $window);
         return false;
       }
     });
-    $resizeHandle.on('mouseup', function(event) {
-      event.stopPropagation();
+
+    $resizeHandle.on('mouseup', function(e) {
+      e.stopPropagation();
       if (thisObj.resizing) {
         thisObj.endResize(which);
       }
@@ -82,6 +84,7 @@
 
     // whenever a window is clicked, bring it to the foreground
     $window.on('click', function() {
+
       if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
         thisObj.updateZIndex(which);
       }
@@ -94,11 +97,10 @@
   AblePlayer.prototype.addWindowMenu = function(which, $window, windowName) {
 
 
-    var thisObj, $windowAlert, $newButton, $buttonIcon, buttonImgSrc, $buttonImg,
+    var thisObj, $windowAlert, menuId, $newButton, $buttonIcon, buttonImgSrc, $buttonImg,
       $buttonLabel, tooltipId, $tooltip, $popup,
       label, position, buttonHeight, buttonWidth, tooltipY, tooltipX, tooltipStyle, tooltip,
-      $optionList, radioName, options, i, $optionItem, option,
-      radioId, $radioButton, $radioLabel;
+      $optionList, menuBaseId, options, i, $optionItem, option, menuId;
 
     thisObj = this;
 
@@ -114,6 +116,7 @@
     // create an alert div and add it to window
     $windowAlert = $('<div role="alert"></div>');
     $windowAlert.addClass('able-alert');
+    $windowAlert.hide();
     $windowAlert.appendTo(this.$activeWindow);
     $windowAlert.css({
       top: $window.offset().top
@@ -121,10 +124,13 @@
 
     // add button to draggable window which triggers a popup menu
     // for now, re-use preferences icon for this purpose
+    menuId = this.mediaId + '-' + windowName + '-menu';
     $newButton = $('<button>',{
       'type': 'button',
       'tabindex': '0',
       'aria-label': this.tt.windowButtonLabel,
+      'aria-haspopup': 'true',
+      'aria-controls': menuId,
       'class': 'able-button-handler-preferences'
     });
     if (this.iconType === 'font') {
@@ -156,8 +162,8 @@
     $tooltip = $('<div>',{
       'class' : 'able-tooltip',
       'id' : tooltipId
-    });
-    $newButton.on('mouseenter focus',function(event) {
+    }).hide();
+    $newButton.on('mouseenter focus',function(e) {
       var label = $(this).attr('aria-label');
       // get position of this button
       var position = $(this).position();
@@ -170,83 +176,15 @@
         right: tooltipX + 'px',
         top: tooltipY + 'px'
       };
-      var tooltip = $('#' + tooltipId).text(label).css(tooltipStyle);
+      var tooltip = AblePlayer.localGetElementById($newButton[0], tooltipId).text(label).css(tooltipStyle);
       thisObj.showTooltip(tooltip);
       $(this).on('mouseleave blur',function() {
-        $('#' + tooltipId).text('').hide();
-      });
-    });
-
-    // add a popup menu
-    $popup = this.createPopup(windowName);
-    $optionList = $('<ul></ul>');
-    radioName = this.mediaId + '-' + windowName + '-choice';
-
-    options = [];
-    options.push({
-      'name': 'move',
-      'label': this.tt.windowMove
-    });
-    options.push({
-      'name': 'resize',
-      'label': this.tt.windowResize
-    });
-    for (i = 0; i < options.length; i++) {
-      $optionItem = $('<li></li>');
-      option = options[i];
-      radioId = radioName + '-' + i;
-      $radioButton = $('<input>',{
-        'type': 'radio',
-        'val': option.name,
-        'name': radioName,
-        'id': radioId
-      });
-      $radioLabel = $('<label>',{
-        'for': radioId
+        AblePlayer.localGetElementById($newButton[0], tooltipId).text('').hide();
       });
-      $radioLabel.text(option.label);
-      $radioButton.on('focus',function(e) {
-        $(this).parents('ul').children('li').removeClass('able-focus');
-        $(this).parent('li').addClass('able-focus');
-      });
-      $radioButton.on('click',function(e) {
-        e.stopPropagation();
-        if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
-          thisObj.windowMenuClickRegistered = true;
-          thisObj.handleMenuChoice( which, $(this).val(), e.type);
-        }
-      });
-      // due to an apparent bug (in jquery?) clicking the label
-      // does not result in a click event on the associated radio button
-      // Observed this in Firefox 45.0.2 and Chrome 50
-      // It works fine on a simple test page so this could be an Able Player bug
-      // Added the following as a workaround rather than mess with isolating the bug
-      $radioLabel.on('click mousedown', function() {
-        var clickedId = $(this).attr('for');
-        $('#' + clickedId).click();
-      })
-      $optionItem.append($radioButton,$radioLabel);
-      $optionList.append($optionItem);
-    }
-    $popup.append($optionList);
-    $newButton.on('click mousedown keydown',function(e) {
-      e.stopPropagation();
-      if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
-        // don't set windowMenuClickRegistered yet; that happens in handler function
-        thisObj.handleWindowButtonClick(which, e);
-      }
-      thisObj.finishingDrag = false;
-    });
-
-    $popup.on('keydown', function(event) {
-      // Escape key
-      if (event.which === 27) {
-        // Close Window Options Menu
-        $newButton.focus();
-        $popup.hide();
-      }
     });
 
+    // setup popup menu
+    $popup = this.setupPopups(windowName); // 'transcript-window' or 'sign-window'
     // define vars and assemble all the parts
     if (which === 'transcript') {
       this.$transcriptAlert = $windowAlert;
@@ -261,6 +199,16 @@
       this.$signToolbar.append($windowAlert,$newButton,$tooltip,$popup);
     }
 
+    // handle button click
+    $newButton.on('click mousedown keydown',function(e) {
+      e.stopPropagation();
+      if (!thisObj.windowMenuClickRegistered && !thisObj.finishingDrag) {
+        // don't set windowMenuClickRegistered yet; that happens in handler function
+        thisObj.handleWindowButtonClick(which, e);
+      }
+      thisObj.finishingDrag = false;
+    });
+
     this.addResizeDialog(which, $window);
   };
 
@@ -380,12 +328,34 @@
 
     thisObj = this;
 
+    if (which === 'transcript') {
+      $windowPopup = this.$transcriptPopup;
+      $windowButton = this.$transcriptPopupButton;
+      $toolbar = this.$transcriptToolbar;
+    }
+    else if (which === 'sign') {
+      $windowPopup = this.$signPopup;
+      $windowButton = this.$signPopupButton;
+      $toolbar = this.$signToolbar;
+    }
+
     if (e.type === 'keydown') {
       // user pressed a key
-      if (e.which === 32 || e.which === 13 || e.which === 27) {
-        // this was Enter, space, or escape
+      if (e.which === 32 || e.which === 13) {
+        // this was Enter or space
         this.windowMenuClickRegistered = true;
       }
+      else if (e.which === 27) { // escape
+        // hide the popup menu
+        $windowPopup.hide('fast', function() {
+          // also reset the Boolean
+          thisObj.windowMenuClickRegistered = false;
+          // also restore menu items to their original state
+          $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
+          // also return focus to window options button
+          $windowButton.focus();
+        });
+      }
       else {
         return false;
       }
@@ -394,23 +364,13 @@
       // this was a mouse event
       this.windowMenuClickRegistered = true;
     }
-    if (which === 'transcript') {
-      $windowPopup = this.$transcriptPopup;
-      $windowButton = this.$transcriptPopupButton;
-      $toolbar = this.$transcriptToolbar;
-    }
-    else if (which === 'sign') {
-      $windowPopup = this.$signPopup;
-      $windowButton = this.$signPopupButton;
-      $toolbar = this.$signToolbar;
-    }
 
     if ($windowPopup.is(':visible')) {
       $windowPopup.hide(200,'',function() {
         thisObj.windowMenuClickRegistered = false; // reset
       });
       $windowPopup.find('li').removeClass('able-focus');
-      $windowButton.focus();
+      $windowButton.attr('aria-expanded','false').focus();
     }
     else {
       // first, be sure window is on top
@@ -418,13 +378,14 @@
       popupTop = $windowButton.position().top + $windowButton.outerHeight();
       $windowPopup.css('top', popupTop);
       $windowPopup.show(200,'',function() {
-        $(this).find('input').first().focus().parent().addClass('able-focus');
+        $windowButton.attr('aria-expanded','true');
+        $(this).find('li').first().focus().addClass('able-focus');
         thisObj.windowMenuClickRegistered = false; // reset
       });
     }
   };
 
-  AblePlayer.prototype.handleMenuChoice = function (which, choice, eventType) {
+  AblePlayer.prototype.handleMenuChoice = function (which, choice, e) {
 
     var thisObj, $window, $windowPopup, $windowButton, resizeDialog, $thisRadio;
 
@@ -443,11 +404,35 @@
       resizeDialog = this.signResizeDialog;
     }
 
-    // hide the popup menu, and reset the Boolean
+    if (e.type === 'keydown') {
+      if (e.which === 27) { // escape
+        // hide the popup menu
+        $windowPopup.hide('fast', function() {
+          // also reset the Boolean
+          thisObj.windowMenuClickRegistered = false;
+          // also restore menu items to their original state
+          $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
+          // also return focus to window options button
+          $windowButton.focus();
+        });
+        return false;
+      }
+      else {
+        // all other keys will be handled by upstream functions
+        return false;
+      }
+    }
+
+    // hide the popup menu
     $windowPopup.hide('fast', function() {
-       thisObj.windowMenuClickRegistered = false; // reset
+      // also reset the boolean
+      thisObj.windowMenuClickRegistered = false;
+      // also restore menu items to their original state
+      $windowPopup.find('li').removeClass('able-focus').attr('tabindex','-1');
     });
-    $windowButton.focus();
+    if (choice !== 'close') {
+      $windowButton.focus();
+    }
 
     if (choice === 'move') {
       if (!this.showedAlert(which)) {
@@ -459,7 +444,7 @@
           this.showedSignAlert = true;
         }
       }
-      if (eventType === 'keydown') {
+      if (e.type === 'keydown') {
         this.dragDevice = 'keyboard';
       }
       else {
@@ -472,10 +457,18 @@
       // resize through the menu uses a form, not drag
       resizeDialog.show();
     }
+    else if (choice == 'close') {
+      // close window, place focus on corresponding button on controller bar
+      if (which === 'transcript') {
+        this.handleTranscriptToggle();
+      }
+      else if (which === 'sign') {
+        this.handleSignToggle();
+      }
+    }
   };
 
   AblePlayer.prototype.startDrag = function(which, $element) {
-
     var thisObj, $windowPopup, zIndex, startPos, newX, newY;
     thisObj = this;
 

data/assets/ableplayer/scripts/event.js

@@ -29,7 +29,14 @@
   };
 
   AblePlayer.prototype.onMediaPause = function () {
-    // do something
+    if (this.controlsHidden) {
+      this.fadeControls('in');
+      this.controlsHidden = false;
+    }
+    if (this.hidingControls) { // a timeout is actively counting
+      window.clearTimeout(this.hideControlsTimeout);
+      this.hidingControls = false;
+    }
   };
 
   AblePlayer.prototype.onMediaComplete = function () {
@@ -138,10 +145,10 @@
     var thisObj = this;
 
     // Handle seek bar events.
-    this.seekBar.bodyDiv.on('startTracking', function (event) {
+    this.seekBar.bodyDiv.on('startTracking', function (e) {
       thisObj.pausedBeforeTracking = thisObj.isPaused();
       thisObj.pauseMedia();
-    }).on('tracking', function (event, position) {
+    }).on('tracking', function (e, position) {
       // Scrub transcript, captions, and metadata.
       thisObj.highlightTranscript(position);
       thisObj.updateCaption(position);
@@ -149,7 +156,7 @@
       thisObj.updateChapter(thisObj.convertChapterTimeToVideoTime(position));
       thisObj.updateMeta(position);
       thisObj.refreshControls();
-    }).on('stopTracking', function (event, position) {
+    }).on('stopTracking', function (e, position) {
       if (thisObj.useChapterTimes) {
         thisObj.seekTo(thisObj.convertChapterTimeToVideoTime(position));
       }
@@ -171,12 +178,15 @@
       this.handlePlay();
     }
     else if (whichButton === 'restart') {
+      this.seekTrigger = 'restart';
       this.handleRestart();
     }
     else if (whichButton === 'rewind') {
+      this.seekTrigger = 'rewind';
       this.handleRewind();
     }
     else if (whichButton === 'forward') {
+      this.seekTrigger = 'forward';
       this.handleFastForward();
     }
     else if (whichButton === 'mute') {
@@ -221,23 +231,30 @@
 
     // returns true unless user's focus is on a UI element
     // that is likely to need supported keystrokes, including space
-    var activeElement = $(document.activeElement).prop('tagName');
-    if (activeElement === 'INPUT') {
+
+    var activeElement = AblePlayer.getActiveDOMElement();
+
+    if ($(activeElement).prop('tagName') === 'INPUT') {
       return false;
     }
     else {
       return true;
     }
-  }
+  };
 
   AblePlayer.prototype.onPlayerKeyPress = function (e) {
+
     // handle keystrokes (using DHTML Style Guide recommended key combinations)
-    // http://dev.aol.com/dhtml_style_guide/#mediaplayer
+    // https://web.archive.org/web/20130127004544/http://dev.aol.com/dhtml_style_guide/#mediaplayer
     // Modifier keys Alt + Ctrl are on by default, but can be changed within Preferences
     // NOTE #1: Style guide only supports Play/Pause, Stop, Mute, Captions, & Volume Up & Down
     // The rest are reasonable best choices
     // NOTE #2: If there are multiple players on a single page, keystroke handlers
     // are only bound to the FIRST player
+    // NOTE #3: The DHTML Style Guide is now the W3C WAI-ARIA Authoring Guide and has undergone many revisions
+    // including removal of the "media player" design pattern. There's an issue about that:
+    // https://github.com/w3c/aria-practices/issues/27
+
     if (!this.okToHandleKeyPress()) {
       return false;
     }
@@ -247,75 +264,88 @@
     if (which >= 65 && which <= 90) {
       which += 32;
     }
-    if (which === 27) {
-      this.closePopups();
-    }
-    else if (which === 32) { // spacebar = play/pause
-      if (!($('.able-controller button').is(':focus'))) {
-        // only toggle play if a button does not have focus
-        // if a button has focus, space should activate that button
-        this.handlePlay();
+
+    // Only use keypress to control player if focus is NOT on a form field or contenteditable element
+    if (!(
+      $(':focus').is('[contenteditable]') ||
+      $(':focus').is('input') ||
+      $(':focus').is('textarea') ||
+      $(':focus').is('select') ||
+      e.target.hasAttribute('contenteditable') ||
+      e.target.tagName === 'INPUT' ||
+      e.target.tagName === 'TEXTAREA' ||
+      e.target.tagName === 'SELECT'
+    )){
+      if (which === 27) { // escape
+        this.closePopups();
       }
-    }
-    else if (which === 112) { // p = play/pause
-      if (this.usingModifierKeys(e)) {
-        this.handlePlay();
+      else if (which === 32) { // spacebar = play/pause
+        if (this.$ableWrapper.find('.able-controller button:focus').length === 0) {
+          // only toggle play if a button does not have focus
+          // if a button has focus, space should activate that button
+          this.handlePlay();
+        }
       }
-    }
-    else if (which === 115) { // s = stop (now restart)
-      if (this.usingModifierKeys(e)) {
-        this.handleRestart();
+      else if (which === 112) { // p = play/pause
+        if (this.usingModifierKeys(e)) {
+          this.handlePlay();
+        }
       }
-    }
-    else if (which === 109) { // m = mute
-      if (this.usingModifierKeys(e)) {
-        this.handleMute();
+      else if (which === 115) { // s = stop (now restart)
+        if (this.usingModifierKeys(e)) {
+          this.handleRestart();
+        }
       }
-    }
-    else if (which === 118) { // v = volume
-      if (this.usingModifierKeys(e)) {
-        this.handleVolume();
+      else if (which === 109) { // m = mute
+        if (this.usingModifierKeys(e)) {
+          this.handleMute();
+        }
       }
-    }
-    else if (which >= 49 && which <= 57) { // set volume 1-9
-      if (this.usingModifierKeys(e)) {
-        this.handleVolume(which);
+      else if (which === 118) { // v = volume
+        if (this.usingModifierKeys(e)) {
+          this.handleVolume();
+        }
       }
-    }
-    else if (which === 99) { // c = caption toggle
-      if (this.usingModifierKeys(e)) {
-        this.handleCaptionToggle();
+      else if (which >= 49 && which <= 57) { // set volume 1-9
+        if (this.usingModifierKeys(e)) {
+          this.handleVolume(which);
+        }
       }
-    }
-    else if (which === 100) { // d = description
-      if (this.usingModifierKeys(e)) {
-        this.handleDescriptionToggle();
+      else if (which === 99) { // c = caption toggle
+        if (this.usingModifierKeys(e)) {
+          this.handleCaptionToggle();
+        }
       }
-    }
-    else if (which === 102) { // f = forward
-      if (this.usingModifierKeys(e)) {
-        this.handleFastForward();
+      else if (which === 100) { // d = description
+        if (this.usingModifierKeys(e)) {
+          this.handleDescriptionToggle();
+        }
       }
-    }
-    else if (which === 114) { // r = rewind
-      if (this.usingModifierKeys(e)) {
-        this.handleRewind();
+      else if (which === 102) { // f = forward
+        if (this.usingModifierKeys(e)) {
+          this.handleFastForward();
+        }
       }
-    }
-    else if (which === 101) { // e = preferences
-      if (this.usingModifierKeys(e)) {
-        this.handlePrefsClick();
+      else if (which === 114) { // r = rewind
+        if (this.usingModifierKeys(e)) {
+          this.handleRewind();
+        }
       }
-    }
-    else if (which === 13) { // Enter
-      var thisElement = $(document.activeElement);
-      if (thisElement.prop('tagName') === 'SPAN') {
-        // register a click on this SPAN
-        // if it's a transcript span the transcript span click handler will take over
-        thisElement.click();
+      else if (which === 101) { // e = preferences
+        if (this.usingModifierKeys(e)) {
+          this.handlePrefsClick();
+        }
       }
-      else if (thisElement.prop('tagName') === 'LI') {
-        thisElement.click();
+      else if (which === 13) { // Enter
+        var thisElement = $(document.activeElement);
+        if (thisElement.prop('tagName') === 'SPAN') {
+          // register a click on this SPAN
+          // if it's a transcript span the transcript span click handler will take over
+          thisElement.click();
+        }
+        else if (thisElement.prop('tagName') === 'LI') {
+          thisElement.click();
+        }
       }
     }
   };
@@ -324,8 +354,10 @@
 
     var thisObj = this;
 
-    // NOTE: iOS does not support autoplay,
+    // NOTE: iOS and some browsers do not support autoplay
     // and no events are triggered until media begins to play
+    // Able Player gets around this by automatically loading media in some circumstances
+    // (see initialize.js > initPlayer() for details)
     this.$media
       .on('emptied',function() {
         // do something
@@ -339,7 +371,13 @@
         // so we know player can seek ahead to anything
       })
       .on('canplaythrough',function() {
-        if (!thisObj.startedPlaying) {
+        if (thisObj.seekTrigger == 'restart' || thisObj.seekTrigger == 'chapter' || thisObj.seekTrigger == 'transcript') {
+          // by clicking on any of these elements, user is likely intending to play
+          // Not included: elements where user might click multiple times in succession
+          // (i.e., 'rewind', 'forward', or seekbar); for these, video remains paused until user initiates play
+          thisObj.playMedia();
+        }
+        else if (!thisObj.startedPlaying) {
           if (thisObj.startTime) {
             if (thisObj.seeking) {
               // a seek has already been initiated
@@ -364,6 +402,12 @@
             }
           }
         }
+        else if (thisObj.hasPlaylist) {
+          if ((thisObj.playlistIndex !== (thisObj.$playlist.length - 1)) || thisObj.loop) {
+            // this is not the last track in the playlist (OR playlist is looping so it doesn't matter)
+            thisObj.playMedia();
+          }
+        }
         else {
           // already started playing
         }
@@ -373,6 +417,7 @@
         thisObj.refreshControls();
       })
       .on('ended',function() {
+        thisObj.playing = false;
         thisObj.onMediaComplete();
       })
       .on('progress', function() {
@@ -394,6 +439,21 @@
         }
       })
       .on('pause',function() {
+        if (!thisObj.clickedPlay) {
+          // 'pause' was triggered automatically, not initiated by user
+          // this happens between tracks in a playlist
+          if (thisObj.hasPlaylist) {
+            // do NOT set playing to false.
+            // doing so prevents continual playback after new track is loaded
+          }
+          else {
+            thisObj.playing = false;
+          }
+        }
+        else {
+          thisObj.playing = false;
+        }
+        thisObj.clickedPlay = false; // done with this variable
         thisObj.onMediaPause();
       })
       .on('ratechange',function() {
@@ -455,11 +515,11 @@
         }
         thisObj.refreshControls();
       })
-      .onSeek(function(event) {
+      .onSeek(function(e) {
         // this is called when user scrubs ahead or back,
         // after the target offset is reached
         if (thisObj.debug) {
-          console.log('Seeking to ' + event.position + '; target: ' + event.offset);
+          console.log('Seeking to ' + e.position + '; target: ' + e.offset);
         }
 
         if (thisObj.jwSeekPause) {
@@ -524,29 +584,72 @@
 
     // Refresh player if it changes from hidden to visible
     // There is no event triggered by a change in visibility
-    // but MutationObserver works in most browsers:
+    // but MutationObserver works in most browsers (but NOT in IE 10 or earlier)
     // http://caniuse.com/#feat=mutationobserver
-    var target = this.$ableDiv[0];
-    var observer = new MutationObserver(function(mutations) {
-      mutations.forEach(function(mutation) {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
-          // the player's style attribute has changed. Check to see if it's visible
-          if (thisObj.$ableDiv.is(':visible')) {
-            thisObj.refreshControls();
+    if (window.MutationObserver) {
+      var target = this.$ableDiv[0];
+      var observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+            // the player's style attribute has changed. Check to see if it's visible
+            if (thisObj.$ableDiv.is(':visible')) {
+              thisObj.refreshControls();
+            }
           }
-        }
+        });
       });
-    });
-    var config = { attributes: true, childList: true, characterData: true };
-    observer.observe(target, config);
+      var config = { attributes: true, childList: true, characterData: true };
+      observer.observe(target, config);
+    }
+    else {
+      // browser doesn't support MutationObserver
+      // TODO: Figure out an alternative solution for this rare use case in older browsers
+      // See example in buildplayer.js > useSvg()
+    }
 
     this.addSeekbarListeners();
-
     // handle clicks on player buttons
-    this.$controllerDiv.find('button').on('click',function(){
+    this.$controllerDiv.find('button').on('click',function(e){
+      e.stopPropagation();
       thisObj.onClickPlayerButton(this);
     });
 
+    // handle clicks (left only) anywhere on the page. If any popups are open, close them.
+    $(document).on('click',function(e) {
+      if (e.button !== 0) { // not a left click
+        return false;
+      }
+      if ($('.able-popup:visible').length || $('.able-volume-popup:visible')) {
+        // at least one popup is visible
+        thisObj.closePopups();
+      }
+    });
+
+    // handle mouse movement over player; make controls visible again if hidden
+    this.$ableDiv.on('mousemove',function() {
+      if (thisObj.controlsHidden) {
+        thisObj.fadeControls('in');
+        thisObj.controlsHidden = false;
+        // after showing controls, wait another few seconds, then hide them again if video continues to play
+        thisObj.hidingControls = true;
+        thisObj.hideControlsTimeout = window.setTimeout(function() {
+          if (typeof thisObj.playing !== 'undefined' && thisObj.playing === true) {
+            thisObj.fadeControls('out');
+            thisObj.controlsHidden = true;
+            thisObj.hidingControls = false;
+          }
+        },3000);
+      };
+    });
+
+    // if user presses a key from anywhere on the page, show player controls
+    $(document).keydown(function() {
+      if (thisObj.controlsHidden) {
+        thisObj.fadeControls('in');
+        thisObj.controlsHidden = false;
+      }
+    });
+
     // handle local keydown events if this isn't the only player on the page;
     // otherwise these are dispatched by global handler (see ableplayer-base,js)
     this.$ableDiv.keydown(function (e) {