var thisObj = this;

// Keep track of the last player created for use with global events.

AblePlayer.lastCreated = this;

this.media = media;

if ($(media).length === 0) {

this.provideFallback();

return;

}

// Default variables assignment

// The following variables CAN be overridden with HTML attributes

// autoplay (Boolean; if present always resolves to true, regardless of value)

if ($(media).attr('autoplay') !== undefined) {

this.autoplay = true; // this value remains constant

this.okToPlay = true; // this value can change dynamically

} else {

this.autoplay = false;

this.okToPlay = false;

}

// loop (Boolean; if present always resolves to true, regardless of value)

this.loop = ($(media).attr('loop') !== undefined) ? true : false;

// playsinline (Boolean; if present always resolves to true, regardless of value)

this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0';

// poster (Boolean, indicating whether media element has a poster attribute)

this.hasPoster = ( $(media).attr('poster') || $(media).data('poster') ) ? true : false;

this.audioPoster = $(media).data('poster');

this.audioPosterAlt = $(media).data('poster-alt' );

// get height and width attributes, if present

// and add them to variables

// Not currently used, but might be useful for resizing player

this.width = $(media).attr('width') ?? 0;

this.height = $(media).attr('height') ?? 0;

// start-time

var startTime = $(media).data('start-time');

var isNumeric = ( typeof startTime === 'number' || ( typeof startTime === 'string' && value.trim() !== '' && ! isNaN(value) && isFinite( Number(value) ) ) ) ? true : false;

this.startTime = ( startTime !== undefined && isNumeric ) ? startTime : 0;

// debug

this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false;

// Path to root directory of Able Player code

if ($(media).data('root-path') !== undefined) {

// add a trailing slash if there is none

this.rootPath = $(media).data('root-path').replace(/\/?$/, '/');

} else {

this.rootPath = this.getRootPath();

}

// Volume

// Range is 0 to 10. Best not to crank it to avoid overpowering screen readers

this.defaultVolume = 7;

if ($(media).data('volume') !== undefined && $(media).data('volume') !== "") {

var volume = $(media).data('volume');

if (volume >= 0 && volume <= 10) {

this.defaultVolume = volume;

}

}

this.volume = this.defaultVolume;

// Optional Buttons

// Buttons are added to the player controller if relevant media is present

// However, in some applications it might be undesirable to show buttons

// (e.g., if chapters or transcripts are provided in an external container)

if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) {

this.useChaptersButton = false;

} else {

this.useChaptersButton = true;

}

// Control whether text descriptions are read aloud

// set to "false" if the sole purpose of the WebVTT descriptions file

// is to integrate text description into the transcript

// set to "true" to write description text to a div

// This variable does *not* control the method by which description is read.

// For that, see below (this.descMethod)

if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) {

this.readDescriptionsAloud = false;

} else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) {

// support both singular and plural spelling of attribute

this.readDescriptionsAloud = false;

} else {

this.readDescriptionsAloud = true;

}

// setting initial this.descVoices to an empty array

// to be populated later by getBrowserVoices

this.descVoices = [];

// Method by which text descriptions are read

// valid values of data-desc-reader are:

// 'brower' (default) - text-based audio description is handled by the browser, if supported

// 'screenreader' - text-based audio description is always handled by screen readers

// The latter may be preferable by owners of websites in languages that are not well supported

// by the Web Speech API

this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser';

// Default state of captions and descriptions

// This setting is overridden by user preferences, if they exist

// values for data-state-captions and data-state-descriptions are 'on' or 'off'

this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1;

this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0;

// Default setting for prefDescPause

// Extended description (i.e., pausing during description) is on by default

// but this settings give website owners control over that

// since they know the nature of their videos, and whether pausing is necessary

// This setting is overridden by user preferences, if they exist

this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1;

// Headings

// By default, an off-screen heading is automatically added to the top of the media player

// It is intelligently assigned a heading level based on context, via misc.js > getNextHeadingLevel()

// Authors can override this behavior by manually assigning a heading level using data-heading-level

// Accepted values are 1-6, or 0 which indicates "no heading"

// (i.e., author has already hard-coded a heading before the media player; Able Player doesn't need to do this)

if ($(media).data('heading-level') !== undefined && $(media).data('heading-level') !== "") {

var headingLevel = $(media).data('heading-level');

if (/^[0-6]*$/.test(headingLevel)) { // must be a valid HTML heading level 1-6; or 0

this.playerHeadingLevel = headingLevel;

}

}

// Transcripts

// There are three types of interactive transcripts.

// In descending of order of precedence (in case there are conflicting tags), they are:

// 1. "manual" - A manually coded external transcript (requires data-transcript-src)

// 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element)

// 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button

// If data-include-transcript="false", there is no "popup" transcript

var transcriptDivLocation = $(media).data('transcript-div');

if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) {

this.transcriptDivLocation = transcriptDivLocation;

} else {

this.transcriptDivLocation = null;

}

var includeTranscript = $(media).data('include-transcript');

this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false;

this.transcriptType = null;

if ($(media).data('transcript-src') !== undefined) {

this.transcriptSrc = $(media).data('transcript-src');

if (this.transcriptSrcHasRequiredParts()) {

this.transcriptType = 'manual';

} else {

console.log('ERROR: Able Player transcript is missing required parts');

}

} else if ($(media).find('track[kind="captions"],track[kind="subtitles"],track:not([kind])').length > 0) {

// required tracks are present. COULD automatically generate a transcript

this.transcriptType = (this.transcriptDivLocation) ? 'external' : 'popup';

}

// In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript

// If false (default), line breaks are are removed from transcripts for a more seamless reading experience

// If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem

this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false;

// Set Transcript Title if defined explicitly. See transcript.js.

if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") {

this.transcriptTitle = $(media).data('transcript-title');

}

// Sign Language

// sign language can be a modal (default) or assigned to a div on the page.

var signDivLocation = $(media).data('sign-div');

if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) {

this.$signDivLocation = $( '#' + signDivLocation );

} else {

this.$signDivLocation = null;

}

// Captions

// data-captions-position can be used to set the default captions position

// this is only the default, and can be overridden by user preferences

// valid values of data-captions-position are 'below' and 'overlay'

this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below';

// Chapters

var chaptersDiv = $(media).data('chapters-div');

if ( chaptersDiv !== undefined && chaptersDiv !== "") {

this.chaptersDivLocation = chaptersDiv;

}

if ($(media).data('chapters-title') !== undefined) {

// NOTE: empty string is valid; results in no title being displayed

this.chaptersTitle = $(media).data('chapters-title');

}

var defaultChapter = $(media).data('chapters-default');

this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null;

// Slower/Faster buttons

// valid values of data-speed-icons are 'animals' (default) and 'arrows'

// 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows

this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals';

// Seekbar

// valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters'

var seekbarScope = $(media).data('seekbar-scope');

this.seekbarScope = ( seekbarScope === 'chapter' || seekbarScope === 'chapters') ? 'chapter' : 'video';

// YouTube

var youTubeId = $(media).data('youtube-id');

if ( youTubeId !== undefined && youTubeId !== "") {

this.youTubeId = this.getYouTubeId(youTubeId);

if ( ! this.hasPoster ) {

let poster = this.getYouTubePosterUrl(this.youTubeId,'640');

$(media).attr( 'poster', poster );

}

}

var youTubeDescId = $(media).data('youtube-desc-id');

if ( youTubeDescId !== undefined && youTubeDescId !== "") {

this.youTubeDescId = this.getYouTubeId(youTubeDescId);

}

var youTubeSignId = $(media).data('youtube-sign-src');

if ( youTubeSignId !== undefined && youTubeSignId !== "") {

this.youTubeSignId = this.getYouTubeId(youTubeSignId);

}

var youTubeNoCookie = $(media).data('youtube-nocookie');

this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false;

// Vimeo

var vimeoId = $(media).data('vimeo-id');

if ( vimeoId !== undefined && vimeoId !== "") {

this.vimeoId = this.getVimeoId(vimeoId);

if ( ! this.hasPoster ) {

let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200');

$(media).attr( 'poster', poster );

}

}

var vimeoDescId = $(media).data('vimeo-desc-id');

if ( vimeoDescId !== undefined && vimeoDescId !== "") {

this.vimeoDescId = this.getVimeoId(vimeoDescId);

}

// Skin

// valid values of data-skin are:

// '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar

// 'legacy', two rows of controls; seekbar positioned in available space within top row

this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020';

// Size

// width of Able Player is determined using the following order of precedence:

// 1. data-width attribute

// 2. width attribute (for video or audio, although it is not valid HTML for audio)

// 3. Intrinsic size from video (video only, determined later)

if ($(media).data('width') !== undefined) {

this.playerWidth = parseInt($(media).data('width'));

} else if ($(media)[0].getAttribute('width')) {

// NOTE: jQuery attr() returns null for all invalid HTML attributes

// (e.g., width on <audio>)

// but it can be acessed via JavaScript getAttribute()

this.playerWidth = parseInt($(media)[0].getAttribute('width'));

} else {

this.playerWidth = null;

}

// Icon type

// By default, AblePlayer 3.0.33 and higher uses SVG icons for the player controls

// Fallback for browsers that don't support SVG is scalable icomoon fonts

// Ultimate fallback is images, if the user has a custom style sheet that overrides font-family

// Use data-icon-type to force controls to use either 'svg', 'font', or 'images'

this.iconType = 'font';

this.forceIconType = false;

if ($(media).data('icon-type') !== undefined && $(media).data('icon-type') !== "") {

var iconType = $(media).data('icon-type');

if (iconType === 'font' || iconType === 'image' || iconType === 'svg') {

this.iconType = iconType;

this.forceIconType = true;

}

}

var allowFullScreen = $(media).data('allow-fullscreen');

this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true;

// Define other variables that are used in fullscreen program flow

this.clickedFullscreenButton = false;

this.restoringAfterFullscreen = false;

// Seek interval

// Number of seconds to seek forward or back with Rewind & Forward buttons

// Unless specified with data-seek-interval, the default value is re-calculated in initialize.js > setSeekInterval();

// Calculation attempts to intelligently assign a reasonable interval based on media length

this.defaultSeekInterval = 10;

this.useFixedSeekInterval = false; // will change to true if media has valid data-seek-interval attribute

if ($(media).data('seek-interval') !== undefined && $(media).data('seek-interval') !== "") {

var seekInterval = $(media).data('seek-interval');

if (/^[1-9][0-9]*$/.test(seekInterval)) { // must be a whole number greater than 0

this.seekInterval = seekInterval;

this.useFixedSeekInterval = true; // do not override with calculuation

}

}

// Now Playing

// Shows "Now Playing:" plus the title of the current track above player

// Only used if there is a playlist

var showNowPlaying = $(media).data('show-now-playing');

this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true;

// TTML support (experimental); enabled for testing with data-use-ttml (Boolean)

if ($(media).data('use-ttml') !== undefined) {

this.useTtml = true;

// The following may result in a console error.

this.convert = require('xml-js');

} else {

this.useTtml = false;

}

// Fallback

// The data-test-fallback attribute can be used to test the fallback solution in any browser

var testFallback = $(media).data('test-fallback');

if ( testFallback !== undefined && testFallback !== false) {

// 1: build error; 2: browser doesn't support media.

this.testFallback = ( testFallback == '2' ) ? 2 : 1;

} else {

this.testFallback = false;

}

// Language

// Player language is determined given the following precedence:

// 1. The value of data-lang on the media element, if provided and a matching translation file is available

// 2. Lang attribute on <html> or <body>, if a matching translation file is available

// 3. English

// Final calculation occurs in translation.js > getTranslationText()

var lang = $(media).data('lang');

this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null;

// Metadata Tracks

var metaType = $(media).data('meta-type');

if ( metaType !== undefined && metaType !== "") {

this.metaType = metaType;

}

var metaDiv = $(media).data('meta-div');

if ( metaDiv !== undefined && metaDiv !== "") {

this.metaDiv = metaDiv;

}

// Search

// conducting a search requires an external div in which to write the results

var searchDiv = $(media).data('search-div');

if ( searchDiv !== undefined && searchDiv !== "") {

this.searchDiv = searchDiv;

// Search term (optional; could be assigned later in a JavaScript application)

var searchString = $(media).data('search');

if ( searchString !== undefined && searchString !== "") {

this.searchString = searchString;

}

// Search Language

var searchLang = $(media).data('search-lang');

this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null;

// Search option: Ignore capitalization in search terms

var searchIgnoreCaps = $(media).data('search-ignore-caps');

this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false;

}

// Hide controls when video starts playing

// They will reappear again when user presses a key or moves the mouse

// As of v4.0, controls are hidden automatically on playback in fullscreen mode

if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) {

this.hideControls = true;

this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode

} else {

this.hideControls = false;

this.hideControlsOriginal = false;

}

// Steno mode

// Enable support for Able Player keyboard shortcuts in textaarea fields

// so users can control the player while transcribing

if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) {

this.stenoMode = true;

// Add support for stenography in an iframe via data-steno-iframe-id

if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") {

this.stenoFrameId = $(media).data('steno-iframe-id');

this.$stenoFrame = $('#' + this.stenoFrameId);

if (!(this.$stenoFrame.length)) {

// iframe not found

this.stenoFrameId = null;

this.$stenoFrame = null;

}

} else {

this.stenoFrameId = null;

this.$stenoFrame = null;

}

} else {

this.stenoMode = false;

this.stenoFrameId = null;

this.$stenoFrame = null;

}

// Define built-in variables that CANNOT be overridden with HTML attributes

this.setDefaults();

////////////////////////////////////////

// End assignment of default variables

////////////////////////////////////////

this.ableIndex = AblePlayer.nextIndex;

AblePlayer.nextIndex += 1;

this.title = $(media).attr('title');

// populate translation object with localized versions of all labels and prompts

// use defer method to defer additional processing until text is retrieved

this.tt = {};

var thisObj = this;

async function fetchTranslations(thisObj) {

try {

await thisObj.getTranslationText();

thisObj.setup();

} catch {

thisObj.provideFallback();

}

}

fetchTranslations(thisObj);

var thisObj = this;

this.initializing = true; // will remain true until entire sequence of function calls is complete

this.reinitialize().then(function () {

if (!thisObj.player) {

// No player for this media, show last-line fallback.

thisObj.provideFallback();

} else {

thisObj.setupInstance().then(function () {

thisObj.setupInstancePlaylist();

if (thisObj.hasPlaylist) {

// for playlists, recreatePlayer() is called from within cuePlaylistItem()

} else {

thisObj.recreatePlayer().then(function() {

thisObj.initializing = false;

thisObj.playerCreated = true; // remains true until browser is refreshed

});

}

});

}

});

var activeElement = document.activeElement;

// For shadow DOMs we need to keep digging down through the DOMs

while (activeElement.shadowRoot && activeElement.shadowRoot.activeElement) {

activeElement = activeElement.shadowRoot.activeElement;

}

return activeElement;

if (element.getRootNode) {

// Use getRootNode() and querySelector() where supported (for shadow DOM support)

return $(element.getRootNode().querySelector('#' + id));

} else {

// If getRootNode is not supported it should be safe to use document.getElementById (since there is no shadow DOM support)

return $(document.getElementById(id));

}

this.playerCreated = false; // will set to true after recreatePlayer() is complete the first time

this.playing = false; // will change to true after 'playing' event is triggered

this.paused = true; // will always be the opposite of this.playing (available for convenience)

this.clickedPlay = false; // will change to true temporarily if user clicks 'play' (or pause)

this.fullscreen = false; // will change to true if player is in full screen mode

this.swappingSrc = false; // will change to true temporarily while media source is being swapped

this.initializing = false; // will change to true temporarily while initPlayer() is processing

this.cueingPlaylistItems = false; // will change to true temporarily while cueing next playlist item

this.buttonWithFocus = null; // will change to 'previous' or 'next' if user clicks either of those buttons

this.speechEnabled = null; // will change either to 'true' in initSpeech(), or false if not supported

this.setIconColor();

this.setButtonImages();

// returns Able Player root path (assumes ableplayer.js is in /build, one directory removed from root)

var scripts, i, scriptSrc, scriptFile, fullPath, ablePath, parentFolderIndex, rootPath;

scripts= document.getElementsByTagName('script');

for (i=0; i < scripts.length; i++) {

scriptSrc = scripts[i].src;

scriptFile = scriptSrc.substring(scriptSrc.lastIndexOf('/'));

if (scriptFile.indexOf('ableplayer') !== -1) {

// this is the ableplayerscript

fullPath = scriptSrc.split('?')[0]; // remove any ? params

break;

}

}

ablePath= fullPath.split('/').slice(0, -1).join('/'); // remove last filename part of path

parentFolderIndex = ablePath.lastIndexOf('/');

rootPath = ablePath.substring(0, parentFolderIndex) + '/';

return rootPath;

// determine the best color choice (white or black) for icons,

// given the background-color of their container elements

// Source for relative luminance formula:

// https://en.wikipedia.org/wiki/Relative_luminance

// We need to know the color *before* creating the element

// so the element doesn't exist yet when this function is called

// therefore, need to create a temporary element then remove it after color is determined

// Temp element must be added to the DOM or WebKit can't retrieve its CSS properties

var $elements, i, $el, bgColor, rgb, red, green, blue, luminance, iconColor;

$elements = ['controller', 'toolbar'];

for (i=0; i<$elements.length; i++) {

if ($elements[i] == 'controller') {

$el = $('<div>', {

'class': 'able-controller'

}).hide();

} else if ($elements[i] === 'toolbar') {

$el = $('<div>', {

'class': 'able-window-toolbar'

}).hide();

}

$('body').append($el);

bgColor = $el.css('background-color');

// bgColor is a string in the form 'rgb(R, G, B)', perhaps with a 4th item for alpha;

// split the 3 or 4 channels into an array

rgb = bgColor.replace(/[^\d,]/g, '').split(',');

red = rgb[0];

green = rgb[1];

blue = rgb[2];

luminance = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);

// range is 1 - 255; therefore 125 is the tipping point

iconColor = (luminance < 125) ? 'white' : 'black';

if ($elements[i] === 'controller') {

this.iconColor = iconColor;

} else if ($elements[i] === 'toolbar') {

this.toolbarIconColor = iconColor;

}

$el.remove();

}

// NOTE: volume button images are now set dynamically within volume.js

this.imgPath = this.rootPath + 'button-icons/' + this.iconColor + '/';

this.playButtonImg = this.imgPath + 'play.png';

this.pauseButtonImg = this.imgPath + 'pause.png';

this.restartButtonImg = this.imgPath + 'restart.png';

this.rewindButtonImg = this.imgPath + 'rewind.png';

this.forwardButtonImg = this.imgPath + 'forward.png';

this.previousButtonImg = this.imgPath + 'previous.png';

this.nextButtonImg = this.imgPath + 'next.png';

if (this.speedIcons === 'arrows') {

this.fasterButtonImg = this.imgPath + 'slower.png';

this.slowerButtonImg = this.imgPath + 'faster.png';

} else if (this.speedIcons === 'animals') {

this.fasterButtonImg = this.imgPath + 'rabbit.png';

this.slowerButtonImg = this.imgPath + 'turtle.png';

}

this.captionsButtonImg = this.imgPath + 'captions.png';

this.chaptersButtonImg = this.imgPath + 'chapters.png';

this.signButtonImg = this.imgPath + 'sign.png';

this.transcriptButtonImg = this.imgPath + 'transcript.png';

this.descriptionsButtonImg = this.imgPath + 'descriptions.png';

this.fullscreenExpandButtonImg = this.imgPath + 'fullscreen-expand.png';

this.fullscreenCollapseButtonImg = this.imgPath + 'fullscreen-collapse.png';

this.prefsButtonImg = this.imgPath + 'preferences.png';

this.helpButtonImg = this.imgPath + 'help.png';

// returns array of values for creating <svg> tag for specified button

// 0 = <svg> viewBox attribute

// 1 = <path> d (description) attribute

// 2 = icon class for font icons

// 3 = img URL for images.

var svg = Array();

switch (button) {

case 'play':

svg[0] = '0 0 16 20';

svg[1] = 'M0 18.393v-16.429q0-0.29 0.184-0.402t0.441 0.033l14.821 8.237q0.257 0.145 0.257 0.346t-0.257 0.346l-14.821 8.237q-0.257 0.145-0.441 0.033t-0.184-0.402z';

svg[2] = 'icon-play';

svg[3] = this.playButtonImg;

break;

case 'pause':

svg[0] = '0 0 20 20';

svg[1] = 'M0 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502zM10 18.036v-15.714q0-0.29 0.212-0.502t0.502-0.212h5.714q0.29 0 0.502 0.212t0.212 0.502v15.714q0 0.29-0.212 0.502t-0.502 0.212h-5.714q-0.29 0-0.502-0.212t-0.212-0.502z';

svg[2] = 'icon-pause';

svg[3] = this.pauseButtonImg;

break;

case 'restart':

svg[0] = '0 0 20 20';

svg[1] = 'M18 8h-6l2.243-2.243c-1.133-1.133-2.64-1.757-4.243-1.757s-3.109 0.624-4.243 1.757c-1.133 1.133-1.757 2.64-1.757 4.243s0.624 3.109 1.757 4.243c1.133 1.133 2.64 1.757 4.243 1.757s3.109-0.624 4.243-1.757c0.095-0.095 0.185-0.192 0.273-0.292l1.505 1.317c-1.466 1.674-3.62 2.732-6.020 2.732-4.418 0-8-3.582-8-8s3.582-8 8-8c2.209 0 4.209 0.896 5.656 2.344l2.344-2.344v6z';

svg[2] = 'icon-restart';

svg[3] = this.restartButtonImg;

break;

case 'rewind':

svg[0] = '0 0 20 20';

svg[1] = 'M11.25 3.125v6.25l6.25-6.25v13.75l-6.25-6.25v6.25l-6.875-6.875z';

svg[2] = 'icon-rewind';

svg[3] = this.rewindButtonImg;

break;

case 'forward':

svg[0] = '0 0 20 20';

svg[1] = 'M10 16.875v-6.25l-6.25 6.25v-13.75l6.25 6.25v-6.25l6.875 6.875z';

svg[2] = 'icon-forward';

svg[3] = this.forwardButtonImg;

break;

case 'previous':

svg[0] = '0 0 20 20';

svg[1] = 'M5 17.5v-15h2.5v6.875l6.25-6.25v13.75l-6.25-6.25v6.875z';

svg[2] = 'icon-previous';

svg[3] = this.previousButtonImg;

break;

case 'next':

svg[0] = '0 0 20 20';

svg[1] = 'M15 2.5v15h-2.5v-6.875l-6.25 6.25v-13.75l6.25 6.25v-6.875z';

svg[2] = 'icon-next';

svg[3] = this.nextButtonImg;

break;

case 'slower':

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;

break;

case 'faster':

svg[0] = '0 0 11 20';

svg[1] = 'M0 12.411q0-0.29 0.212-0.502l5-5q0.212-0.212 0.502-0.212t0.502 0.212l5 5q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-10q-0.29 0-0.502-0.212t-0.212-0.502z';

svg[2] = 'icon-faster';

svg[3] = this.fasterButtonImg;

break;

case 'turtle':

svg[0] = '0 0 20 20';

svg[1] = 'M17.212 3.846c-0.281-0.014-0.549 0.025-0.817 0.144-1.218 0.542-1.662 2.708-2.163 3.942-1.207 2.972-7.090 4.619-11.755 5.216-0.887 0.114-1.749 0.74-2.428 1.466 0.82-0.284 2.126-0.297 2.74 0.144 0.007 0.488-0.376 1.062-0.625 1.37-0.404 0.5-0.398 0.793 0.12 0.793 0.473 0 0.752 0.007 1.635 0 0.393-0.003 0.618-0.16 1.49-1.49 3.592 0.718 5.986-0.264 5.986-0.264s0.407 1.755 1.418 1.755h1.49c0.633 0 0.667-0.331 0.625-0.433-0.448-1.082-0.68-1.873-0.769-2.5-0.263-1.857 0.657-3.836 2.524-5.457 0.585 0.986 2.253 0.845 2.909-0.096s0.446-2.268-0.192-3.221c-0.49-0.732-1.345-1.327-2.188-1.37zM8.221 4.663c-0.722-0.016-1.536 0.111-2.5 0.409-4.211 1.302-4.177 4.951-3.51 5.745 0 0-0.955 0.479-0.409 1.274 0.448 0.652 3.139 0.191 5.409-0.529s4.226-1.793 5.312-2.692c0.948-0.785 0.551-2.106-0.505-1.947-0.494-0.98-1.632-2.212-3.798-2.26zM18.846 5.962c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577z';

svg[2] = 'icon-turtle';

svg[3] = this.slowerButtonImg;

break;

case 'rabbit':

svg[0] = '0 0 20 20';

svg[1] = 'M10.817 0c-2.248 0-1.586 0.525-1.154 0.505 1.551-0.072 5.199 0.044 6.851 2.428 0 0-1.022-2.933-5.697-2.933zM10.529 0.769c-2.572 0-2.837 0.51-2.837 1.106 0 0.545 1.526 0.836 2.524 0.697 2.778-0.386 4.231-0.12 5.264 0.865-1.010 0.779-0.75 1.401-1.274 1.851-1.093 0.941-2.643-0.673-4.976-0.673-2.496 0-4.712 1.92-4.712 4.76-0.157-0.537-0.769-0.913-1.442-0.913-0.974 0-1.514 0.637-1.514 1.49 0 0.769 1.13 1.791 2.861 0.938 0.499 1.208 2.265 1.364 2.452 1.418 0.538 0.154 1.875 0.098 1.875 0.865 0 0.794-1.034 1.094-1.034 1.707 0 1.070 1.758 0.873 2.284 1.034 1.683 0.517 2.103 1.214 2.788 2.212 0.771 1.122 2.572 1.408 2.572 0.625 0-3.185-4.413-4.126-4.399-4.135 0.608-0.382 2.139-1.397 2.139-3.534 0-1.295-0.703-2.256-1.755-2.861 1.256 0.094 2.572 1.205 2.572 2.74 0 1.877-0.653 2.823-0.769 2.957 1.975-1.158 3.193-3.91 3.029-6.37 0.61 0.401 1.27 0.577 1.971 0.625 0.751 0.052 1.475-0.225 1.635-0.529 0.38-0.723 0.162-2.321-0.12-2.837-0.763-1.392-2.236-1.73-3.606-1.683-1.202-1.671-3.812-2.356-5.529-2.356zM1.37 3.077l-0.553 1.538h3.726c0.521-0.576 1.541-1.207 2.284-1.538h-5.457zM18.846 5.192c0.325 0 0.577 0.252 0.577 0.577s-0.252 0.577-0.577 0.577c-0.325 0-0.577-0.252-0.577-0.577s0.252-0.577 0.577-0.577zM0.553 5.385l-0.553 1.538h3.197c0.26-0.824 0.586-1.328 0.769-1.538h-3.413z';

svg[2] = 'icon-rabbit';

svg[3] = this.fasterButtonImg;

break;

case 'ellipsis':

svg[0] = '0 0 20 20';

svg[1] = 'M10.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2zM3.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2zM17.001 7.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z';

svg[2] = 'icon-ellipsis';

svg[3] = false;

break;

case 'pipe':

svg[0] = '0 0 20 20';

svg[1] = 'M10.15 0.179h0.623c0.069 0 0.127 0.114 0.127 0.253v19.494c0 0.139-0.057 0.253-0.127 0.253h-1.247c-0.069 0-0.126-0.114-0.126-0.253v-19.494c0-0.139 0.057-0.253 0.126-0.253h0.623z';

svg[2] = 'icon-pipe';

svg[3] = false;

break;

case 'captions':

svg[0] = '0 0 20 20';

svg[1] = 'M0.033 3.624h19.933v12.956h-19.933v-12.956zM18.098 10.045c-0.025-2.264-0.124-3.251-0.743-3.948-0.112-0.151-0.322-0.236-0.496-0.344-0.606-0.386-3.465-0.526-6.782-0.526s-6.313 0.14-6.907 0.526c-0.185 0.108-0.396 0.193-0.519 0.344-0.607 0.697-0.693 1.684-0.731 3.948 0.037 2.265 0.124 3.252 0.731 3.949 0.124 0.161 0.335 0.236 0.519 0.344 0.594 0.396 3.59 0.526 6.907 0.547 3.317-0.022 6.176-0.151 6.782-0.547 0.174-0.108 0.384-0.183 0.496-0.344 0.619-0.697 0.717-1.684 0.743-3.949v0 0zM9.689 9.281c-0.168-1.77-1.253-2.813-3.196-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.442-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.977zM16.607 9.281c-0.167-1.77-1.252-2.813-3.194-2.813-1.773 0-3.168 1.387-3.168 3.617 0 2.239 1.271 3.636 3.372 3.636 1.676 0 2.851-1.071 3.035-2.852h-2.003c-0.079 0.661-0.397 1.168-1.068 1.168-1.059 0-1.253-0.91-1.253-1.876 0-1.33 0.441-2.010 1.174-2.010 0.653 0 1.068 0.412 1.13 1.129h1.976z';

svg[2] = 'icon-captions';

svg[3] = this.captionsButtonImg;

break;

case 'descriptions':

svg[0] = '0 0 20 20';

svg[1] = 'M17.623 3.57h-1.555c1.754 1.736 2.763 4.106 2.763 6.572 0 2.191-0.788 4.286-2.189 5.943h1.484c1.247-1.704 1.945-3.792 1.945-5.943-0-2.418-0.886-4.754-2.447-6.572v0zM14.449 3.57h-1.55c1.749 1.736 2.757 4.106 2.757 6.572 0 2.191-0.788 4.286-2.187 5.943h1.476c1.258-1.704 1.951-3.792 1.951-5.943-0-2.418-0.884-4.754-2.447-6.572v0zM11.269 3.57h-1.542c1.752 1.736 2.752 4.106 2.752 6.572 0 2.191-0.791 4.286-2.181 5.943h1.473c1.258-1.704 1.945-3.792 1.945-5.943 0-2.418-0.876-4.754-2.447-6.572v0zM10.24 9.857c0 3.459-2.826 6.265-6.303 6.265v0.011h-3.867v-12.555h3.896c3.477 0 6.274 2.806 6.274 6.279v0zM6.944 9.857c0-1.842-1.492-3.338-3.349-3.338h-0.876v6.686h0.876c1.858 0 3.349-1.498 3.349-3.348v0z';

svg[2] = 'icon-descriptions';

svg[3] = this.descriptionsButtonImg;

break;

case 'sign':

svg[0] = '0 0 20 20';

svg[1] = 'M10.954 10.307c0.378 0.302 0.569 1.202 0.564 1.193 0.697 0.221 1.136 0.682 1.136 0.682 1.070-0.596 1.094-0.326 1.558-0.682 0.383-0.263 0.366-0.344 0.567-1.048 0.187-0.572-0.476-0.518-1.021-1.558-0.95 0.358-1.463 0.196-1.784 0.167-0.145-0.020-0.12 0.562-1.021 1.247zM14.409 17.196c-0.133 0.182-0.196 0.218-0.363 0.454-0.28 0.361 0.076 0.906 0.253 0.82 0.206-0.076 0.341-0.488 0.567-0.623 0.115-0.061 0.422-0.513 0.709-0.82 0.211-0.238 0.363-0.344 0.564-0.594 0.341-0.422 0.412-0.744 0.709-1.193 0.184-0.236 0.312-0.307 0.481-0.594 0.886-1.679 0.628-2.432 1.475-3.629 0.26-0.353 0.552-0.442 0.964-0.653 0.383-2.793-0.888-4.356-0.879-4.361-1.067 0.623-1.644 0.879-2.751 0.82-0.417-0.005-0.636-0.182-1.048-0.145-0.385 0.015-0.582 0.159-0.964 0.29-0.589 0.182-0.91 0.344-1.529 0.535-0.393 0.11-0.643 0.115-1.050 0.255-0.348 0.147-0.182 0.029-0.427 0.312-0.317 0.348-0.238 0.623-0.535 1.222-0.371 0.785-0.326 0.891-0.115 0.987-0.14 0.402-0.174 0.672-0.14 1.107 0.039 0.331-0.101 0.562 0.255 0.825 0.483 0.361 1.499 1.205 1.757 1.217 0.39-0.012 1.521 0.029 2.096-0.368 0.13-0.081 0.167-0.162 0.056 0.145-0.022 0.037-1.433 1.136-1.585 1.131-1.794 0.056-1.193 0.157-1.303 0.115-0.091 0-0.955-1.055-1.477-0.682-0.196 0.12-0.287 0.236-0.363 0.452 0.066 0.137 0.383 0.358 0.675 0.54 0.422 0.27 0.461 0.552 0.881 0.653 0.513 0.115 1.060 0.039 1.387 0.081 0.125 0.034 1.256-0.297 1.961-0.675 0.65-0.336-0.898 0.648-1.276 1.131-1.141 0.358-0.82 0.373-1.362 0.483-0.503 0.115-0.479 0.086-0.822 0.196-0.356 0.086-0.648 0.572-0.312 0.825 0.201 0.167 0.827-0.066 1.445-0.086 0.275-0.005 1.391-0.518 1.644-0.653 0.633-0.339 1.099-0.81 1.472-1.077 0.518-0.361-0.584 0.991-1.050 1.558zM8.855 9.799c-0.378-0.312-0.569-1.212-0.564-1.217-0.697-0.206-1.136-0.667-1.136-0.653-1.070 0.582-1.099 0.312-1.558 0.653-0.388 0.277-0.366 0.363-0.567 1.045-0.187 0.594 0.471 0.535 1.021 1.561 0.95-0.344 1.463-0.182 1.784-0.142 0.145 0.010 0.12-0.572 1.021-1.247zM5.4 2.911c0.133-0.191 0.196-0.228 0.368-0.454 0.27-0.371-0.081-0.915-0.253-0.849-0.211 0.096-0.346 0.508-0.599 0.653-0.093 0.052-0.4 0.503-0.682 0.82-0.211 0.228-0.363 0.334-0.564 0.599-0.346 0.407-0.412 0.729-0.709 1.161-0.184 0.258-0.317 0.324-0.481 0.621-0.886 1.669-0.631 2.422-1.475 3.6-0.26 0.38-0.552 0.461-0.964 0.682-0.383 2.788 0.883 4.346 0.879 4.336 1.068-0.609 1.639-0.861 2.751-0.825 0.417 0.025 0.636 0.201 1.048 0.174 0.385-0.025 0.582-0.169 0.964-0.285 0.589-0.196 0.91-0.358 1.499-0.54 0.422-0.12 0.672-0.125 1.080-0.285 0.348-0.128 0.182-0.010 0.427-0.282 0.312-0.358 0.238-0.633 0.508-1.217 0.398-0.8 0.353-0.906 0.142-0.991 0.135-0.412 0.174-0.677 0.14-1.107-0.044-0.336 0.101-0.572-0.255-0.82-0.483-0.375-1.499-1.22-1.752-1.222-0.395 0.002-1.526-0.039-2.101 0.339-0.13 0.101-0.167 0.182-0.056-0.11 0.022-0.052 1.433-1.148 1.585-1.163 1.794-0.039 1.193-0.14 1.303-0.088 0.091-0.007 0.955 1.045 1.477 0.682 0.191-0.13 0.287-0.245 0.368-0.452-0.071-0.147-0.388-0.368-0.68-0.537-0.422-0.282-0.464-0.564-0.881-0.655-0.513-0.125-1.065-0.049-1.387-0.11-0.125-0.015-1.256 0.317-1.956 0.68-0.66 0.351 0.893-0.631 1.276-1.136 1.136-0.339 0.81-0.353 1.36-0.479 0.501-0.101 0.476-0.071 0.82-0.172 0.351-0.096 0.648-0.577 0.312-0.849-0.206-0.152-0.827 0.081-1.44 0.086-0.28 0.020-1.396 0.533-1.649 0.677-0.633 0.329-1.099 0.8-1.472 1.048-0.523 0.38 0.584-0.967 1.050-1.529z';

svg[2] = 'icon-sign';

svg[3] = this.signButtonImg;

break;

case 'mute':

case 'volume-mute':

svg[0] = '0 0 20 20';

svg[1] = 'M7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714zM18.75 12.093v1.657h-1.657l-2.093-2.093-2.093 2.093h-1.657v-1.657l2.093-2.093-2.093-2.093v-1.657h1.657l2.093 2.093 2.093-2.093h1.657v1.657l-2.093 2.093z';

svg[2] = 'icon-volume-mute';

svg[3] = this.imgPath + 'volume-mute.png';

break;

case 'volume-soft':

svg[0] = '0 0 20 20';

svg[1] = 'M10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z';

svg[2] = 'icon-volume-soft';

svg[3] = this.imgPath + 'volume-soft.png';

break;

case 'volume-medium':

svg[0] = '0 0 20 20';

svg[1] = 'M14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z';

svg[2] = 'icon-volume-medium';

svg[3] = this.imgPath + 'volume-medium.png';

break;

case 'volume-loud':

svg[0] = '0 0 21 20';

svg[1] = 'M17.384 18.009c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.712-1.712 2.654-3.988 2.654-6.408s-0.943-4.696-2.654-6.408c-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.066 2.066 3.204 4.813 3.204 7.734s-1.138 5.668-3.204 7.734c-0.183 0.183-0.423 0.275-0.663 0.275zM14.053 16.241c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 2.559-2.559 2.559-6.722 0-9.281-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c1.594 1.594 2.471 3.712 2.471 5.966s-0.878 4.373-2.471 5.966c-0.183 0.183-0.423 0.275-0.663 0.275zM10.723 14.473c-0.24 0-0.48-0.092-0.663-0.275-0.366-0.366-0.366-0.96 0-1.326 1.584-1.584 1.584-4.161 0-5.745-0.366-0.366-0.366-0.96 0-1.326s0.96-0.366 1.326 0c2.315 2.315 2.315 6.082 0 8.397-0.183 0.183-0.423 0.275-0.663 0.275zM7.839 1.536c0.501-0.501 0.911-0.331 0.911 0.378v16.172c0 0.709-0.41 0.879-0.911 0.378l-4.714-4.713h-3.125v-7.5h3.125l4.714-4.714z';

svg[2] = 'icon-volume-loud';

svg[3] = this.imgPath + 'volume-loud.png';

break;

case 'chapters':

svg[0] = '0 0 20 20';

svg[1] = 'M5 2.5v17.5l6.25-6.25 6.25 6.25v-17.5zM15 0h-12.5v17.5l1.25-1.25v-15h11.25z';

svg[2] = 'icon-chapters';

svg[3] = this.chaptersButtonImg;

break;

case 'transcript':

svg[0] = '0 0 20 20';

svg[1] = 'M0 19.107v-17.857q0-0.446 0.313-0.759t0.759-0.313h8.929v6.071q0 0.446 0.313 0.759t0.759 0.313h6.071v11.786q0 0.446-0.313 0.759t-0.759 0.312h-15q-0.446 0-0.759-0.313t-0.313-0.759zM4.286 15.536q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 12.679q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM4.286 9.821q0 0.156 0.1 0.257t0.257 0.1h7.857q0.156 0 0.257-0.1t0.1-0.257v-0.714q0-0.156-0.1-0.257t-0.257-0.1h-7.857q-0.156 0-0.257 0.1t-0.1 0.257v0.714zM11.429 5.893v-5.268q0.246 0.156 0.402 0.313l4.554 4.554q0.156 0.156 0.313 0.402h-5.268z';

svg[2] = 'icon-transcript';

svg[3] = this.transcriptButtonImg;

break;

case 'preferences':

svg[0] = '0 0 20 20';

svg[1] = 'M18.238 11.919c-1.049-1.817-0.418-4.147 1.409-5.205l-1.965-3.404c-0.562 0.329-1.214 0.518-1.911 0.518-2.1 0-3.803-1.714-3.803-3.828h-3.931c0.005 0.653-0.158 1.314-0.507 1.919-1.049 1.818-3.382 2.436-5.212 1.382l-1.965 3.404c0.566 0.322 1.056 0.793 1.404 1.396 1.048 1.815 0.42 4.139-1.401 5.2l1.965 3.404c0.56-0.326 1.209-0.513 1.902-0.513 2.094 0 3.792 1.703 3.803 3.808h3.931c-0.002-0.646 0.162-1.3 0.507-1.899 1.048-1.815 3.375-2.433 5.203-1.387l1.965-3.404c-0.562-0.322-1.049-0.791-1.395-1.391zM10 14.049c-2.236 0-4.050-1.813-4.050-4.049s1.813-4.049 4.050-4.049 4.049 1.813 4.049 4.049c-0 2.237-1.813 4.049-4.049 4.049z';

svg[2] = 'icon-preferences';

svg[3] = this.prefsButtonImg;

break;

case 'close':

svg[0] = '0 0 16 20';

svg[1] = 'M1.228 14.933q0-0.446 0.312-0.759l3.281-3.281-3.281-3.281q-0.313-0.313-0.313-0.759t0.313-0.759l1.518-1.518q0.313-0.313 0.759-0.313t0.759 0.313l3.281 3.281 3.281-3.281q0.313-0.313 0.759-0.313t0.759 0.313l1.518 1.518q0.313 0.313 0.313 0.759t-0.313 0.759l-3.281 3.281 3.281 3.281q0.313 0.313 0.313 0.759t-0.313 0.759l-1.518 1.518q-0.313 0.313-0.759 0.313t-0.759-0.313l-3.281-3.281-3.281 3.281q-0.313 0.313-0.759 0.313t-0.759-0.313l-1.518-1.518q-0.313-0.313-0.313-0.759z';

svg[2] = 'icon-close';

svg[3] = null;

break;

case 'fullscreen-expand':

svg[0] = '0 0 20 20';

svg[1] = 'M0 18.036v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502zM8.717 8.393q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257z';

svg[2] = 'icon-fullscreen-expand';

svg[3] = this.fullscreenExpandButtonImg;

break;

case 'fullscreen-collapse':

svg[0] = '0 0 20 20';

svg[1] = 'M0.145 16.964q0-0.145 0.112-0.257l3.705-3.705-1.607-1.607q-0.212-0.212-0.212-0.502t0.212-0.502 0.502-0.212h5q0.29 0 0.502 0.212t0.212 0.502v5q0 0.29-0.212 0.502t-0.502 0.212-0.502-0.212l-1.607-1.607-3.705 3.705q-0.112 0.112-0.257 0.112t-0.257-0.112l-1.272-1.272q-0.112-0.112-0.112-0.257zM8.571 9.464v-5q0-0.29 0.212-0.502t0.502-0.212 0.502 0.212l1.607 1.607 3.705-3.705q0.112-0.112 0.257-0.112t0.257 0.112l1.272 1.272q0.112 0.112 0.112 0.257t-0.112 0.257l-3.705 3.705 1.607 1.607q0.212 0.212 0.212 0.502t-0.212 0.502-0.502 0.212h-5q-0.29 0-0.502-0.212t-0.212-0.502z';

svg[2] = 'icon-fullscreen-collapse';

svg[3] = this.fullscreenCollapseButtonImg;

break;

}

return svg;

var deferred, promise, thisObj;

deferred = new this.defer();

promise = deferred.promise();

thisObj = this;

this.startedPlaying = false;

// TODO: Move this setting to preferences.

this.autoScrollTranscript = true;

//this.autoScrollTranscript = this.getPref(autoScrollTranscript); // (doesn't work)

// Bootstrap from this.media possibly being an ID or other selector.

this.$media = $(this.media).first();

this.media = this.$media[0];

// Set media type to 'audio' or 'video'; this determines some of the behavior of player creation.

if (this.$media.is('audio')) {

this.mediaType = 'audio';

} else if (this.$media.is('video')) {

this.mediaType = 'video';

} else {

// Able Player was initialized with some element other than <video> or <audio>

this.provideFallback();

deferred.reject();

return promise;

}

this.$sources = this.$media.find('source');

this.player = this.getPlayer();

if (!this.player) {

// an error was generated in getPlayer()

this.provideFallback();

}

this.setIconType();

deferred.resolve();

return promise;

// Called again after width and height are known

if (this.mediaType !== 'audio' && width > 0 && height > 0) {

this.playerWidth = width;

this.playerHeight = height;

this.aspectRatio = height / width;

}

// Tests for SVG and font support removed in version 4.7.0.

// Browser support for these is no longer a risk; they are widely supported in all browsers.

// This now only returns 'svg' or 'false' if iconType is forced.

if (this.forceIconType) {

// use value specified in data-icon-type

return false;

}

this.iconType = 'svg';

var deferred = new this.defer();

var promise = deferred.promise();

if (this.$media.attr('id')) {

this.mediaId = this.$media.attr('id');

} else {

// Ensure the base media element always has an ID.

this.mediaId = "ableMediaId_" + this.ableIndex;

this.$media.attr('id', this.mediaId);

}

deferred.resolve();

return promise;

// find a matching playlist and set this.hasPlaylist

// if there is one, also set this.$playlist, this.playlistIndex, & this.playlistEmbed

var thisObj = this;

this.hasPlaylist = false; // will change to true if a matching playlist is found

$('.able-playlist').each(function() {

if ($(this).data('player') === thisObj.mediaId) {

// this is the playlist for the current player

thisObj.hasPlaylist = true;

// If using an embedded player, we'll replace $playlist with the clone later.

thisObj.$playlist = $(this).find('li');

// check to see if list item has YouTube as its source

// if it does, inject a thumbnail from YouTube

var $youTubeVideos = $(this).find('li[data-youtube-id]');

$youTubeVideos.each(function() {

var youTubeId = DOMPurify.sanitize( $(this).attr('data-youtube-id') );

var youTubePoster = thisObj.getYouTubePosterUrl(youTubeId,'120');

var $youTubeImg = $('<img>',{

'src': youTubePoster,

'alt': ''

});

$(this).find('button').prepend($youTubeImg);

});

// check to see if list item has Vimeo as its source

// if it does, inject a thumbnail from Vimeo

var $vimeoVideos = $(this).find('li[data-vimeo-id]');

$vimeoVideos.each(function() {

var vimeoId = $(this).attr('data-vimeo-id');

var vimeoPoster = thisObj.getVimeoPosterUrl(vimeoId,'120');

var $vimeoImg = $('<img>',{

'src': vimeoPoster,

'alt': ''

});

$(this).find('button').prepend($vimeoImg);

});

// add accessibility to the list markup

$(this).find('li span').attr('aria-hidden','true');

thisObj.playlistIndex = 0;

var dataEmbedded = $(this).data('embedded');

// is playlist embedded within player?

thisObj.playlistEmbed = (typeof dataEmbedded !== 'undefined' && dataEmbedded !== false) ? true : false;

}

});

if (this.hasPlaylist && this.loop) {

// browser will loop the current track in the playlist, rather than the playlist

// therefore, need to remove loop attribute from media element

// but keep this.loop as true and handle the playlist looping ourselves

this.media.removeAttribute('loop');

}

if (this.hasPlaylist && this.playlistEmbed) {

// Copy the playlist out of the dom, so we can reinject when we build the player.

var parent = this.$playlist.parent();

this.$playlistDom = parent.clone();

parent.remove();

}

if (this.hasPlaylist && this.$sources.length === 0) {

// no source elements were provided. Construct them from the first playlist item

this.cuePlaylistItem(0);

// redefine this.$sources now that media contains one or more <source> elements

this.$sources = this.$media.find('source');

}

// Creates the appropriate player for the current source.

// This function is called each time a new media instance is loaded

// e.g.,

// User clicks on an item in a playlist

// User swaps to/from described version of video

// Blocks of code that only need to be executed once are controlled