wai-website-theme 0.1.0

data/assets/ableplayer/scripts/buildplayer.js

@@ -0,0 +1,1609 @@
+(function ($) {
+
+  AblePlayer.prototype.injectPlayerCode = function() {
+
+    // create and inject surrounding HTML structure
+    // If IOS:
+    //  If video:
+    //   IOS does not support any of the player's functionality
+    //   - everything plays in its own player
+    //   Therefore, AblePlayer is not loaded & all functionality is disabled
+    //   (this all determined. If this is IOS && video, this function is never called)
+    //  If audio:
+    //   HTML cannot be injected as a *parent* of the <audio> element
+    //   It is therefore injected *after* the <audio> element
+    //   This is only a problem in IOS 6 and earlier,
+    //   & is a known bug, fixed in IOS 7
+
+    var thisObj, vidcapContainer, prefsGroups, i;
+    thisObj = this;
+
+    // create three wrappers and wrap them around the media element. From inner to outer:
+    // $mediaContainer - contains the original media element
+    // $ableDiv - contains the media player and all its objects (e.g., captions, controls, descriptions)
+    // $ableWrapper - contains additional widgets (e.g., transcript window, sign window)
+    this.$mediaContainer = this.$media.wrap('<div class="able-media-container"></div>').parent();
+    this.$ableDiv = this.$mediaContainer.wrap('<div class="able"></div>').parent();
+    this.$ableWrapper = this.$ableDiv.wrap('<div class="able-wrapper"></div>').parent();
+    if (this.player !== 'youtube') {
+      this.$ableWrapper.css({
+        'max-width': this.playerMaxWidth + 'px'
+      });
+    }
+
+    this.injectOffscreenHeading();
+
+    // youtube adds its own big play button
+    // if (this.mediaType === 'video' && this.player !== 'youtube') {
+    if (this.mediaType === 'video') {
+      if (this.iconType == 'font' && this.player !== 'youtube') {
+        this.injectBigPlayButton();
+      }
+
+      // add container that captions or description will be appended to
+      // Note: new Jquery object must be assigned _after_ wrap, hence the temp vidcapContainer variable
+      vidcapContainer = $('<div>',{
+        'class' : 'able-vidcap-container'
+      });
+      this.$vidcapContainer = this.$mediaContainer.wrap(vidcapContainer).parent();
+    }
+
+    this.injectPlayerControlArea();
+    this.injectTextDescriptionArea();
+
+    if (this.transcriptType) {
+      if (this.transcriptType === 'popup' || this.transcriptType === 'external') {
+        this.injectTranscriptArea();
+      }
+      else if (this.transcriptType === 'manual') {
+        this.setupManualTranscript();
+      }
+      this.addTranscriptAreaEvents();
+    }
+
+    this.injectAlert();
+    this.injectPlaylist();
+  };
+
+  AblePlayer.prototype.injectOffscreenHeading = function () {
+    // Add offscreen heading to the media container.
+    // The heading injected in $ableDiv is one level deeper than the closest parent heading
+    // as determined by getNextHeadingLevel()
+    var headingType;
+    this.playerHeadingLevel = this.getNextHeadingLevel(this.$ableDiv); // returns in integer 1-6
+    headingType = 'h' + this.playerHeadingLevel.toString();
+    this.$headingDiv = $('<' + headingType + '>');
+    this.$ableDiv.prepend(this.$headingDiv);
+    this.$headingDiv.addClass('able-offscreen');
+    this.$headingDiv.text(this.tt.playerHeading);
+  };
+
+  AblePlayer.prototype.injectBigPlayButton = function () {
+
+    this.$bigPlayButton = $('<button>', {
+      'class': 'able-big-play-button icon-play',
+      'aria-hidden': true,
+      'tabindex': -1
+    });
+
+    var thisObj = this;
+    this.$bigPlayButton.click(function () {
+      thisObj.handlePlay();
+    });
+
+    this.$mediaContainer.append(this.$bigPlayButton);
+  };
+
+  AblePlayer.prototype.injectPlayerControlArea = function () {
+    this.$playerDiv = $('<div>', {
+      'class' : 'able-player',
+      'role' : 'region',
+      'aria-label' : this.mediaType + ' player'
+    });
+    this.$playerDiv.addClass('able-'+this.mediaType);
+
+    // The default skin depends a bit on a Now Playing div
+    // so go ahead and add one
+    // However, it's only populated if this.showNowPlaying = true
+    this.$nowPlayingDiv = $('<div>',{
+      'class' : 'able-now-playing',
+      'aria-live' : 'assertive',
+      'aria-atomic': 'true'
+    });
+
+    this.$controllerDiv = $('<div>',{
+      'class' : 'able-controller'
+    });
+    this.$controllerDiv.addClass('able-' + this.iconColor + '-controls');
+
+    this.$statusBarDiv = $('<div>',{
+      'class' : 'able-status-bar'
+    });
+    this.$timer = $('<span>',{
+      'class' : 'able-timer'
+    });
+    this.$elapsedTimeContainer = $('<span>',{
+      'class': 'able-elapsedTime',
+      text: '0:00'
+    });
+    this.$durationContainer = $('<span>',{
+      'class': 'able-duration'
+    });
+    this.$timer.append(this.$elapsedTimeContainer).append(this.$durationContainer);
+
+    this.$speed = $('<span>',{
+      'class' : 'able-speed',
+      'aria-live' : 'assertive'
+    }).text(this.tt.speed + ': 1x');
+
+    this.$status = $('<span>',{
+      'class' : 'able-status',
+      'aria-live' : 'polite'
+    });
+
+    // Put everything together.
+    this.$statusBarDiv.append(this.$timer, this.$speed, this.$status);
+    this.$playerDiv.append(this.$nowPlayingDiv, this.$controllerDiv, this.$statusBarDiv);
+    this.$ableDiv.append(this.$playerDiv);
+  };
+
+  AblePlayer.prototype.injectTextDescriptionArea = function () {
+
+    // create a div for exposing description
+    // description will be exposed via role="alert" & announced by screen readers
+    this.$descDiv = $('<div>',{
+      'class': 'able-descriptions',
+      'aria-live': 'assertive',
+      'aria-atomic': 'true'
+    });
+    // Start off with description hidden.
+    // It will be exposed conditionally within description.js > initDescription()
+    this.$descDiv.hide();
+    this.$ableDiv.append(this.$descDiv);
+  };
+
+  AblePlayer.prototype.getDefaultWidth = function(which) {
+
+    // return default width of resizable elements
+    // these values are somewhat arbitrary, but seem to result in good usability
+    // if users disagree, they can resize (and resposition) them
+    if (which === 'transcript') {
+      return 450;
+    }
+    else if (which === 'sign') {
+      return 400;
+    }
+  };
+
+  AblePlayer.prototype.positionDraggableWindow = function (which, width) {
+
+    // which is either 'transcript' or 'sign'
+
+    var cookie, cookiePos, $window, dragged, windowPos, currentWindowPos, firstTime, zIndex;
+
+    cookie = this.getCookie();
+    if (which === 'transcript') {
+      $window = this.$transcriptArea;
+      if (typeof cookie.transcript !== 'undefined') {
+        cookiePos = cookie.transcript;
+      }
+    }
+    else if (which === 'sign') {
+      $window = this.$signWindow;
+      if (typeof cookie.transcript !== 'undefined') {
+        cookiePos = cookie.sign;
+      }
+    }
+    if (typeof cookiePos !== 'undefined' && !($.isEmptyObject(cookiePos))) {
+      // position window using stored values from cookie
+      $window.css({
+        'position': cookiePos['position'],
+        'width': cookiePos['width'],
+        'z-index': cookiePos['zindex']
+      });
+      if (cookiePos['position'] === 'absolute') {
+        $window.css({
+          'top': cookiePos['top'],
+          'left': cookiePos['left']
+        });
+      }
+      // since cookie is not page-specific, z-index needs may vary across different pages
+      this.updateZIndex(which);
+    }
+    else {
+      // position window using default values
+      windowPos = this.getOptimumPosition(which, width);
+      if (typeof width === 'undefined') {
+        width = this.getDefaultWidth(which);
+      }
+      $window.css({
+        'position': windowPos[0],
+        'width': width,
+        'z-index': windowPos[3]
+      });
+      if (windowPos[0] === 'absolute') {
+        $window.css({
+          'top': windowPos[1] + 'px',
+          'left': windowPos[2] + 'px',
+        });
+      }
+    }
+  };
+
+  AblePlayer.prototype.getOptimumPosition = function (targetWindow, targetWidth) {
+
+    // returns optimum position for targetWindow, as an array with the following structure:
+    // 0 - CSS position ('absolute' or 'relative')
+    // 1 - top
+    // 2 - left
+    // 3 - zindex (if not default)
+    // targetWindow is either 'transcript' or 'sign'
+    // if there is room to the right of the player, position element there
+    // else if there is room the left of the player, position element there
+    // else position element beneath player
+
+    var gap, position, ableWidth, ableHeight, ableOffset, ableTop, ableLeft,
+       windowWidth, otherWindowWidth, zIndex;
+
+    if (typeof targetWidth === 'undefined') {
+      targetWidth = this.getDefaultWidth(targetWindow);
+    }
+
+    gap = 5; // number of pixels to preserve between Able Player objects
+
+    position = []; // position, top, left
+
+    ableWidth = this.$ableDiv.width();
+    ableHeight = this.$ableDiv.height();
+    ableOffset = this.$ableDiv.offset();
+    ableTop = ableOffset.top;
+    ableLeft = ableOffset.left;
+    windowWidth = $(window).width();
+    otherWindowWidth = 0; // width of other visiable draggable windows will be added to this
+
+    if (targetWindow === 'transcript') {
+      if (typeof this.$signWindow !== 'undefined') {
+        if (this.$signWindow.is(':visible')) {
+          otherWindowWidth = this.$signWindow.width() + gap;
+        }
+      }
+    }
+    else if (targetWindow === 'sign') {
+      if (typeof this.$transcriptArea !== 'undefined') {
+        if (this.$transcriptArea.is(':visible')) {
+          otherWindowWidth = this.$transcriptArea.width() + gap;
+        }
+      }
+    }
+    if (targetWidth < (windowWidth - (ableLeft + ableWidth + gap + otherWindowWidth))) {
+      // there's room to the left of $ableDiv
+      position[0] = 'absolute';
+      position[1] = 0;
+      position[2] = ableWidth + otherWindowWidth + gap;
+    }
+    else if (targetWidth + gap < ableLeft) {
+      // there's room to the right of $ableDiv
+      position[0] = 'absolute';
+      position[1] = 0;
+      position[2] = ableLeft - targetWidth - gap;
+    }
+    else {
+      // position element below $ableDiv
+      position[0] = 'relative';
+      // no need to define top, left, or z-index
+    }
+    return position;
+  };
+
+  AblePlayer.prototype.injectPoster = function ($element, context) {
+
+    // get poster attribute from media element and append that as an img to $element
+    // context is either 'youtube' or 'fallback'
+    var poster, width, height;
+
+    if (context === 'youtube') {
+      if (typeof this.ytWidth !== 'undefined') {
+        width = this.ytWidth;
+        height = this.ytHeight;
+      }
+      else if (typeof this.playerMaxWidth !== 'undefined') {
+        width = this.playerMaxWidth;
+        height = this.playerMaxHeight;
+      }
+      else if (typeof this.playerWidth !== 'undefined') {
+        width = this.playerWidth;
+        height = this.playerHeight;
+      }
+    }
+    else if (context === 'fallback') {
+      width = '100%';
+      height = 'auto';
+    }
+
+    if (this.$media.attr('poster')) {
+      poster = this.$media.attr('poster');
+      this.$posterImg = $('<img>',{
+        'class': 'able-poster',
+        'src' : poster,
+        'alt' : "",
+        'role': "presentation",
+        'width': width,
+        'height': height
+      });
+      $element.append(this.$posterImg);
+    }
+  };
+
+  AblePlayer.prototype.injectAlert = function () {
+
+    // inject two alerts, one visible for all users and one for screen reader users only
+
+    var top;
+
+    this.$alertBox = $('<div role="alert"></div>');
+    this.$alertBox.addClass('able-alert');
+    this.$alertBox.appendTo(this.$ableDiv);
+    if (this.mediaType == 'audio') {
+      top = -10;
+    }
+    else {
+      top = Math.round(this.$mediaContainer.offset().top * 10) / 10;
+    }
+    this.$alertBox.css({
+      top: top + 'px'
+    });
+
+    this.$srAlertBox = $('<div role="alert"></div>');
+    this.$srAlertBox.addClass('able-screenreader-alert');
+    this.$srAlertBox.appendTo(this.$ableDiv);
+  };
+
+  AblePlayer.prototype.injectPlaylist = function () {
+    if (this.playlistEmbed === true) {
+      // move playlist into player, immediately before statusBarDiv
+      var playlistClone = this.$playlistDom.clone();
+      playlistClone.insertBefore(this.$statusBarDiv);
+      // Update to the new playlist copy.
+      this.$playlist = playlistClone.find('li');
+    }
+
+    if (this.hasPlaylist && this.$sources.length === 0) {
+      // no source elements were provided. Construct them from the first playlist item
+      this.initializing = true;
+      this.swapSource(0);
+      // redefine this.$sources now that media contains one or more <source> elements
+      this.$sources = this.$media.find('source');
+    }
+  };
+
+  // Create popup div and append to player
+  // 'which' parameter is either 'captions', 'chapters', 'prefs', or 'X-window' (e.g., "sign-window")
+  AblePlayer.prototype.createPopup = function (which) {
+
+    var thisObj, $popup, $thisButton, $thisListItem, $prevButton, $nextButton,
+        selectedTrackIndex, selectedTrack;
+    thisObj = this;
+    $popup = $('<div>',{
+      'id': this.mediaId + '-' + which + '-menu',
+      'class': 'able-popup'
+    });
+    if (which === 'chapters' || which === 'prefs' || which === 'sign-window' || which === 'transcript-window') {
+      $popup.addClass('able-popup-no-radio');
+    }
+    $popup.on('keydown',function (e) {
+      $thisButton = $(this).find('input:focus');
+      $thisListItem = $thisButton.parent();
+      if ($thisListItem.is(':first-child')) {
+        // this is the first button
+        $prevButton = $(this).find('input').last(); // wrap to bottom
+        $nextButton = $thisListItem.next().find('input');
+      }
+      else if ($thisListItem.is(':last-child')) {
+        // this is the last button
+        $prevButton = $thisListItem.prev().find('input');
+        $nextButton = $(this).find('input').first(); // wrap to top
+      }
+      else {
+        $prevButton = $thisListItem.prev().find('input');
+        $nextButton = $thisListItem.next().find('input');
+      }
+      if (e.which === 9) { // Tab
+        if (e.shiftKey) {
+          $thisListItem.removeClass('able-focus');
+          $prevButton.focus();
+          $prevButton.parent().addClass('able-focus');
+        }
+        else {
+          $thisListItem.removeClass('able-focus');
+          $nextButton.focus();
+          $nextButton.parent().addClass('able-focus');
+        }
+      }
+      else if (e.which === 40 || e.which === 39) { // down or right arrow
+        $thisListItem.removeClass('able-focus');
+        $nextButton.focus();
+        $nextButton.parent().addClass('able-focus');
+      }
+      else if (e.which == 38 || e.which === 37) { // up or left arrow
+        $thisListItem.removeClass('able-focus');
+        $prevButton.focus();
+        $prevButton.parent().addClass('able-focus');
+      }
+      else if (e.which === 32 || e.which === 13) { // space or enter
+        $('input:focus').click();
+      }
+      else if (e.which === 27) {  // Escape
+        $thisListItem.removeClass('able-focus');
+        thisObj.closePopups();
+      }
+      e.preventDefault();
+    });
+    this.$controllerDiv.append($popup);
+    return $popup;
+  };
+
+  AblePlayer.prototype.closePopups = function () {
+    if (this.chaptersPopup && this.chaptersPopup.is(':visible')) {
+      this.chaptersPopup.hide();
+      this.$chaptersButton.focus();
+    }
+    if (this.captionsPopup && this.captionsPopup.is(':visible')) {
+      this.captionsPopup.hide();
+      this.$ccButton.focus();
+    }
+    if (this.prefsPopup && this.prefsPopup.is(':visible')) {
+      this.prefsPopup.hide();
+      this.$prefsButton.focus();
+    }
+    if (this.$windowPopup && this.$windowPopup.is(':visible')) {
+      this.$windowPopup.hide();
+      this.$windowButton.show().focus();
+    }
+    if (this.$volumeSlider && this.$volumeSlider.is(':visible')) {
+      this.$volumeSlider.hide().attr('aria-hidden','true');
+      this.$volumeAlert.text(this.tt.volumeSliderClosed);
+      this.$volumeButton.focus();
+    }
+  };
+
+  AblePlayer.prototype.setupPopups = function (which) {
+
+    // Create and fill in the popup menu forms for various controls.
+    // parameter 'which' is passed if refreshing content of an existing popup ('captions' or 'chapters')
+
+    var popups, thisObj, hasDefault, i, j,
+        tracks, trackList, trackItem, track,
+        radioName, radioId, trackButton, trackLabel,
+        prefCats, prefCat, prefLabel;
+
+    popups = [];
+    if (typeof which === 'undefined') {
+      popups.push('prefs');
+    }
+
+    if (which === 'captions' || (typeof which === 'undefined')) {
+      if (typeof this.ytCaptions !== 'undefined') { // setup popup for YouTube captions
+        if (this.ytCaptions.length) {
+          popups.push('ytCaptions');
+        }
+      }
+      else { // setup popup for local captions
+        if (this.captions.length > 0) {
+          popups.push('captions');
+        }
+      }
+    }
+    if (which === 'chapters' || (typeof which === 'undefined')) {
+      if (this.chapters.length > 0 && this.useChaptersButton) {
+        popups.push('chapters');
+      }
+    }
+    if (popups.length > 0) {
+      thisObj = this;
+      for (var i=0; i<popups.length; i++) {
+        var popup = popups[i];
+        hasDefault = false;
+        if (popup == 'prefs') {
+          this.prefsPopup = this.createPopup('prefs');
+        }
+        else if (popup == 'captions') {
+          if (typeof this.captionsPopup === 'undefined') {
+            this.captionsPopup = this.createPopup('captions');
+          }
+          tracks = this.captions;
+        }
+        else if (popup == 'chapters') {
+          if (typeof this.chaptersPopup === 'undefined') {
+            this.chaptersPopup = this.createPopup('chapters');
+          }
+          if (this.selectedChapters) {
+            tracks = this.selectedChapters.cues;
+          }
+          else if (this.chapters.length >= 1) {
+            tracks = this.chapters[0].cues;
+          }
+          else {
+            tracks = [];
+          }
+        }
+        else if (popup == 'ytCaptions') {
+          if (typeof this.captionsPopup === 'undefined') {
+            this.captionsPopup = this.createPopup('captions');
+          }
+          tracks = this.ytCaptions;
+        }
+        var trackList = $('<ul></ul>');
+        radioName = this.mediaId + '-' + popup + '-choice';
+        if (popup === 'prefs') {
+          prefCats = this.getPreferencesGroups();
+          for (j = 0; j < prefCats.length; j++) {
+            trackItem = $('<li></li>');
+            prefCat = prefCats[j];
+            if (prefCat === 'captions') {
+              prefLabel = this.tt.prefMenuCaptions;
+            }
+            else if (prefCat === 'descriptions') {
+              prefLabel = this.tt.prefMenuDescriptions;
+            }
+            else if (prefCat === 'keyboard') {
+              prefLabel = this.tt.prefMenuKeyboard;
+            }
+            else if (prefCat === 'transcript') {
+              prefLabel = this.tt.prefMenuTranscript;
+            }
+            radioId = this.mediaId + '-' + popup + '-' + j;
+            trackButton = $('<input>',{
+              'type': 'radio',
+              'val': prefCat,
+              'name': radioName,
+              'id': radioId
+            });
+            trackLabel = $('<label>',{
+              'for': radioId
+            });
+            trackLabel.text(prefLabel);
+            trackButton.click(function(event) {
+              var whichPref = $(this).attr('value');
+              thisObj.setFullscreen(false);
+              if (whichPref === 'captions') {
+                thisObj.captionPrefsDialog.show();
+              }
+              else if (whichPref === 'descriptions') {
+                thisObj.descPrefsDialog.show();
+              }
+              else if (whichPref === 'keyboard') {
+                thisObj.keyboardPrefsDialog.show();
+              }
+              else if (whichPref === 'transcript') {
+                thisObj.transcriptPrefsDialog.show();
+              }
+              thisObj.closePopups();
+            });
+            trackItem.append(trackButton,trackLabel);
+            trackList.append(trackItem);
+          }
+          this.prefsPopup.append(trackList);
+        }
+        else {
+          for (j = 0; j < tracks.length; j++) {
+            trackItem = $('<li></li>');
+            track = tracks[j];
+            radioId = this.mediaId + '-' + popup + '-' + j;
+            trackButton = $('<input>',{
+              'type': 'radio',
+              'val': j,
+              'name': radioName,
+              'id': radioId
+            });
+            if (track.def) {
+              trackButton.prop('checked',true);
+              hasDefault = true;
+            }
+            trackLabel = $('<label>',{
+              'for': radioId
+            });
+            if (track.language !== 'undefined') {
+              trackButton.attr('lang',track.language);
+            }
+            if (popup == 'captions' || popup == 'ytCaptions') {
+              trackLabel.text(track.label || track.language);
+              trackButton.click(this.getCaptionClickFunction(track));
+            }
+            else if (popup == 'chapters') {
+              trackLabel.text(this.flattenCueForCaption(track) + ' - ' + this.formatSecondsAsColonTime(track.start));
+              var getClickFunction = function (time) {
+                return function () {
+                  thisObj.seekTo(time);
+                  // stopgap to prevent spacebar in Firefox from reopening popup
+                  // immediately after closing it (used in handleChapters())
+                  thisObj.hidingPopup = true;
+                  thisObj.chaptersPopup.hide();
+                  // Ensure stopgap gets cancelled if handleChapters() isn't called
+                  // e.g., if user triggered button with Enter or mouse click, not spacebar
+                  setTimeout(function() {
+                    thisObj.hidingPopup = false;
+                  }, 100);
+                  thisObj.$chaptersButton.focus();
+                }
+              }
+              trackButton.on('click keypress',getClickFunction(track.start));
+            }
+            trackItem.append(trackButton,trackLabel);
+            trackList.append(trackItem);
+          }
+          if (popup == 'captions' || popup == 'ytCaptions') {
+            // add a captions off button
+            radioId = this.mediaId + '-captions-off';
+            trackItem = $('<li></li>');
+            trackButton = $('<input>',{
+              'type': 'radio',
+              'name': radioName,
+              'id': radioId
+            });
+            trackLabel = $('<label>',{
+              'for': radioId
+            });
+            trackLabel.text(this.tt.captionsOff);
+            if (this.prefCaptions === 0) {
+              trackButton.prop('checked',true);
+            }
+            trackButton.click(this.getCaptionOffFunction());
+            trackItem.append(trackButton,trackLabel);
+            trackList.append(trackItem);
+          }
+          if (!hasDefault) { // no 'default' attribute was specified on any <track>
+            if ((popup == 'captions' || popup == 'ytCaptions') && (trackList.find('input:radio[lang=' + this.captionLang + ']'))) {
+              // check the button associated with the default caption language
+              // (as determined in control.js > syncTrackLanguages())
+              trackList.find('input:radio[lang=' + this.captionLang + ']').prop('checked',true);
+            }
+            else {
+              // check the first button
+              trackList.find('input').first().prop('checked',true);
+            }
+          }
+          if (popup === 'captions' || popup === 'ytCaptions') {
+            this.captionsPopup.html(trackList);
+          }
+          else if (popup === 'chapters') {
+            this.chaptersPopup.html(trackList);
+          }
+        }
+      }
+    }
+  };
+
+  AblePlayer.prototype.provideFallback = function(reason) {
+
+    // provide ultimate fallback for users who are unable to play the media
+    // reason is a specific error message
+    // if reason is 'NO SUPPORT', use standard text from translation file
+
+    var $fallbackDiv, width, mediaClone, fallback, fallbackText,
+    showBrowserList, browsers, i, b, browserList;
+
+    // Could show list of supporting browsers if 99.9% confident the error is truly an outdated browser
+    // Too many sites say "You need to update your browser" when in fact I'm using a current version
+    showBrowserList = false;
+
+    $fallbackDiv = $('<div>',{
+      'class' : 'able-fallback',
+      'role' : 'alert',
+    });
+    // override default width of .able-fallback with player width, if known
+    if (typeof this.playerMaxWidth !== 'undefined') {
+      width = this.playerMaxWidth + 'px';
+    }
+    else if (this.$media.attr('width')) {
+      width = parseInt(this.$media.attr('width'), 10) + 'px';
+    }
+    else {
+      width = '100%';
+    }
+    $fallbackDiv.css('max-width',width);
+
+    // use fallback content that's nested inside the HTML5 media element, if there is any
+    mediaClone = this.$media.clone();
+    $('source, track', mediaClone).remove();
+    fallback = mediaClone.html().trim();
+    if (fallback.length) {
+      $fallbackDiv.html(fallback);
+    }
+    else if (reason == 'NO SUPPORT') {
+      // not using a supporting browser; use standard text from translation file
+      fallbackText =  this.tt.fallbackError1 + ' ' + this.tt[this.mediaType] + '. ';
+      fallbackText += this.tt.fallbackError2 + ':';
+      fallback = $('<p>').text(fallbackText);
+      $fallbackDiv.html(fallback);
+      showBrowserList = true;
+    }
+    else {
+      // show the reason
+      $fallbackDiv.text(reason);
+    }
+
+    if (showBrowserList) {
+      browserList = $('<ul>');
+      browsers = this.getSupportingBrowsers();
+      for (i=0; i<browsers.length; i++) {
+        b = $('<li>');
+        b.text(browsers[i].name + ' ' + browsers[i].minVersion + ' ' + this.tt.orHigher);
+        browserList.append(b);
+      }
+      $fallbackDiv.append(browserList);
+    }
+
+    // if there's a poster, show that as well
+    this.injectPoster($fallbackDiv, 'fallback');
+
+    // inject $fallbackDiv into the DOM and remove broken content
+    if (typeof this.$ableWrapper !== 'undefined') {
+      this.$ableWrapper.before($fallbackDiv);
+      this.$ableWrapper.remove();
+    }
+    else if (typeof this.$media !== 'undefined') {
+      this.$media.before($fallbackDiv);
+      this.$media.remove();
+    }
+    else {
+      $('body').prepend($fallbackDiv);
+    }
+  };
+
+  AblePlayer.prototype.getSupportingBrowsers = function() {
+
+    var browsers = [];
+    browsers[0] = {
+      name:'Chrome',
+      minVersion: '31'
+    };
+    browsers[1] = {
+      name:'Firefox',
+      minVersion: '34'
+    };
+    browsers[2] = {
+      name:'Internet Explorer',
+      minVersion: '10'
+    };
+    browsers[3] = {
+      name:'Opera',
+      minVersion: '26'
+    };
+    browsers[4] = {
+      name:'Safari for Mac OS X',
+      minVersion: '7.1'
+    };
+    browsers[5] = {
+      name:'Safari for iOS',
+      minVersion: '7.1'
+    };
+    browsers[6] = {
+      name:'Android Browser',
+      minVersion: '4.1'
+    };
+    browsers[7] = {
+      name:'Chrome for Android',
+      minVersion: '40'
+    };
+    return browsers;
+  }
+
+  // Calculates the layout for controls based on media and options.
+  // Returns an object with keys 'ul', 'ur', 'bl', 'br' for upper-left, etc.
+  // Each associated value is array of control names to put at that location.
+  AblePlayer.prototype.calculateControlLayout = function () {
+    // Removed rewind/forward in favor of seek bar.
+
+    var controlLayout = {
+      'ul': ['play','restart','rewind','forward'],
+      'ur': ['seek'],
+      'bl': [],
+      'br': []
+    }
+
+    // test for browser support for volume before displaying volume button
+    if (this.browserSupportsVolume()) {
+      // volume buttons are: 'mute','volume-soft','volume-medium','volume-loud'
+      // previously supported button were: 'volume-up','volume-down'
+      this.volumeButton = 'volume-' + this.getVolumeName(this.volume);
+      controlLayout['ur'].push('volume');
+    }
+    else {
+      this.volume = false;
+    }
+
+    // Calculate the two sides of the bottom-left grouping to see if we need separator pipe.
+    var bll = [];
+    var blr = [];
+
+    if (this.isPlaybackRateSupported()) {
+      bll.push('slower');
+      bll.push('faster');
+    }
+
+    if (this.mediaType === 'video') {
+      if (this.hasCaptions) {
+        bll.push('captions'); //closed captions
+      }
+      if (this.hasSignLanguage) {
+        bll.push('sign'); // sign language
+      }
+      if ((this.hasOpenDesc || this.hasClosedDesc) && (this.useDescriptionsButton)) {
+        bll.push('descriptions'); //audio description
+      }
+    }
+    if (this.transcriptType === 'popup') {
+      bll.push('transcript');
+    }
+
+    if (this.mediaType === 'video' && this.hasChapters && this.useChaptersButton) {
+      bll.push('chapters');
+    }
+
+    controlLayout['br'].push('preferences');
+
+    // TODO: JW currently has a bug with fullscreen, anything that can be done about this?
+    if (this.mediaType === 'video' && this.allowFullScreen && this.player !== 'jw') {
+      controlLayout['br'].push('fullscreen');
+    }
+
+    // Include the pipe only if we need to.
+    if (bll.length > 0 && blr.length > 0) {
+      controlLayout['bl'] = bll;
+      controlLayout['bl'].push('pipe');
+      controlLayout['bl'] = controlLayout['bl'].concat(blr);
+    }
+    else {
+      controlLayout['bl'] = bll.concat(blr);
+    }
+
+    return controlLayout;
+  };
+
+  AblePlayer.prototype.addControls = function() {
+
+    // determine which controls to show based on several factors:
+    // mediaType (audio vs video)
+    // availability of tracks (e.g., for closed captions & audio description)
+    // browser support (e.g., for sliders and speedButtons)
+    // user preferences (???)
+    // some controls are aligned on the left, and others on the right
+    var useSpeedButtons, useFullScreen,
+    i, j, k, controls, $controllerSpan, tooltipId, tooltipX, tooltipY, control,
+    buttonImg, buttonImgSrc, buttonTitle, newButton, iconClass, buttonIcon, buttonUse,
+    leftWidth, rightWidth, totalWidth, leftWidthStyle, rightWidthStyle,
+    controllerStyles, vidcapStyles, captionLabel, popupMenuId;
+
+    var thisObj = this;
+
+    var baseSliderWidth = 100;
+
+    // Initializes the layout into the this.controlLayout variable.
+    var controlLayout = this.calculateControlLayout();
+
+    var sectionByOrder = {0: 'ul', 1:'ur', 2:'bl', 3:'br'};
+
+    // add an empty div to serve as a tooltip
+    tooltipId = this.mediaId + '-tooltip';
+    this.$tooltipDiv = $('<div>',{
+      'id': tooltipId,
+      'class': 'able-tooltip'
+    });
+    this.$controllerDiv.append(this.$tooltipDiv);
+
+    // step separately through left and right controls
+    for (i = 0; i <= 3; i++) {
+      controls = controlLayout[sectionByOrder[i]];
+      if ((i % 2) === 0) {
+        $controllerSpan = $('<div>',{
+          'class': 'able-left-controls'
+        });
+      }
+      else {
+        $controllerSpan = $('<div>',{
+          'class': 'able-right-controls'
+        });
+      }
+      this.$controllerDiv.append($controllerSpan);
+      for (j=0; j<controls.length; j++) {
+        control = controls[j];
+        if (control === 'seek') {
+          var sliderDiv = $('<div class="able-seekbar"></div>');
+          var sliderLabel = this.mediaType + ' ' + this.tt.seekbarLabel;
+          $controllerSpan.append(sliderDiv);
+          var duration = this.getDuration();
+          if (duration == 0) {
+            // set arbitrary starting duration, and change it when duration is known
+            duration = 100;
+          }
+          this.seekBar = new AccessibleSlider(this.mediaType, sliderDiv, 'horizontal', baseSliderWidth, 0, duration, this.seekInterval, sliderLabel, 'seekbar', true, 'visible');
+        }
+        else if (control === 'pipe') {
+          // TODO: Unify this with buttons somehow to avoid code duplication
+          var pipe = $('<span>', {
+            'tabindex': '-1',
+            'aria-hidden': 'true'
+          });
+          if (this.iconType === 'font') {
+            pipe.addClass('icon-pipe');
+          }
+          else {
+            var pipeImg = $('<img>', {
+              src: this.rootPath + 'button-icons/' + this.iconColor + '/pipe.png',
+              alt: '',
+              role: 'presentation'
+            });
+            pipe.append(pipeImg);
+          }
+          $controllerSpan.append(pipe);
+        }
+        else {
+          // this control is a button
+          if (control === 'volume') {
+            buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + this.volumeButton + '.png';
+          }
+          else if (control === 'fullscreen') {
+            buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/fullscreen-expand.png';
+          }
+          else if (control === 'slower') {
+            if (this.speedIcons === 'animals') {
+              buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/turtle.png';
+            }
+            else {
+              buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/slower.png';
+            }
+          }
+          else if (control === 'faster') {
+            if (this.speedIcons === 'animals') {
+              buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/rabbit.png';
+            }
+            else {
+              buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/faster.png';
+            }
+          }
+          else {
+            buttonImgSrc = this.rootPath + 'button-icons/' + this.iconColor + '/' + control + '.png';
+          }
+          buttonTitle = this.getButtonTitle(control);
+
+          // icomoon documentation recommends the following markup for screen readers:
+          // 1. link element (or in our case, button). Nested inside this element:
+          // 2. span that contains the icon font (in our case, buttonIcon)
+          // 3. span that contains a visually hidden label for screen readers (buttonLabel)
+          // In addition, we are adding aria-label to the button (but not title)
+          // And if iconType === 'image', we are replacing #2 with an image (with alt="" and role="presentation")
+          // This has been thoroughly tested and works well in all screen reader/browser combinations
+          // See https://github.com/ableplayer/ableplayer/issues/81
+          newButton = $('<button>',{
+            'type': 'button',
+            'tabindex': '0',
+            'aria-label': buttonTitle,
+            'class': 'able-button-handler-' + control
+          });
+          if (control === 'volume' || control === 'preferences') {
+            // This same ARIA for captions and chapters are added elsewhere
+            if (control == 'preferences') {
+              popupMenuId = this.mediaId + '-prefs-menu';
+            }
+            else if (control === 'volume') {
+              popupMenuId = this.mediaId + '-volume-slider';
+            }
+            newButton.attr({
+              'aria-controls': popupMenuId
+            });
+          }
+          if (this.iconType === 'font') {
+            if (control === 'volume') {
+              iconClass = 'icon-' + this.volumeButton;
+            }
+            else if (control === 'slower') {
+              if (this.speedIcons === 'animals') {
+                iconClass = 'icon-turtle';
+              }
+              else {
+                iconClass = 'icon-slower';
+              }
+            }
+            else if (control === 'faster') {
+              if (this.speedIcons === 'animals') {
+                iconClass = 'icon-rabbit';
+              }
+              else {
+                iconClass = 'icon-faster';
+              }
+            }
+            else {
+              iconClass = 'icon-' + control;
+            }
+            buttonIcon = $('<span>',{
+              'class': iconClass,
+              'aria-hidden': 'true'
+            });
+            newButton.append(buttonIcon);
+          }
+          else if (this.iconType === 'svg') {
+            if (control === 'volume') {
+              iconClass = 'svg-' + this.volumeButton;
+            }
+            else if (control === 'fullscreen') {
+              iconClass = 'svg-fullscreen-expand';
+            }
+            else if (control === 'slower') {
+              if (this.speedIcons === 'animals') {
+                iconClass = 'svg-turtle';
+              }
+              else {
+                iconClass = 'svg-slower';
+              }
+            }
+            else if (control === 'faster') {
+              if (this.speedIcons === 'animals') {
+                iconClass = 'svg-rabbit';
+              }
+              else {
+                iconClass = 'svg-faster';
+              }
+            }
+            else {
+              iconClass = 'svg-' + control;
+            }
+            buttonIcon = $('<svg>',{
+              'class': iconClass
+            });
+            buttonUse = $('<use>',{
+              'xlink:href': this.rootPath + 'icons/able-icons.svg#' + iconClass
+            });
+            buttonIcon.append(buttonUse);
+            newButton.html(buttonIcon);
+
+            // Final step: Need to refresh the DOM in order for browser to process & display the SVG
+            newButton.html(newButton.html());
+          }
+          else {
+            // use images
+            buttonImg = $('<img>',{
+              'src': buttonImgSrc,
+              'alt': '',
+              'role': 'presentation'
+            });
+            newButton.append(buttonImg);
+          }
+          // add the visibly-hidden label for screen readers that don't support aria-label on the button
+          var buttonLabel = $('<span>',{
+            'class': 'able-clipped'
+          }).text(buttonTitle);
+          newButton.append(buttonLabel);
+          // add an event listener that displays a tooltip on mouseenter or focus
+          newButton.on('mouseenter focus',function(event) {
+            var label = $(this).attr('aria-label');
+            // get position of this button
+            var position = $(this).position();
+            var buttonHeight = $(this).height();
+            var buttonWidth = $(this).width();
+            var tooltipY = position.top - buttonHeight - 15;
+            var centerTooltip = true;
+            if ($(this).closest('div').hasClass('able-right-controls')) {
+              // this control is on the right side
+              if ($(this).closest('div').find('button:last').get(0) == $(this).get(0)) {
+                // this is the last control on the right
+                // position tooltip using the "right" property
+                centerTooltip = false;
+                var tooltipX = 0;
+                var tooltipStyle = {
+                  left: '',
+                  right: tooltipX + 'px',
+                  top: tooltipY + 'px'
+                };
+              }
+            }
+            else {
+              // this control is on the left side
+              if ($(this).is(':first-child')) {
+                // this is the first control on the left
+                centerTooltip = false;
+                var tooltipX = position.left;
+                var tooltipStyle = {
+                  left: tooltipX + 'px',
+                  right: '',
+                  top: tooltipY + 'px'
+                };
+              }
+            }
+            if (centerTooltip) {
+              // populate tooltip, then calculate its width before showing it
+              var tooltipWidth = $('#' + tooltipId).text(label).width();
+              // center the tooltip horizontally over the button
+              var tooltipX = position.left - tooltipWidth/2;
+              var tooltipStyle = {
+                left: tooltipX + 'px',
+                right: '',
+                top: tooltipY + 'px'
+              };
+            }
+            var tooltip = $('#' + tooltipId).text(label).css(tooltipStyle);
+            thisObj.showTooltip(tooltip);
+            $(this).on('mouseleave blur',function() {
+              $('#' + tooltipId).text('').hide();
+            })
+          });
+
+          if (control === 'captions') {
+            if (!this.prefCaptions || this.prefCaptions !== 1) {
+              // captions are available, but user has them turned off
+              if (this.captions.length > 1) {
+                captionLabel = this.tt.captions;
+              }
+              else {
+                captionLabel = this.tt.showCaptions;
+              }
+              newButton.addClass('buttonOff').attr('title',captionLabel);
+            }
+          }
+          else if (control === 'descriptions') {
+            if (!this.prefDesc || this.prefDesc !== 1) {
+              // user prefer non-audio described version
+              // Therefore, load media without description
+              // Description can be toggled on later with this button
+              newButton.addClass('buttonOff').attr('title',this.tt.turnOnDescriptions);
+            }
+          }
+
+          $controllerSpan.append(newButton);
+
+          // create variables of buttons that are referenced throughout the AblePlayer object
+          if (control === 'play') {
+            this.$playpauseButton = newButton;
+          }
+          else if (control === 'captions') {
+            this.$ccButton = newButton;
+          }
+          else if (control === 'sign') {
+            this.$signButton = newButton;
+            // gray out sign button if sign language window is not active
+            if (!(this.$signWindow.is(':visible'))) {
+              this.$signButton.addClass('buttonOff');
+            }
+          }
+          else if (control === 'descriptions') {
+            this.$descButton = newButton;
+            // button will be enabled or disabled in description.js > initDescription()
+          }
+          else if (control === 'mute') {
+            this.$muteButton = newButton;
+          }
+          else if (control === 'transcript') {
+            this.$transcriptButton = newButton;
+            // gray out transcript button if transcript is not active
+            if (!(this.$transcriptDiv.is(':visible'))) {
+              this.$transcriptButton.addClass('buttonOff').attr('title',this.tt.showTranscript);
+            }
+          }
+          else if (control === 'fullscreen') {
+            this.$fullscreenButton = newButton;
+          }
+          else if (control === 'chapters') {
+            this.$chaptersButton = newButton;
+          }
+          else if (control === 'preferences') {
+            this.$prefsButton = newButton;
+          }
+          else if (control === 'volume') {
+            this.$volumeButton = newButton;
+          }
+        }
+        if (control === 'volume') {
+          // in addition to the volume button, add a hidden slider
+          this.addVolumeSlider($controllerSpan);
+        }
+      }
+      if ((i % 2) == 1) {
+        this.$controllerDiv.append('<div style="clear:both;"></div>');
+      }
+    }
+
+    if (this.mediaType === 'video') {
+
+      if (typeof this.$captionsDiv !== 'undefined') {
+        // stylize captions based on user prefs
+        this.stylizeCaptions(this.$captionsDiv);
+      }
+      if (typeof this.$descDiv !== 'undefined') {
+        // stylize descriptions based on user's caption prefs
+        this.stylizeCaptions(this.$descDiv);
+      }
+    }
+
+    // combine left and right controls arrays for future reference
+    this.controls = [];
+    for (var sec in controlLayout) if (controlLayout.hasOwnProperty(sec)) {
+      this.controls = this.controls.concat(controlLayout[sec]);
+    }
+
+    // Update state-based display of controls.
+    this.refreshControls();
+  };
+
+  AblePlayer.prototype.useSvg = function () {
+
+    // Modified from IcoMoon.io svgxuse
+    // @copyright Copyright (c) 2016 IcoMoon.io
+    // @license   Licensed under MIT license
+    // See https://github.com/Keyamoon/svgxuse
+    // @version   1.1.16
+
+    var cache = Object.create(null); // holds xhr objects to prevent multiple requests
+    var checkUseElems,
+        tid; // timeout id
+    var debouncedCheck = function () {
+      clearTimeout(tid);
+      tid = setTimeout(checkUseElems, 100);
+    };
+    var unobserveChanges = function () {
+      return;
+    };
+    var observeChanges = function () {
+      var observer;
+      window.addEventListener('resize', debouncedCheck, false);
+      window.addEventListener('orientationchange', debouncedCheck, false);
+      if (window.MutationObserver) {
+        observer = new MutationObserver(debouncedCheck);
+        observer.observe(document.documentElement, {
+          childList: true,
+          subtree: true,
+          attributes: true
+        });
+        unobserveChanges = function () {
+          try {
+            observer.disconnect();
+            window.removeEventListener('resize', debouncedCheck, false);
+            window.removeEventListener('orientationchange', debouncedCheck, false);
+          } catch (ignore) {}
+        };
+      }
+      else {
+        document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false);
+        unobserveChanges = function () {
+          document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false);
+          window.removeEventListener('resize', debouncedCheck, false);
+          window.removeEventListener('orientationchange', debouncedCheck, false);
+        };
+      }
+    };
+    var xlinkNS = 'http://www.w3.org/1999/xlink';
+    checkUseElems = function () {
+      var base,
+          bcr,
+          fallback = '', // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.
+          hash,
+          i,
+          Request,
+          inProgressCount = 0,
+          isHidden,
+          url,
+          uses,
+          xhr;
+      if (window.XMLHttpRequest) {
+        Request = new XMLHttpRequest();
+        if (Request.withCredentials !== undefined) {
+          Request = XMLHttpRequest;
+        }
+        else {
+          Request = XDomainRequest || undefined;
+        }
+      }
+      if (Request === undefined) {
+        return;
+      }
+      function observeIfDone() {
+        // If done with making changes, start watching for chagnes in DOM again
+        inProgressCount -= 1;
+        if (inProgressCount === 0) { // if all xhrs were resolved
+          observeChanges(); // watch for changes to DOM
+        }
+      }
+      function attrUpdateFunc(spec) {
+        return function () {
+          if (cache[spec.base] !== true) {
+            spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash);
+          }
+        };
+      }
+      function onloadFunc(xhr) {
+        return function () {
+          var body = document.body;
+          var x = document.createElement('x');
+          var svg;
+          xhr.onload = null;
+          x.innerHTML = xhr.responseText;
+          svg = x.getElementsByTagName('svg')[0];
+          if (svg) {
+            svg.setAttribute('aria-hidden', 'true');
+            svg.style.position = 'absolute';
+            svg.style.width = 0;
+            svg.style.height = 0;
+            svg.style.overflow = 'hidden';
+            body.insertBefore(svg, body.firstChild);
+          }
+          observeIfDone();
+        };
+      }
+      function onErrorTimeout(xhr) {
+        return function () {
+          xhr.onerror = null;
+          xhr.ontimeout = null;
+          observeIfDone();
+        };
+      }
+      unobserveChanges(); // stop watching for changes to DOM
+      // find all use elements
+      uses = document.getElementsByTagName('use');
+      for (i = 0; i < uses.length; i += 1) {
+        try {
+          bcr = uses[i].getBoundingClientRect();
+        } catch (ignore) {
+          // failed to get bounding rectangle of the use element
+          bcr = false;
+        }
+        url = uses[i].getAttributeNS(xlinkNS, 'href').split('#');
+        base = url[0];
+        hash = url[1];
+        isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;
+        if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {
+          // the use element is empty
+          // if there is a reference to an external SVG, try to fetch it
+          // use the optional fallback URL if there is no reference to an external SVG
+          if (fallback && !base.length && hash && !document.getElementById(hash)) {
+            base = fallback;
+          }
+          if (base.length) {
+            // schedule updating xlink:href
+            xhr = cache[base];
+            if (xhr !== true) {
+              // true signifies that prepending the SVG was not required
+              setTimeout(attrUpdateFunc({
+                useEl: uses[i],
+                base: base,
+                hash: hash
+              }), 0);
+            }
+            if (xhr === undefined) {
+              xhr = new Request();
+              cache[base] = xhr;
+              xhr.onload = onloadFunc(xhr);
+              xhr.onerror = onErrorTimeout(xhr);
+              xhr.ontimeout = onErrorTimeout(xhr);
+              xhr.open('GET', base);
+              xhr.send();
+              inProgressCount += 1;
+            }
+          }
+        }
+        else {
+          if (!isHidden) {
+            if (cache[base] === undefined) {
+              // remember this URL if the use element was not empty and no request was sent
+              cache[base] = true;
+            }
+            else if (cache[base].onload) {
+              // if it turns out that prepending the SVG is not necessary,
+              // abort the in-progress xhr.
+              cache[base].abort();
+              cache[base].onload = undefined;
+              cache[base] = true;
+            }
+          }
+        }
+      }
+      uses = '';
+      inProgressCount += 1;
+      observeIfDone();
+    };
+/*
+    // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.
+    window.addEventListener('load', function winLoad() {
+      window.removeEventListener('load', winLoad, false); // to prevent memory leaks
+      tid = setTimeout(checkUseElems, 0);
+    }, false);
+*/
+  };
+
+  AblePlayer.prototype.swapSource = function(sourceIndex) {
+
+    // Change media player source file, for instance when moving to the next element in a playlist.
+    // NOTE: Swapping source for audio description is handled elsewhere;
+    // see description.js > swapDescription()
+
+    var $newItem, itemTitle, itemLang, sources, s, jwSource, i, $newSource, nowPlayingSpan;
+
+    this.$media.find('source').remove();
+    $newItem = this.$playlist.eq(sourceIndex);
+    itemTitle = $newItem.html();
+    if ($newItem.attr('lang')) {
+      itemLang = $newItem.attr('lang');
+    }
+    sources = [];
+    s = 0; // index
+    if (this.mediaType === 'audio') {
+      if ($newItem.attr('data-mp3')) {
+        jwSource = $newItem.attr('data-mp3'); // JW Player can play this
+        sources[s] =  new Array('audio/mpeg',jwSource);
+        s++;
+      }
+      if ($newItem.attr('data-webm')) {
+        sources[s] = new Array('audio/webm',$newItem.attr('data-webm'));
+        s++;
+      }
+      if ($newItem.attr('data-webma')) {
+        sources[s] = new Array('audio/webm',$newItem.attr('data-webma'));
+        s++;
+      }
+      if ($newItem.attr('data-ogg')) {
+        sources[s] = new Array('audio/ogg',$newItem.attr('data-ogg'));
+        s++;
+      }
+      if ($newItem.attr('data-oga')) {
+        sources[s] = new Array('audio/ogg',$newItem.attr('data-oga'));
+        s++;
+      }
+      if ($newItem.attr('data-wav')) {
+        sources[s] = new Array('audio/wav',$newItem.attr('data-wav'));
+        s++;
+      }
+    }
+    else if (this.mediaType === 'video') {
+      if ($newItem.attr('data-mp4')) {
+        jwSource = $newItem.attr('data-mp4'); // JW Player can play this
+        sources[s] =  new Array('video/mp4',jwSource);
+        s++;
+      }
+      if ($newItem.attr('data-webm')) {
+        sources[s] = new Array('video/webm',$newItem.attr('data-webm'));
+        s++;
+      }
+      if ($newItem.attr('data-webmv')) {
+        sources[s] = new Array('video/webm',$newItem.attr('data-webmv'));
+        s++;
+      }
+      if ($newItem.attr('data-ogg')) {
+        sources[s] = new Array('video/ogg',$newItem.attr('data-ogg'));
+        s++;
+      }
+      if ($newItem.attr('data-ogv')) {
+        sources[s] = new Array('video/ogg',$newItem.attr('data-ogv'));
+        s++;
+      }
+    }
+    for (i=0; i<sources.length; i++) {
+      $newSource = $('<source>',{
+        type: sources[i][0],
+        src: sources[i][1]
+      });
+      this.$media.append($newSource);
+    }
+
+    // update playlist to indicate which item is playing
+    //$('.able-playlist li').removeClass('able-current');
+    this.$playlist.removeClass('able-current');
+    $newItem.addClass('able-current');
+
+    // update Now Playing div
+    if (this.showNowPlaying === true) {
+      nowPlayingSpan = $('<span>');
+      if (typeof itemLang !== 'undefined') {
+        nowPlayingSpan.attr('lang',itemLang);
+      }
+      nowPlayingSpan.html('<span>Selected track:</span>' + itemTitle);
+      this.$nowPlayingDiv.html(nowPlayingSpan);
+    }
+
+    // reload audio after sources have been updated
+    // if this.swappingSrc is true, media will autoplay when ready
+    if (this.initializing) { // this is the first track - user hasn't pressed play yet
+      this.swappingSrc = false;
+    }
+    else {
+      this.swappingSrc = true;
+      if (this.player === 'html5') {
+        this.media.load();
+      }
+      else if (this.player === 'jw') {
+        this.jwPlayer.load({file: jwSource});
+      }
+      else if (this.player === 'youtube') {
+        // Does nothing, can't swap source with youtube.
+        // TODO: Anything we need to do to prevent this happening?
+      }
+    }
+  };
+
+  AblePlayer.prototype.getButtonTitle = function(control) {
+
+    var captionsCount;
+
+    if (control === 'playpause') {
+      return this.tt.play;
+    }
+    else if (control === 'play') {
+      return this.tt.play;
+    }
+    else if (control === 'pause') {
+      return this.tt.pause;
+    }
+    else if (control === 'restart') {
+      return this.tt.restart;
+    }
+    else if (control === 'rewind') {
+      return this.tt.rewind;
+    }
+    else if (control === 'forward') {
+      return this.tt.forward;
+    }
+    else if (control === 'captions') {
+      if (this.usingYouTubeCaptions) {
+        captionsCount = this.ytCaptions.length;
+      }
+      else {
+        captionsCount = this.captions.length;
+      }
+      if (captionsCount > 1) {
+        return this.tt.captions;
+      }
+      else {
+        if (this.captionsOn) {
+          return this.tt.hideCaptions;
+        }
+        else {
+          return this.tt.showCaptions;
+        }
+      }
+    }
+    else if (control === 'descriptions') {
+      if (this.descOn) {
+        return this.tt.turnOffDescriptions;
+      }
+      else {
+        return this.tt.turnOnDescriptions;
+      }
+    }
+    else if (control === 'transcript') {
+      if (this.$transcriptDiv.is(':visible')) {
+        return this.tt.hideTranscript;
+      }
+      else {
+        return this.tt.showTranscript;
+      }
+    }
+    else if (control === 'chapters') {
+      return this.tt.chapters;
+    }
+    else if (control === 'sign') {
+      return this.tt.sign;
+    }
+    else if (control === 'volume') {
+      return this.tt.volume;
+    }
+    else if (control === 'faster') {
+      return this.tt.faster;
+    }
+    else if (control === 'slower') {
+      return this.tt.slower;
+    }
+    else if (control === 'preferences') {
+      return this.tt.preferences;
+    }
+    else if (control === 'help') {
+      // return this.tt.help;
+    }
+    else {
+      // there should be no other controls, but just in case:
+      // return the name of the control with first letter in upper case
+      // ultimately will need to get a translated label from this.tt
+      if (this.debug) {
+        console.log('Found an untranslated label: ' + control);
+      }
+      return control.charAt(0).toUpperCase() + control.slice(1);
+    }
+  };
+
+
+})(jQuery);