v5.11.4 dist

This reverts commit 382d5aadbe.

.jshintrc

@@ -24,6 +24,8 @@
         "exports",
         "process",
 
+        "DOMException",
+
         "q",
         "asyncTest",
         "deepEqual",

CHANGELOG.md

@@ -6,6 +6,95 @@ _(none)_
 
 --------------------
 
+## 5.11.4 (2016-08-16)
+_(none)_
+
+## 5.11.3 (2016-08-15)
+* @vdeshpande fixed control text for fullscreen button ([view](https://github.com/videojs/video.js/pull/3485))
+* @mister-ben fixed android treating swipe as a tap ([view](https://github.com/videojs/video.js/pull/3514))
+* @mboles updated duration() method documentation ([view](https://github.com/videojs/video.js/pull/3515))
+* @mister-ben silenced chrome's play() request was interrupted by pause() error ([view](https://github.com/videojs/video.js/pull/3518))
+
+## 5.11.2 (2016-08-09)
+_(none)_
+
+## 5.11.1 (2016-08-08)
+* @vxsx fixed legend selector to be more specific. Fixes #3492 ([view](https://github.com/videojs/video.js/pull/3494))
+
+## 5.11.0 (2016-07-22)
+* @BrandonOCasey Document audio/video track usage ([view](https://github.com/videojs/video.js/pull/3295))
+* @hartman Correct documentation to refer to nativeTextTracks option ([view](https://github.com/videojs/video.js/pull/3309))
+* @nickygerritsen Also pass tech options to canHandleSource ([view](https://github.com/videojs/video.js/pull/3303))
+* @misteroneill Un-deprecate the videojs.players property ([view](https://github.com/videojs/video.js/pull/3299))
+* @nickygerritsen Add title to all clickable components ([view](https://github.com/videojs/video.js/pull/3296))
+* @nickygerritsen Update Dutch language file ([view](https://github.com/videojs/video.js/pull/3297))
+* @hartman Add descriptions and audio button to adaptive classes ([view](https://github.com/videojs/video.js/pull/3312))
+* @MattiasBuelens Retain details from tech error ([view](https://github.com/videojs/video.js/pull/3313))
+* @nickygerritsen Fix test for tooltips in IE8 ([view](https://github.com/videojs/video.js/pull/3327))
+* @mboles added loadstart event to jsdoc ([view](https://github.com/videojs/video.js/pull/3370))
+* @hartman added default print styling ([view](https://github.com/videojs/video.js/pull/3304))
+* @ldayananda updated videojs to not do anything if no src is set ([view](https://github.com/videojs/video.js/pull/3378))
+* @nickygerritsen removed unused tracks when changing sources. Fixes #3000 ([view](https://github.com/videojs/video.js/pull/3002))
+* @vit-koumar updated Flash tech to return Infinity from duration instead of -1 ([view](https://github.com/videojs/video.js/pull/3128))
+* @alex-phillips added ontextdata to Flash tech ([view](https://github.com/videojs/video.js/pull/2748))
+* @MattiasBuelens updated components to use durationchange only ([view](https://github.com/videojs/video.js/pull/3349))
+* @misteroneill improved Logging for IE < 11 ([view](https://github.com/videojs/video.js/pull/3356))
+* @vdeshpande updated control text of modal dialog ([view](https://github.com/videojs/video.js/pull/3400))
+* @ldayananda fixed mouse handling on menus by using mouseleave over mouseout ([view](https://github.com/videojs/video.js/pull/3404))
+* @mister-ben updated language to inherit correctly and respect the attribute on the player ([view](https://github.com/videojs/video.js/pull/3426))
+* @sashyro fixed nativeControlsForTouch option ([view](https://github.com/videojs/video.js/pull/3410))
+* @tbasse fixed techCall null check against tech ([view](https://github.com/videojs/video.js/pull/2676))
+* @rbran100 checked src and currentSrc in handleTechReady to work around mixed content issues in chrome ([view](https://github.com/videojs/video.js/pull/3287))
+* @OwenEdwards fixed caption settings dialog labels for accessibility ([view](https://github.com/videojs/video.js/pull/3281))
+* @OwenEdwards removed spurious head tags in the simple-embed example ([view](https://github.com/videojs/video.js/pull/3438))
+* @ntadej added a null check to errorDisplay usage ([view](https://github.com/videojs/video.js/pull/3440))
+* @misteroneill fixed logging issues on IE by separating fn.apply and stringify checks ([view](https://github.com/videojs/video.js/pull/3444))
+* @misteroneill fixed npm test from running coveralls locally ([view](https://github.com/videojs/video.js/pull/3449))
+* @gkatsev added es6-shim to tests. Fixes Flash duration test ([view](https://github.com/videojs/video.js/pull/3453))
+* @misteroneill corrects test assertions for older IEs in the log module ([view](https://github.com/videojs/video.js/pull/3454))
+* @gkatsev fixed setting lang by looping through loop element variable and not constant tag ([view](https://github.com/videojs/video.js/pull/3455))
+
+## 5.10.8 (2016-08-08)
+* @gkatsev re-published to make sure that the audio button has css
+
+## 5.10.7 (2016-06-27)
+* @gkatsev pinned node-sass to 3.4 ([view](https://github.com/videojs/video.js/pull/3401))
+* @mister-ben added try catch to volume and playbackrate checks. Fixes #3315 ([view](https://github.com/videojs/video.js/pull/3320))
+* @m14t removed unused loadEvent property in ControlBar options ([view](https://github.com/videojs/video.js/pull/3363))
+* @bklava updated pt-BR language file ([view](https://github.com/videojs/video.js/pull/3373))
+* @mister-ben updated menus to use default videojs font-family ([view](https://github.com/videojs/video.js/pull/3384))
+* @vdeshpande fixed chapters getting duplicated each time a track is loaded ([view](https://github.com/videojs/video.js/pull/3354))
+
+## 5.10.6 (2016-06-20)
+* @gkatsev fix not fully minified video.min.js file.
+
+## 5.10.5 (2016-06-07)
+* @gkatsev pinned dependencies to direct versions ([view](https://github.com/videojs/video.js/pull/3338))
+* @gkatsev fixed minified vjs in ie8 when initialized with id string ([view](https://github.com/videojs/video.js/pull/3357))
+* @IJsLauw fixed unhandled exception in deleting poster on ios7 ([view](https://github.com/videojs/video.js/pull/3337))
+
+## 5.10.4 (2016-05-31)
+* Patch release to fix dist on npm
+
+## 5.10.3 (2016-05-27)
+* @BrandonOCasey fixed source handlers being disposed multiple times when a video is put into the video element directly ([view](https://github.com/videojs/video.js/pull/3343))
+
+## 5.10.2 (2016-05-12)
+* @gkatsev nulled out currentSource_ in setSource ([view](https://github.com/videojs/video.js/pull/3314))
+
+## 5.10.1 (2016-05-03)
+* @nickygerritsen Pass tech options to source handlers ([view](https://github.com/videojs/video.js/pull/3245))
+* @gkatsev Use fonts 2.0 that do not require wrapping codepoints ([view](https://github.com/videojs/video.js/pull/3252))
+* @chrisauclair Make controls visible for accessibility reasons ([view](https://github.com/videojs/video.js/pull/3237))
+* @gkatsev updated text track documentation and crossorigin warning. Fixes #1888, #1958, #2628, #3202 ([view](https://github.com/videojs/video.js/pull/3256))
+* @BrandonOCasey added audio and video track support ([view](https://github.com/videojs/video.js/pull/3173))
+* @OwenEdwards added language attribute in HTML files for accessibility ([view](https://github.com/videojs/video.js/pull/3257))
+* @incompl clear currentSource_ after subsequent loadstarts ([view](https://github.com/videojs/video.js/pull/3285))
+* @forbesjo add an audio track selector menu button ([view](https://github.com/videojs/video.js/pull/3223))
+
+## 5.9.2 (2016-04-19)
+* @gkatsev grouped text track errors in the console, if we can ([view](https://github.com/videojs/video.js/pull/3259))
+
 ## 5.9.1 (2016-04-19)
 * @benjipott updated IS_CHROME to not be true on MS Edge ([view](https://github.com/videojs/video.js/pull/3232))
 * @mister-ben blacklisted Chrome for Android for playback rate support ([view](https://github.com/videojs/video.js/pull/3246))

build/grunt.js

@@ -159,7 +159,7 @@ module.exports = function(grunt) {
       },
       skin: {
         files: ['src/css/**/*'],
-        tasks: ['sass', 'wrapcodepoints']
+        tasks: ['sass']
       },
       jshint: {
         files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
@@ -450,6 +450,7 @@ module.exports = function(grunt) {
   require('load-grunt-tasks')(grunt);
   grunt.loadNpmTasks('videojs-doc-generator');
   grunt.loadNpmTasks('chg');
+  grunt.loadNpmTasks('gkatsev-grunt-sass');
 
   const buildDependents = [
     'clean:build',
@@ -464,7 +465,6 @@ module.exports = function(grunt) {
     'uglify',
 
     'sass',
-    'wrapcodepoints',
     'version:css',
     'cssmin',
 
@@ -489,23 +489,13 @@ module.exports = function(grunt) {
     'zip:dist'
   ]);
 
-  // Sass turns unicode codepoints into utf8 characters.
-  // We don't want that so we unwrapped them in the templates/scss.hbs file.
-  // After sass has generated our css file, we need to wrap the codepoints
-  // in quotes for it to work.
-  grunt.registerTask('wrapcodepoints', function() {
-    const sassConfig = grunt.config.get('sass.build.files');
-    const cssPath = Object.keys(sassConfig)[0];
-    const css = grunt.file.read(cssPath);
-    grunt.file.write(cssPath, css.replace(/(\\f\w+);/g, "'$1';"));
-  });
-
-  grunt.registerTask('skin', ['sass', 'wrapcodepoints']);
+  grunt.registerTask('skin', ['sass']);
 
   // Default task - build and test
   grunt.registerTask('default', ['test']);
 
-  grunt.registerTask('test', ['build', 'karma:defaults']);
+  // The test script includes coveralls only when the TRAVIS env var is set.
+  grunt.registerTask('test', ['build', 'karma:defaults'].concat(process.env.TRAVIS && 'coveralls').filter(Boolean));
 
   // Run while developing
   grunt.registerTask('dev', ['build', 'connect:dev', 'concurrent:watchSandbox']);

component.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.9.1",
+  "version": "5.11.4",
   "keywords": [
     "videojs",
     "html5",

dist/examples/elephantsdream/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Video.js Text Descriptions, Chapters &amp; Captions Example</title>

dist/examples/simple-embed/index.html

@@ -1,16 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
 
-  <head>
     <title>Video.js | HTML5 Video Player</title>
     <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
     <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
     <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
 
-  </head>
-
 </head>
 
 <body>

dist/font/VideoJS.svg

@@ -94,6 +94,9 @@
     <glyph glyph-name="audio-description"
       unicode="&#xF11D;"
       horiz-adv-x="1792" d=" M795.5138904615 457.270933L795.5138904615 1221.5248286325C971.84576475 1225.085121904 1107.39330415 1232.12360523 1207.223857 1161.5835220499998C1303.033991 1093.8857027 1377.7922305 962.20560625 1364.3373135 792.9476205000001C1350.102593 613.9029365000001 1219.6655764999998 463.4600215 1050.12389545 448.2843645000001C965.8259268 440.7398275000001 798.21890505 448.2843645000001 798.21890505 448.2843645000001C798.21890505 448.2843645000001 795.2791410655 453.016494 795.5138904615 457.270933M966.1564647 649.0863960000001C1076.16084135 644.6767075 1152.385591 707.3020429999999 1163.8910079999998 807.9351875C1179.2994744999999 942.71878505 1089.73043585 1030.3691748 960.74508635 1020.7227954L960.74508635 658.08043C960.6196169500002 652.9482330000001 962.7606933 650.3134680000001 966.1564647 649.0863960000001 M1343.2299685 457.3517725000002C1389.9059734 444.3690160000001 1404.0840274999998 496.0596970000001 1424.48294065 532.2791494999999C1469.0084255 611.2788500000001 1502.5101322 712.8584189999999 1503.0416912 828.9881705C1503.8147453000001 995.5680973 1438.8404296 1117.7973688000002 1378.4383305 1200.62456881045L1348.652139905 1200.62456881045C1346.6001063899998 1187.06858424 1356.44474056 1175.024791325 1362.18395859 1164.6588891000001C1408.2649952 1081.49431985 1450.96645015 966.7230041 1451.57490975 834.9817034999999C1452.27106325 683.8655425000002 1402.00636065 557.5072264999999 1343.2299685 457.3517725000002 M1488.0379675 457.3517725000002C1534.7139723999999 444.3690160000001 1548.8825828 496.0671625 1569.29093965 532.2791494999999C1613.8164245 611.2788500000001 1647.3113856500001 712.8584189999999 1647.8496902000002 828.9881705C1648.6227442999998 995.5680973 1583.6484286 1117.7973688000002 1523.2463295 1200.62456881045L1493.460138905 1200.62456881045C1491.40810539 1187.06858424 1501.250041305 1175.021805755 1506.9919575899999 1164.6588891000001C1553.0729942 1081.49431985 1595.7757984 966.7230041 1596.3829087499998 834.9817034999999C1597.07906225 683.8655425000002 1546.8143596500001 557.5072264999999 1488.0379675 457.3517725000002 M1631.9130380000001 457.3517725000002C1678.5890429 444.3690160000001 1692.7576533 496.0671625 1713.1660101500001 532.2791494999999C1757.691495 611.2788500000001 1791.1864561500001 712.8584189999999 1791.7247607000002 828.9881705C1792.4978148 995.5680973 1727.5234991000002 1117.7973688000002 1667.1214 1200.62456881045L1637.3352094050001 1200.62456881045C1635.28317589 1187.06858424 1645.1251118050002 1175.02329854 1650.86702809 1164.6588891000001C1696.9480647 1081.49431985 1739.64951965 966.7230041 1740.25797925 834.9817034999999C1740.95413275 683.8655425000002 1690.6894301500001 557.5072264999999 1631.9130380000001 457.3517725000002 M15.66796875 451.481947L254.03034755 451.481947L319.0356932 551.1747990000001L543.6261075 551.6487970000001C543.6261075 551.6487970000001 543.8541115 483.7032095 543.8541115 451.481947L714.4993835 451.481947L714.4993835 1230.9210795L508.643051 1230.9210795C488.8579955 1197.5411595 15.66796875 451.481947 15.66796875 451.481947L15.66796875 451.481947zM550.0048155000001 959.9708615L550.0048155000001 710.916297L408.4199 711.8642895L550.0048155000001 959.9708615L550.0048155000001 959.9708615z" />
+    <glyph glyph-name="audio"
+      unicode="&#xF11E;"
+      horiz-adv-x="1792" d=" M896 1717.3333333333333C524.9066666666668 1717.3333333333333 224 1416.4266666666667 224 1045.3333333333333V522.6666666666665C224 399.0933333333333 324.4266666666667 298.6666666666665 448 298.6666666666665H672V896H373.3333333333334V1045.3333333333333C373.3333333333334 1333.92 607.4133333333334 1568 896 1568S1418.6666666666667 1333.92 1418.6666666666667 1045.3333333333333V896H1120V298.6666666666665H1344C1467.5733333333335 298.6666666666665 1568 399.0933333333333 1568 522.6666666666665V1045.3333333333333C1568 1416.4266666666667 1267.0933333333332 1717.3333333333333 896 1717.3333333333333z" />
   </font>
 </defs>
 </svg>

dist/lang/en.js

@@ -18,6 +18,7 @@ videojs.addLanguage("en",{
  "Captions": "Captions",
  "captions off": "captions off",
  "Chapters": "Chapters",
+ "Close Modal Dialog": "Close Modal Dialog",
  "Descriptions": "Descriptions",
  "descriptions off": "descriptions off",
  "You aborted the media playback": "You aborted the media playback",

dist/lang/nl.js

@@ -14,13 +14,24 @@ videojs.addLanguage("nl",{
  "Unmute": "Geluid aan",
  "Playback Rate": "Weergavesnelheid",
  "Subtitles": "Ondertiteling",
- "subtitles off": "Ondertiteling uit",
- "Captions": "Ondertiteling",
- "captions off": "Ondertiteling uit",
+ "subtitles off": "ondertiteling uit",
+ "Captions": "Bijschriften",
+ "captions off": "bijschriften uit",
  "Chapters": "Hoofdstukken",
+ "Descriptions": "Beschrijvingen",
+ "descriptions off": "beschrijvingen off",
  "You aborted the media playback": "U hebt de mediaweergave afgebroken.",
  "A network error caused the media download to fail part-way.": "De mediadownload is mislukt door een netwerkfout.",
  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, vanwege een server- of netwerkfout of doordat het formaat niet wordt ondersteund.",
  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "De mediaweergave is afgebroken vanwege beschadigde data of het mediabestand gebruikt functies die niet door uw browser worden ondersteund.",
- "No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden."
+ "No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden.",
+ "Play Video": "Video Afspelen",
+ "Close": "Sluiten",
+ "Modal Window": "Modal Venster",
+ "This is a modal window": "Dit is een modaal venster",
+ "This modal can be closed by pressing the Escape key or activating the close button.": "Dit modaal venster kan gesloten worden door op Escape te drukken of de 'sluiten' knop te activeren.",
+ ", opens captions settings dialog": ", opent bijschriften instellingen venster",
+ ", opens subtitles settings dialog": ", opent ondertiteling instellingen venster",
+ ", opens descriptions settings dialog": ", opent beschrijvingen instellingen venster",
+ ", selected": ", selected"
 });

dist/lang/pt-BR.js

@@ -1,6 +1,6 @@
 videojs.addLanguage("pt-BR",{
  "Play": "Tocar",
- "Pause": "Pause",
+ "Pause": "Pausar",
  "Current Time": "Tempo",
  "Duration Time": "Duração",
  "Remaining Time": "Tempo Restante",
@@ -18,9 +18,9 @@ videojs.addLanguage("pt-BR",{
  "Captions": "Anotações",
  "captions off": "Sem Anotações",
  "Chapters": "Capítulos",
- "You aborted the media playback": "Você parou a execução de vídeo.",
+ "You aborted the media playback": "Você parou a execução do vídeo.",
  "A network error caused the media download to fail part-way.": "Um erro na rede fez o vídeo parar parcialmente.",
  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "O vídeo não pode ser carregado, ou porque houve um problema com sua rede ou pelo formato do vídeo não ser suportado.",
- "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A Execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
+ "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
  "No compatible source was found for this media.": "Não foi encontrada fonte de vídeo compatível."
 });

docs/examples/elephantsdream/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Video.js Text Descriptions, Chapters &amp; Captions Example</title>

docs/examples/simple-embed/index.html

@@ -1,16 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
 
-  <head>
     <title>Video.js | HTML5 Video Player</title>
     <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">
     <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
     <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>
 
-  </head>
-
 </head>
 
 <body>

docs/guides/audio-tracks.md

@@ -0,0 +1,69 @@
+# Audio Tracks
+
+Audio Tracks are a function of HTML5 video for providing alternative audio track selections to the user, so that a track other than the main track can be played. Video.js makes audio tracks work across all browsers. There are currently five types of tracks:
+
+- **Alternative**: alternative audio for the main video track
+- **Descriptions**: descriptions of what is happening in the video track
+- **Main**: the main audio track for this video
+- **Translation**: a translation of the main audio track
+- **Commentary**: commentary on the video, usually the director of the content talking about design choices
+
+## Missing Funtionality
+- It is currently impossible to add AudioTracks in a non-programtic way
+- Literal switching of AudioTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation
+
+## Adding to Video.js
+
+> Right now adding audio tracks in the HTML is unsupported. Audio Tracks must be added programatically.
+
+You must add audio tracks [programatically](#api) for the time being.
+
+## Attributes
+Audio Track propertites and settings
+
+### kind
+One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
+
+### label
+The label for the track that will be show to the user, for example in a menu that list the different languages available for audio tracks.
+
+### language
+The two-letter code (valid BCP 47 language tag) for the language of the audio track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
+
+### enabled
+If this track should be playing or not. In video.js we only allow one track to be enabled at a time. so if you enable more than one the last one to be enabled will end up being the only one.
+
+## Interacting with Audio Tracks
+### Doing something when a track becomes enabled
+When a new track is enabled (other than the main track) an event is fired on the `AudioTrackList` called `change` you can listen to that event and do something with it.
+Here's an example:
+```js
+// get the current players AudioTrackList object
+let tracks = player.audioTracks();
+
+// listen to the change event
+tracks.addEventListener('change', function() {
+
+  // print the currently enabled AudioTrack label
+  for (let i = 0; i < tracks.length; i++) {
+    let track = tracks[i];
+
+    if (track.enabled) {
+      console.log(track.label);
+      return;
+    }
+  }
+});
+```
+
+## API
+
+### `player.audioTracks() -> AudioTrackList`
+This is the main interface into the audio tracks of the player.
+It returns an AudioTrackList which is an array like object that contains all the `AudioTrack` on the player.
+
+### `player.audioTracks().addTrack(AudioTrack)`
+Add an existing AudioTrack to the players internal list of AudioTracks.
+
+### `player.audioTracks().removeTrack(AudioTrack)`
+Remove a track from the AudioTrackList currently on the player. if no track exists this will do nothing.

docs/guides/languages.md

@@ -32,6 +32,7 @@ A sample dictionary for Spanish `['es']` would look as follows:
   "Captions": "Subtítulos especiales",
   "captions off": "Subtítulos especiales desactivados",
   "Chapters": "Capítulos",
+  "Close Modal Dialog": "Cerca de diálogo modal",
   "You aborted the video playback": "Ha interrumpido la reproducción del vídeo.",
   "A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
   "The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
@@ -80,6 +81,7 @@ NOTE: These need to be added after the core Video.js script.
     "Captions": "Subtítulos especiales",
     "captions off": "Subtítulos especiales desactivados",
     "Chapters": "Capítulos",
+    "Close Modal Dialog": "Cerca de diálogo modal",
     "You aborted the video playback": "Ha interrumpido la reproducción del vídeo.",
     "A network error caused the video download to fail part-way.": "Un error de red ha interrumpido la descarga del vídeo.",
     "The video could not be loaded, either because the server or network failed or because the format is not supported.": "No se ha podido cargar el vídeo debido a un fallo de red o del servidor o porque el formato es incompatible.",
@@ -129,14 +131,14 @@ During a Video.js player instantiation you can force it to localize to a specifi
 Determining Player Language
 ---------------------------
 
-The player language is set to one of the following in descending priority
+The player language is set to one of the following in descending priority:
 
-* The language set in setup options as above
-* The document language (`lang` attribute of the `html` element)
-* Browser language preference
+* The language specified in setup options as above
+* The language specified by the closet element with a `lang` attribute. This could be the player itself or a parent element. Usually the document language is specified on the `html` tag.
+* Browser language preference (the first language if more than one is configured)
 * 'en'
 
-That can be overridden after instantiation with `language('fr')`.
+The player language can be change after instantiation with `language('fr')`. However localizable text will not be modified by doing this, for best results set the language beforehand.
 
 Language selection
 ------------------
@@ -161,175 +163,153 @@ The following is a list of official language codes.
 
 <table border="0" cellspacing="5" cellpadding="5">
   <tr>
-    <td>
-
-      <table>
-        <tr><th>ab<th><td>Abkhazian</td></tr>
-        <tr><th>aa<th><td>Afar</td></tr>
-        <tr><th>af<th><td>Afrikaans</td></tr>
-        <tr><th>sq<th><td>Albanian</td></tr>
-        <tr><th>am<th><td>Amharic</td></tr>
-        <tr><th>ar<th><td>Arabic</td></tr>
-        <tr><th>an<th><td>Aragonese</td></tr>
-        <tr><th>hy<th><td>Armenian</td></tr>
-        <tr><th>as<th><td>Assamese</td></tr>
-        <tr><th>ay<th><td>Aymara</td></tr>
-        <tr><th>az<th><td>Azerbaijani</td></tr>
-        <tr><th>ba<th><td>Bashkir</td></tr>
-        <tr><th>eu<th><td>Basque</td></tr>
-        <tr><th>bn<th><td>Bengali (Bangla)</td></tr>
-        <tr><th>dz<th><td>Bhutani</td></tr>
-        <tr><th>bh<th><td>Bihari</td></tr>
-        <tr><th>bi<th><td>Bislama</td></tr>
-        <tr><th>br<th><td>Breton</td></tr>
-        <tr><th>bg<th><td>Bulgarian</td></tr>
-        <tr><th>my<th><td>Burmese</td></tr>
-        <tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
-        <tr><th>km<th><td>Cambodian</td></tr>
-        <tr><th>ca<th><td>Catalan</td></tr>
-        <tr><th>zh<th><td>Chinese (Simplified)</td></tr>
-        <tr><th>zh<th><td>Chinese (Traditional)</td></tr>
-        <tr><th>co<th><td>Corsican</td></tr>
-        <tr><th>hr<th><td>Croatian</td></tr>
-        <tr><th>cs<th><td>Czech</td></tr>
-        <tr><th>da<th><td>Danish</td></tr>
-        <tr><th>nl<th><td>Dutch</td></tr>
-        <tr><th>en<th><td>English</td></tr>
-        <tr><th>eo<th><td>Esperanto</td></tr>
-        <tr><th>et<th><td>Estonian</td></tr>
-        <tr><th>fo<th><td>Faeroese</td></tr>
-        <tr><th>fa<th><td>Farsi</td></tr>
-        <tr><th>fj<th><td>Fiji</td></tr>
-        <tr><th>fi<th><td>Finnish</td></tr>
-      </table>
-
-    </td>
-    <td>
-
-      <table>
-        <tr><th>fr<th><td>French</td></tr>
-        <tr><th>fy<th><td>Frisian</td></tr>
-        <tr><th>gl<th><td>Galician</td></tr>
-        <tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
-        <tr><th>gv<th><td>Gaelic (Manx)</td></tr>
-        <tr><th>ka<th><td>Georgian</td></tr>
-        <tr><th>de<th><td>German</td></tr>
-        <tr><th>el<th><td>Greek</td></tr>
-        <tr><th>kl<th><td>Greenlandic</td></tr>
-        <tr><th>gn<th><td>Guarani</td></tr>
-        <tr><th>gu<th><td>Gujarati</td></tr>
-        <tr><th>ht<th><td>Haitian Creole</td></tr>
-        <tr><th>ha<th><td>Hausa</td></tr>
-        <tr><th>he<th><td>Hebrew</td></tr>
-        <tr><th>hi<th><td>Hindi</td></tr>
-        <tr><th>hu<th><td>Hungarian</td></tr>
-        <tr><th>is<th><td>Icelandic</td></tr>
-        <tr><th>io<th><td>Ido</td></tr>
-        <tr><th>id<th><td>Indonesian</td></tr>
-        <tr><th>ia<th><td>Interlingua</td></tr>
-        <tr><th>ie<th><td>Interlingue</td></tr>
-        <tr><th>iu<th><td>Inuktitut</td></tr>
-        <tr><th>ik<th><td>Inupiak</td></tr>
-        <tr><th>ga<th><td>Irish</td></tr>
-        <tr><th>it<th><td>Italian</td></tr>
-        <tr><th>ja<th><td>Japanese</td></tr>
-        <tr><th>jv<th><td>Javanese</td></tr>
-        <tr><th>kn<th><td>Kannada</td></tr>
-        <tr><th>ks<th><td>Kashmiri</td></tr>
-        <tr><th>kk<th><td>Kazakh</td></tr>
-        <tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
-        <tr><th>ky<th><td>Kirghiz</td></tr>
-        <tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
-        <tr><th>ko<th><td>Korean</td></tr>
-        <tr><th>ku<th><td>Kurdish</td></tr>
-        <tr><th>lo<th><td>Laothian</td></tr>
-        <tr><th>la<th><td>Latin</td></tr>
-      </table>
-
-    </td>
-    <td>
-
-      <table>
-        <tr><th>lv<th><td>Latvian (Lettish)</td></tr>
-        <tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
-        <tr><th>ln<th><td>Lingala</td></tr>
-        <tr><th>lt<th><td>Lithuanian</td></tr>
-        <tr><th>mk<th><td>Macedonian</td></tr>
-        <tr><th>mg<th><td>Malagasy</td></tr>
-        <tr><th>ms<th><td>Malay</td></tr>
-        <tr><th>ml<th><td>Malayalam</td></tr>
-        <tr><th>mt<th><td>Maltese</td></tr>
-        <tr><th>mi<th><td>Maori</td></tr>
-        <tr><th>mr<th><td>Marathi</td></tr>
-        <tr><th>mo<th><td>Moldavian</td></tr>
-        <tr><th>mn<th><td>Mongolian</td></tr>
-        <tr><th>na<th><td>Nauru</td></tr>
-        <tr><th>ne<th><td>Nepali</td></tr>
-        <tr><th>no<th><td>Norwegian</td></tr>
-        <tr><th>oc<th><td>Occitan</td></tr>
-        <tr><th>or<th><td>Oriya</td></tr>
-        <tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
-        <tr><th>ps<th><td>Pashto (Pushto)</td></tr>
-        <tr><th>pl<th><td>Polish</td></tr>
-        <tr><th>pt<th><td>Portuguese</td></tr>
-        <tr><th>pa<th><td>Punjabi</td></tr>
-        <tr><th>qu<th><td>Quechua</td></tr>
-        <tr><th>rm<th><td>Rhaeto-Romance</td></tr>
-        <tr><th>ro<th><td>Romanian</td></tr>
-        <tr><th>ru<th><td>Russian</td></tr>
-        <tr><th>sm<th><td>Samoan</td></tr>
-        <tr><th>sg<th><td>Sangro</td></tr>
-        <tr><th>sa<th><td>Sanskrit</td></tr>
-        <tr><th>sr<th><td>Serbian</td></tr>
-        <tr><th>sh<th><td>Serbo-Croatian</td></tr>
-        <tr><th>st<th><td>Sesotho</td></tr>
-        <tr><th>tn<th><td>Setswana</td></tr>
-        <tr><th>sn<th><td>Shona</td></tr>
-        <tr><th>ii<th><td>Sichuan Yi</td></tr>
-        <tr><th>sd<th><td>Sindhi</td></tr>
-      </table>
-
-    </td>
-    <td>
-
-      <table>
-        <tr><th>si<th><td>Sinhalese</td></tr>
-        <tr><th>ss<th><td>Siswati</td></tr>
-        <tr><th>sk<th><td>Slovak</td></tr>
-        <tr><th>sl<th><td>Slovenian</td></tr>
-        <tr><th>so<th><td>Somali</td></tr>
-        <tr><th>es<th><td>Spanish</td></tr>
-        <tr><th>su<th><td>Sundanese</td></tr>
-        <tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
-        <tr><th>sv<th><td>Swedish</td></tr>
-        <tr><th>tl<th><td>Tagalog</td></tr>
-        <tr><th>tg<th><td>Tajik</td></tr>
-        <tr><th>ta<th><td>Tamil</td></tr>
-        <tr><th>tt<th><td>Tatar</td></tr>
-        <tr><th>te<th><td>Telugu</td></tr>
-        <tr><th>th<th><td>Thai</td></tr>
-        <tr><th>bo<th><td>Tibetan</td></tr>
-        <tr><th>ti<th><td>Tigrinya</td></tr>
-        <tr><th>to<th><td>Tonga</td></tr>
-        <tr><th>ts<th><td>Tsonga</td></tr>
-        <tr><th>tr<th><td>Turkish</td></tr>
-        <tr><th>tk<th><td>Turkmen</td></tr>
-        <tr><th>tw<th><td>Twi</td></tr>
-        <tr><th>ug<th><td>Uighur</td></tr>
-        <tr><th>uk<th><td>Ukrainian</td></tr>
-        <tr><th>ur<th><td>Urdu</td></tr>
-        <tr><th>uz<th><td>Uzbek</td></tr>
-        <tr><th>vi<th><td>Vietnamese</td></tr>
-        <tr><th>vo<th><td>Volapük</td></tr>
-        <tr><th>wa<th><td>Wallon</td></tr>
-        <tr><th>cy<th><td>Welsh</td></tr>
-        <tr><th>wo<th><td>Wolof</td></tr>
-        <tr><th>xh<th><td>Xhosa</td></tr>
-        <tr><th>yi<th><td>Yiddish</td></tr>
-        <tr><th>yo<th><td>Yoruba</td></tr>
-        <tr><th>zu<th><td>Zulu</td></tr>
-      </table>
-
-    </td>
+    <table>
+      <tr><th>ab<th><td>Abkhazian</td></tr>
+      <tr><th>aa<th><td>Afar</td></tr>
+      <tr><th>af<th><td>Afrikaans</td></tr>
+      <tr><th>sq<th><td>Albanian</td></tr>
+      <tr><th>am<th><td>Amharic</td></tr>
+      <tr><th>ar<th><td>Arabic</td></tr>
+      <tr><th>an<th><td>Aragonese</td></tr>
+      <tr><th>hy<th><td>Armenian</td></tr>
+      <tr><th>as<th><td>Assamese</td></tr>
+      <tr><th>ay<th><td>Aymara</td></tr>
+      <tr><th>az<th><td>Azerbaijani</td></tr>
+      <tr><th>ba<th><td>Bashkir</td></tr>
+      <tr><th>eu<th><td>Basque</td></tr>
+      <tr><th>bn<th><td>Bengali (Bangla)</td></tr>
+      <tr><th>dz<th><td>Bhutani</td></tr>
+      <tr><th>bh<th><td>Bihari</td></tr>
+      <tr><th>bi<th><td>Bislama</td></tr>
+      <tr><th>br<th><td>Breton</td></tr>
+      <tr><th>bg<th><td>Bulgarian</td></tr>
+      <tr><th>my<th><td>Burmese</td></tr>
+      <tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
+      <tr><th>km<th><td>Cambodian</td></tr>
+      <tr><th>ca<th><td>Catalan</td></tr>
+      <tr><th>zh<th><td>Chinese (Simplified)</td></tr>
+      <tr><th>zh<th><td>Chinese (Traditional)</td></tr>
+      <tr><th>co<th><td>Corsican</td></tr>
+      <tr><th>hr<th><td>Croatian</td></tr>
+      <tr><th>cs<th><td>Czech</td></tr>
+      <tr><th>da<th><td>Danish</td></tr>
+      <tr><th>nl<th><td>Dutch</td></tr>
+      <tr><th>en<th><td>English</td></tr>
+      <tr><th>eo<th><td>Esperanto</td></tr>
+      <tr><th>et<th><td>Estonian</td></tr>
+      <tr><th>fo<th><td>Faeroese</td></tr>
+      <tr><th>fa<th><td>Farsi</td></tr>
+      <tr><th>fj<th><td>Fiji</td></tr>
+      <tr><th>fi<th><td>Finnish</td></tr>
+      <tr><th>fr<th><td>French</td></tr>
+      <tr><th>fy<th><td>Frisian</td></tr>
+      <tr><th>gl<th><td>Galician</td></tr>
+      <tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
+      <tr><th>gv<th><td>Gaelic (Manx)</td></tr>
+      <tr><th>ka<th><td>Georgian</td></tr>
+      <tr><th>de<th><td>German</td></tr>
+      <tr><th>el<th><td>Greek</td></tr>
+      <tr><th>kl<th><td>Greenlandic</td></tr>
+      <tr><th>gn<th><td>Guarani</td></tr>
+      <tr><th>gu<th><td>Gujarati</td></tr>
+      <tr><th>ht<th><td>Haitian Creole</td></tr>
+      <tr><th>ha<th><td>Hausa</td></tr>
+      <tr><th>he<th><td>Hebrew</td></tr>
+      <tr><th>hi<th><td>Hindi</td></tr>
+      <tr><th>hu<th><td>Hungarian</td></tr>
+      <tr><th>is<th><td>Icelandic</td></tr>
+      <tr><th>io<th><td>Ido</td></tr>
+      <tr><th>id<th><td>Indonesian</td></tr>
+      <tr><th>ia<th><td>Interlingua</td></tr>
+      <tr><th>ie<th><td>Interlingue</td></tr>
+      <tr><th>iu<th><td>Inuktitut</td></tr>
+      <tr><th>ik<th><td>Inupiak</td></tr>
+      <tr><th>ga<th><td>Irish</td></tr>
+      <tr><th>it<th><td>Italian</td></tr>
+      <tr><th>ja<th><td>Japanese</td></tr>
+      <tr><th>jv<th><td>Javanese</td></tr>
+      <tr><th>kn<th><td>Kannada</td></tr>
+      <tr><th>ks<th><td>Kashmiri</td></tr>
+      <tr><th>kk<th><td>Kazakh</td></tr>
+      <tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
+      <tr><th>ky<th><td>Kirghiz</td></tr>
+      <tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
+      <tr><th>ko<th><td>Korean</td></tr>
+      <tr><th>ku<th><td>Kurdish</td></tr>
+      <tr><th>lo<th><td>Laothian</td></tr>
+      <tr><th>la<th><td>Latin</td></tr>
+      <tr><th>lv<th><td>Latvian (Lettish)</td></tr>
+      <tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
+      <tr><th>ln<th><td>Lingala</td></tr>
+      <tr><th>lt<th><td>Lithuanian</td></tr>
+      <tr><th>mk<th><td>Macedonian</td></tr>
+      <tr><th>mg<th><td>Malagasy</td></tr>
+      <tr><th>ms<th><td>Malay</td></tr>
+      <tr><th>ml<th><td>Malayalam</td></tr>
+      <tr><th>mt<th><td>Maltese</td></tr>
+      <tr><th>mi<th><td>Maori</td></tr>
+      <tr><th>mr<th><td>Marathi</td></tr>
+      <tr><th>mo<th><td>Moldavian</td></tr>
+      <tr><th>mn<th><td>Mongolian</td></tr>
+      <tr><th>na<th><td>Nauru</td></tr>
+      <tr><th>ne<th><td>Nepali</td></tr>
+      <tr><th>no<th><td>Norwegian</td></tr>
+      <tr><th>oc<th><td>Occitan</td></tr>
+      <tr><th>or<th><td>Oriya</td></tr>
+      <tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
+      <tr><th>ps<th><td>Pashto (Pushto)</td></tr>
+      <tr><th>pl<th><td>Polish</td></tr>
+      <tr><th>pt<th><td>Portuguese</td></tr>
+      <tr><th>pa<th><td>Punjabi</td></tr>
+      <tr><th>qu<th><td>Quechua</td></tr>
+      <tr><th>rm<th><td>Rhaeto-Romance</td></tr>
+      <tr><th>ro<th><td>Romanian</td></tr>
+      <tr><th>ru<th><td>Russian</td></tr>
+      <tr><th>sm<th><td>Samoan</td></tr>
+      <tr><th>sg<th><td>Sangro</td></tr>
+      <tr><th>sa<th><td>Sanskrit</td></tr>
+      <tr><th>sr<th><td>Serbian</td></tr>
+      <tr><th>sh<th><td>Serbo-Croatian</td></tr>
+      <tr><th>st<th><td>Sesotho</td></tr>
+      <tr><th>tn<th><td>Setswana</td></tr>
+      <tr><th>sn<th><td>Shona</td></tr>
+      <tr><th>ii<th><td>Sichuan Yi</td></tr>
+      <tr><th>sd<th><td>Sindhi</td></tr>
+      <tr><th>si<th><td>Sinhalese</td></tr>
+      <tr><th>ss<th><td>Siswati</td></tr>
+      <tr><th>sk<th><td>Slovak</td></tr>
+      <tr><th>sl<th><td>Slovenian</td></tr>
+      <tr><th>so<th><td>Somali</td></tr>
+      <tr><th>es<th><td>Spanish</td></tr>
+      <tr><th>su<th><td>Sundanese</td></tr>
+      <tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
+      <tr><th>sv<th><td>Swedish</td></tr>
+      <tr><th>tl<th><td>Tagalog</td></tr>
+      <tr><th>tg<th><td>Tajik</td></tr>
+      <tr><th>ta<th><td>Tamil</td></tr>
+      <tr><th>tt<th><td>Tatar</td></tr>
+      <tr><th>te<th><td>Telugu</td></tr>
+      <tr><th>th<th><td>Thai</td></tr>
+      <tr><th>bo<th><td>Tibetan</td></tr>
+      <tr><th>ti<th><td>Tigrinya</td></tr>
+      <tr><th>to<th><td>Tonga</td></tr>
+      <tr><th>ts<th><td>Tsonga</td></tr>
+      <tr><th>tr<th><td>Turkish</td></tr>
+      <tr><th>tk<th><td>Turkmen</td></tr>
+      <tr><th>tw<th><td>Twi</td></tr>
+      <tr><th>ug<th><td>Uighur</td></tr>
+      <tr><th>uk<th><td>Ukrainian</td></tr>
+      <tr><th>ur<th><td>Urdu</td></tr>
+      <tr><th>uz<th><td>Uzbek</td></tr>
+      <tr><th>vi<th><td>Vietnamese</td></tr>
+      <tr><th>vo<th><td>Volapük</td></tr>
+      <tr><th>wa<th><td>Wallon</td></tr>
+      <tr><th>cy<th><td>Welsh</td></tr>
+      <tr><th>wo<th><td>Wolof</td></tr>
+      <tr><th>xh<th><td>Xhosa</td></tr>
+      <tr><th>yi<th><td>Yiddish</td></tr>
+      <tr><th>yo<th><td>Yoruba</td></tr>
+      <tr><th>zu<th><td>Zulu</td></tr>
+    </table>
   </tr>
 </table>

docs/guides/text-tracks.md

@@ -0,0 +1,184 @@
+# Text Tracks
+
+Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
+
+- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
+- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
+- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
+- **Descriptions**: Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
+- **Metadata**: Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
+
+## Creating the Text File
+Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](https://dev.modern.ie/testdrive/demos/captionmaker/) that can help you get started on the file.
+
+When creating captions, there's also additional [caption formatting techniques] (http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects: [ sound effect ]. If you'd like a more in depth style guide for captioning, you can reference the [Captioning Key](http://www.dcmp.org/captioningkey/), but keep in mind not all features are supported by WebVTT or (more likely) the Video.js WebVTT implementation.
+
+## Adding to Video.js
+Once you have your WebVTT file created, you can add it to Video.js using the track tag. Put your track tag after all the source elements, and before any fallback content.
+
+```html
+<video id="example_video_1" class="video-js"
+  controls preload="auto" width="640" height="264"
+  data-setup='{"example_option":true}'>
+ <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
+ <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
+ <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
+
+ <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
+
+</video>
+```
+
+You can also add tracks [programatically](#api).
+
+## Subtitles from Another Domain
+Because we're pulling in the text track file via Javascript, the [same-origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) applies. If you'd like to have a player served from one domain,
+but the text track served from another, you'll need to [enable CORS](http://enable-cors.org/) in order to do so.
+In addition to enabling CORS on the server serving the text tracks, you will need to add the [`crossorigin` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) to the video element itself. This attribute has two values `anonymous` and `use-credentials`. Most users will want to use `anonymous` with cross-origin tracks.
+It can be added to the video element like so:
+```html
+<video class="video-js" crossorigin="anonymous">
+  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+  <track src="http://example.com/oceans.vtt" kind="captions" srclang="en" label="English">
+</video>
+```
+One thing to be aware of is that in this case the video files themselves will *also* needs CORS headers applied to it. This is because some browsers apply the crossorigin attribute to the video source itself and not just the tracks and is considered a [security concern by the spec](https://html.spec.whatwg.org/multipage/embedded-content.html#security-and-privacy-considerations).
+
+## Track Attributes
+Additional settings for track tags.
+
+### kind
+One of the five track types listed above. Kind defaults to subtitles if no kind is included.
+
+### label
+The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
+
+### default
+The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
+NOTE: For chapters, default is required if you want the chapters menu to show.
+
+### srclang
+The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
+
+## Interacting with Text Tracks
+### Showing tracks programmatically
+Some of you would want to turn captions on and off programmatically rather than just forcing the user to do so themselves. This can be easily achieved by modifying the `mode` of the text tracks.
+The `mode` can be one of three values `disabled`, `hidden`, and `showing`.
+When a text track's `mode` is `disabled`, the track does not show on screen as the video is playing.
+When the `mode` is set to `showing`, the track is visible to the viewer and updates while the video is playing.
+You can change of a particular track like so:
+```js
+let tracks = player.textTracks();
+
+for (let i = 0; i < tracks.length; i++) {
+  let track = tracks[i];
+
+  // find the captions track that's in english
+  if (track.kind === 'captions' && track.language === 'en') {
+    track.mode = 'showing';
+  }
+}
+```
+
+### Doing something when a cue becomes active
+Above, we mentioned that `mode` can also be `hidden`, what this means is that the track will update
+as the video is playing but it won't be visible to the viewer. This is most useful for `metadata` text tracks.
+One usecase for metadata text tracks is to have something happen when their cues become active, to do so, you listen to the `cuechange` event on the track. These events fire when the mode is `showing` as well.
+Here's an example:
+```js
+let tracks = player.textTracks();
+let metadataTrack;
+
+for (let i = 0; i < tracks.length; i++) {
+  let track = tracks[i];
+
+  // find the metadata track that's labeled ads
+  if (track.kind === 'captions' && track.label === 'ads') {
+    track.mode = 'hidden';
+    // store it for usage outside of the loop
+    metadataTrack = track;
+  }
+}
+
+metadataTrack.addEventListener('cuechange', function() {
+  player.ads.startLinearAdMode();
+});
+```
+
+## Emulated Text Tracks
+By default, video.js will try and use native text tracks if possible and fall back to emulated text tracks if the native functionality is broken or incomplete or non-existent.
+The Flash tech will always use the emulated text track functionality.
+The video.js API and TextTrack objects were modeled after the w3c's specification.
+video.js uses [Mozilla's vtt.js](https://github.com/mozilla/vtt.js) library to parse and display its emulated text tracks.
+
+If you wanted to disable native text track functionality and force video.js to use emulated text tracks always, you can supply the `nativeTextTracks` option to the tech like so:
+```js
+let player = videojs('myvideo', {
+  html5: {
+    nativeTextTracks: false
+  }
+});
+```
+
+### Text Track Settings
+When using emulated Text Tracks, captions will have an additional item in the menu called "caption settings".
+This allows the viewer of the player to change some styles of how the captions are displayed on screen.
+
+If you don't want that, you can disable it by turning off the text track settings component and hiding the menu item like so:
+```js
+let player = videojs('myvideo', {
+  // make the text track settings dialog not initialize
+  textTrackSettings: false
+});
+```
+```css
+/* hide the captions settings item from the captions menu */
+.vjs-texttrack-settings {
+  display: none;
+}
+```
+
+## Text Track Precedence
+In general, the Descriptions tracks is of lower precedence than captions and subtitles.
+What this means for you?
+* If you are using the `default` attribute, videojs will choose the first track that is marked as `default` and turn it on. If There are multiple tracks marked `default`, it will try and turn on the first `captions` or `subtitles` track *before* any `descriptions` tracks.
+  * This only applied to the emulated captions support, native text tracks behavior will change depending on the browser
+* If you select a given track from the menu, videojs will turn off all the other tracks of the same kind. This may seem like you can have both subtitles and captions turned on at the same time but unfortuantely, at this time we only support one track being displayed at a time.
+  * This means that for emulated text tracks, we'll choose the first captions or subtitles track that is enabled to display.
+  * When native text tracks are supported, we will still disable the other tracks of the same kind but it is possible that multiple text tracks are shown.
+  * If a `descriptions` track is selected and subsequently a `subtitles` or `captions` track is selected, the `descriptions` track is disabled and its menu button is also disabled.
+* When enabling a track programmatically, there's not much checking that videojs does.
+  * For emulated text tracks, when it's time to display the captions, video.js would choose the first track that's showing, again choosing `subtitles` or `captions` over `descriptions`, if necessary.
+  * For native text tracks, this behavior depends on the browser. Some browsers will let you have multiple text tracks but others will disable all other tracks when a new one is selected.
+
+## API
+
+### `player.textTracks() -> TextTrackList`
+This is the main interface into the text tracks of the player.
+It return a TextTrackList which lists all the tracks on the player.
+
+### `player.remoteTextTracks() -> TextTrackList`
+This is a helper method to get a list of all the tracks that were created from `track` elements or that were added to the player by the `addRemoteTextTrack` method. All these tracks are removeable from the player, where-as not all tracks from `player.textTracks()` are necessarily removeable.
+
+### `player.remoteTextTrackEls() -> HTMLTrackElementList`
+Another helper method, this is a list of all the `track` elements associated with the player. Both emulated or otherwise.
+
+### `player.addTextTrack(String kind, [String label [, String language]]) -> TextTrack`
+This is based on the [w3c spec API](http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#dom-media-addtexttrack) and when given a kind and an optional label and language, will create a new text track for you to use.
+This method is intended for purely programmatic usage of tracks and has one important limitation:
+tracks created using this method *cannot* be removed. The native `addTextTrack` does not have a corresponding `removeTextTrack`, so, we actually discourage the usage of this method.
+
+### `player.addRemoteTextTrack(Object options) -> HTMLTrackElement`
+This function takes an options object that looks pretty similar to the track element and returns a HTMLTrackElement.
+This object has a `track` property on it which is the actual TextTrack object.
+This `TextTrack` object is equivalent to the one that can be returned from `player.addTextTrack` with the added bonus that it can be removed from the player.
+Internally, video.js will either add a `<track>` element for you, or emulate that depending on whether native text tracks are supported or not.
+The options available are:
+* `kind`
+* `label`
+* `language` (also `srclang`)
+* `id`
+* `src`
+
+### `player.removeRemoteTextTrack(HTMLTrackElement|TextTrack)`
+This function takes either an HTMLTrackElement or a TextTrack object and removes it from the player.

docs/guides/tracks.md

@@ -1,208 +1,6 @@
-Tracks
-======
+# Tracks
+There are currently three types of tracks
 
-Text Tracks are a function of HTML5 video for providing time triggered text to the viewer. Video.js makes tracks work across all browsers. There are currently five types of tracks:
-
-- **Subtitles**: Translations of the dialogue in the video for when audio is available but not understood. Subtitles are shown over the video.
-- **Captions**: Transcription of the dialogue, sound effects, musical cues, and other audio information for when the viewer is deaf/hard of hearing, or the video is muted. Captions are also shown over the video.
-- **Chapters**: Chapter titles that are used to create navigation within the video. Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
-- **Descriptions** (not supported yet): Text descriptions of what's happening in the video for when the video portion isn't available, because the viewer is blind, not using a screen, or driving and about to crash because they're trying to enjoy a video while driving. Descriptions are read by a screen reader or turned into a separate audio track.
-- **Metadata** (not supported yet): Tracks that have data meant for javascript to parse and do something with. These aren't shown to the user.
-
-Creating the Text File
-----------------------
-Timed text requires a text file in [WebVTT](http://dev.w3.org/html5/webvtt/) format. This format defines a list of "cues" that have a start time, and end time, and text to display. [Microsoft has a builder](https://dev.modern.ie/testdrive/demos/captionmaker/) that can help you get started on the file.
-
-When creating captions, there's also additional [caption formatting techniques] (http://www.theneitherworld.com/mcpoodle/SCC_TOOLS/DOCS/SCC_FORMAT.HTML#style) that would be good to use, like brackets around sound effects: [ sound effect ]. If you'd like a more in depth style guide for captioning, you can reference the [Captioning Key](http://www.dcmp.org/captioningkey/), but keep in mind not all features are supported by WebVTT or (more likely) the Video.js WebVTT implementation.
-
-Adding to Video.js
-------------------
-Once you have your WebVTT file created, you can add it to Video.js using the track tag. Put your track tag after all the source elements, and before any fallback content.
-
-```html
-<video id="example_video_1" class="video-js vjs-default-skin"
-  controls preload="auto" width="640" height="264"
-  data-setup='{"example_option":true}'>
- <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
- <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
- <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
-
- <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
-
-</video>
-```
-
-Subtitles from Another Domain
------------------------------
-Because we're pulling in the text track file via Javascript, the [same-origin policy](http://en.wikipedia.org/wiki/Same_origin_policy) applies. If you'd like to have a player served from one domain,
-but the text track served from another, you'll need to [enable CORS](http://enable-cors.org/) in order to do so.
-
-Track Attributes
-----------------
-Additional settings for track tags.
-
-### kind
-One of the five track types listed above. Kind defaults to subtitles if no kind is included.
-
-### label
-The label for the track that will be show to the user, for example in a menu that list the different languages available for subtitles.
-
-### default
-The default attribute can be used to have a track default to showing. Otherwise the viewer would need to select their language from the captions or subtitles menu.
-NOTE: For chapters, default is required if you want the chapters menu to show.
-
-### srclang
-The two-letter code (valid BCP 47 language tag) for the language of the text track, for example "en" for English. Here's a list of available language codes.
-
-<table border="0" cellspacing="5" cellpadding="5">
-  <tr>
-      <table>
-        <tr><th>ab<th><td>Abkhazian</td></tr>
-        <tr><th>aa<th><td>Afar</td></tr>
-        <tr><th>af<th><td>Afrikaans</td></tr>
-        <tr><th>sq<th><td>Albanian</td></tr>
-        <tr><th>am<th><td>Amharic</td></tr>
-        <tr><th>ar<th><td>Arabic</td></tr>
-        <tr><th>an<th><td>Aragonese</td></tr>
-        <tr><th>hy<th><td>Armenian</td></tr>
-        <tr><th>as<th><td>Assamese</td></tr>
-        <tr><th>ay<th><td>Aymara</td></tr>
-        <tr><th>az<th><td>Azerbaijani</td></tr>
-        <tr><th>ba<th><td>Bashkir</td></tr>
-        <tr><th>eu<th><td>Basque</td></tr>
-        <tr><th>bn<th><td>Bengali (Bangla)</td></tr>
-        <tr><th>dz<th><td>Bhutani</td></tr>
-        <tr><th>bh<th><td>Bihari</td></tr>
-        <tr><th>bi<th><td>Bislama</td></tr>
-        <tr><th>br<th><td>Breton</td></tr>
-        <tr><th>bg<th><td>Bulgarian</td></tr>
-        <tr><th>my<th><td>Burmese</td></tr>
-        <tr><th>be<th><td>Byelorussian (Belarusian)</td></tr>
-        <tr><th>km<th><td>Cambodian</td></tr>
-        <tr><th>ca<th><td>Catalan</td></tr>
-        <tr><th>zh<th><td>Chinese (Simplified)</td></tr>
-        <tr><th>zh<th><td>Chinese (Traditional)</td></tr>
-        <tr><th>co<th><td>Corsican</td></tr>
-        <tr><th>hr<th><td>Croatian</td></tr>
-        <tr><th>cs<th><td>Czech</td></tr>
-        <tr><th>da<th><td>Danish</td></tr>
-        <tr><th>nl<th><td>Dutch</td></tr>
-        <tr><th>en<th><td>English</td></tr>
-        <tr><th>eo<th><td>Esperanto</td></tr>
-        <tr><th>et<th><td>Estonian</td></tr>
-        <tr><th>fo<th><td>Faeroese</td></tr>
-        <tr><th>fa<th><td>Farsi</td></tr>
-        <tr><th>fj<th><td>Fiji</td></tr>
-        <tr><th>fi<th><td>Finnish</td></tr>
-        <tr><th>fr<th><td>French</td></tr>
-        <tr><th>fy<th><td>Frisian</td></tr>
-        <tr><th>gl<th><td>Galician</td></tr>
-        <tr><th>gd<th><td>Gaelic (Scottish)</td></tr>
-        <tr><th>gv<th><td>Gaelic (Manx)</td></tr>
-        <tr><th>ka<th><td>Georgian</td></tr>
-        <tr><th>de<th><td>German</td></tr>
-        <tr><th>el<th><td>Greek</td></tr>
-        <tr><th>kl<th><td>Greenlandic</td></tr>
-        <tr><th>gn<th><td>Guarani</td></tr>
-        <tr><th>gu<th><td>Gujarati</td></tr>
-        <tr><th>ht<th><td>Haitian Creole</td></tr>
-        <tr><th>ha<th><td>Hausa</td></tr>
-        <tr><th>he<th><td>Hebrew</td></tr>
-        <tr><th>hi<th><td>Hindi</td></tr>
-        <tr><th>hu<th><td>Hungarian</td></tr>
-        <tr><th>is<th><td>Icelandic</td></tr>
-        <tr><th>io<th><td>Ido</td></tr>
-        <tr><th>id<th><td>Indonesian</td></tr>
-        <tr><th>ia<th><td>Interlingua</td></tr>
-        <tr><th>ie<th><td>Interlingue</td></tr>
-        <tr><th>iu<th><td>Inuktitut</td></tr>
-        <tr><th>ik<th><td>Inupiak</td></tr>
-        <tr><th>ga<th><td>Irish</td></tr>
-        <tr><th>it<th><td>Italian</td></tr>
-        <tr><th>ja<th><td>Japanese</td></tr>
-        <tr><th>jv<th><td>Javanese</td></tr>
-        <tr><th>kn<th><td>Kannada</td></tr>
-        <tr><th>ks<th><td>Kashmiri</td></tr>
-        <tr><th>kk<th><td>Kazakh</td></tr>
-        <tr><th>rw<th><td>Kinyarwanda (Ruanda)</td></tr>
-        <tr><th>ky<th><td>Kirghiz</td></tr>
-        <tr><th>rn<th><td>Kirundi (Rundi)</td></tr>
-        <tr><th>ko<th><td>Korean</td></tr>
-        <tr><th>ku<th><td>Kurdish</td></tr>
-        <tr><th>lo<th><td>Laothian</td></tr>
-        <tr><th>la<th><td>Latin</td></tr>
-        <tr><th>lv<th><td>Latvian (Lettish)</td></tr>
-        <tr><th>li<th><td>Limburgish ( Limburger)</td></tr>
-        <tr><th>ln<th><td>Lingala</td></tr>
-        <tr><th>lt<th><td>Lithuanian</td></tr>
-        <tr><th>mk<th><td>Macedonian</td></tr>
-        <tr><th>mg<th><td>Malagasy</td></tr>
-        <tr><th>ms<th><td>Malay</td></tr>
-        <tr><th>ml<th><td>Malayalam</td></tr>
-        <tr><th>mt<th><td>Maltese</td></tr>
-        <tr><th>mi<th><td>Maori</td></tr>
-        <tr><th>mr<th><td>Marathi</td></tr>
-        <tr><th>mo<th><td>Moldavian</td></tr>
-        <tr><th>mn<th><td>Mongolian</td></tr>
-        <tr><th>na<th><td>Nauru</td></tr>
-        <tr><th>ne<th><td>Nepali</td></tr>
-        <tr><th>no<th><td>Norwegian</td></tr>
-        <tr><th>oc<th><td>Occitan</td></tr>
-        <tr><th>or<th><td>Oriya</td></tr>
-        <tr><th>om<th><td>Oromo (Afan, Galla)</td></tr>
-        <tr><th>ps<th><td>Pashto (Pushto)</td></tr>
-        <tr><th>pl<th><td>Polish</td></tr>
-        <tr><th>pt<th><td>Portuguese</td></tr>
-        <tr><th>pa<th><td>Punjabi</td></tr>
-        <tr><th>qu<th><td>Quechua</td></tr>
-        <tr><th>rm<th><td>Rhaeto-Romance</td></tr>
-        <tr><th>ro<th><td>Romanian</td></tr>
-        <tr><th>ru<th><td>Russian</td></tr>
-        <tr><th>sm<th><td>Samoan</td></tr>
-        <tr><th>sg<th><td>Sangro</td></tr>
-        <tr><th>sa<th><td>Sanskrit</td></tr>
-        <tr><th>sr<th><td>Serbian</td></tr>
-        <tr><th>sh<th><td>Serbo-Croatian</td></tr>
-        <tr><th>st<th><td>Sesotho</td></tr>
-        <tr><th>tn<th><td>Setswana</td></tr>
-        <tr><th>sn<th><td>Shona</td></tr>
-        <tr><th>ii<th><td>Sichuan Yi</td></tr>
-        <tr><th>sd<th><td>Sindhi</td></tr>
-        <tr><th>si<th><td>Sinhalese</td></tr>
-        <tr><th>ss<th><td>Siswati</td></tr>
-        <tr><th>sk<th><td>Slovak</td></tr>
-        <tr><th>sl<th><td>Slovenian</td></tr>
-        <tr><th>so<th><td>Somali</td></tr>
-        <tr><th>es<th><td>Spanish</td></tr>
-        <tr><th>su<th><td>Sundanese</td></tr>
-        <tr><th>sw<th><td>Swahili (Kiswahili)</td></tr>
-        <tr><th>sv<th><td>Swedish</td></tr>
-        <tr><th>tl<th><td>Tagalog</td></tr>
-        <tr><th>tg<th><td>Tajik</td></tr>
-        <tr><th>ta<th><td>Tamil</td></tr>
-        <tr><th>tt<th><td>Tatar</td></tr>
-        <tr><th>te<th><td>Telugu</td></tr>
-        <tr><th>th<th><td>Thai</td></tr>
-        <tr><th>bo<th><td>Tibetan</td></tr>
-        <tr><th>ti<th><td>Tigrinya</td></tr>
-        <tr><th>to<th><td>Tonga</td></tr>
-        <tr><th>ts<th><td>Tsonga</td></tr>
-        <tr><th>tr<th><td>Turkish</td></tr>
-        <tr><th>tk<th><td>Turkmen</td></tr>
-        <tr><th>tw<th><td>Twi</td></tr>
-        <tr><th>ug<th><td>Uighur</td></tr>
-        <tr><th>uk<th><td>Ukrainian</td></tr>
-        <tr><th>ur<th><td>Urdu</td></tr>
-        <tr><th>uz<th><td>Uzbek</td></tr>
-        <tr><th>vi<th><td>Vietnamese</td></tr>
-        <tr><th>vo<th><td>Volapük</td></tr>
-        <tr><th>wa<th><td>Wallon</td></tr>
-        <tr><th>cy<th><td>Welsh</td></tr>
-        <tr><th>wo<th><td>Wolof</td></tr>
-        <tr><th>xh<th><td>Xhosa</td></tr>
-        <tr><th>yi<th><td>Yiddish</td></tr>
-        <tr><th>yo<th><td>Yoruba</td></tr>
-        <tr><th>zu<th><td>Zulu</td></tr>
-      </table>
-  </tr>
-</table>
+* [AudioTracks](./audio-tracks.md) - allows the selection of alternative AudioTracks for a video
+* [VideoTracks](./video-tracks.md) - allows the selection of an alternative VideoTrack for a video
+* [TextTracks](./text-tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.

docs/guides/video-tracks.md

@@ -0,0 +1,70 @@
+# Video Tracks
+
+Video Tracks are a function of HTML5 video for providing a selection of alternative video tracks to the user, so that they can change type of video they want to watch. Video.js makes video tracks work across all browsers. There are currently six types of tracks:
+
+- **Alternative**: an alternative video representation of the main video track
+- **Captions**: The main video track with burned in captions
+- **Main**: the main video track
+- **Sign**: the main video track with added sign language overlay
+- **Subtitles**: the main video track with burned in subtitles
+- **Commentary**: the main video track with burned in commentary
+
+## Missing Funtionality
+- It is currently impossible to add VideoTracks in a non-programtic way
+- Literal switching of VideoTracks for playback is not handled by video.js and must be handled by something else. video.js only stores the track representation
+- There is currently no UI implementation of VideoTracks
+
+## Adding to Video.js
+
+> Right now adding video tracks in the HTML is unsupported. Video Tracks must be added programatically.
+
+You must add video tracks [programatically](#api) for the time being.
+
+## Attributes
+Video Track propertites and settings
+
+### kind
+One of the five track types listed above. Kind defaults to empty string if no kind is included, or an invalid kind is used.
+
+### label
+The label for the track that will be show to the user, for example in a menu that list the different languages available for video tracks.
+
+### language
+The two-letter code (valid BCP 47 language tag) for the language of the video track, for example "en" for English. A list of language codes is [available here](languages.md#language-codes).
+
+### selected
+If this track should be playing or not. Trying to select more than one track will cause other tracks to be deselected.
+
+## Interacting with Video Tracks
+### Doing something when a track becomes enabled
+When a new track is enabled (other than the main track) an event is fired on the `VideoTrackList` called `change` you can listen to that event and do something with it.
+Here's an example:
+```js
+// get the current players VideoTrackList object
+let tracks = player.videoTracks();
+
+// listen to the change event
+tracks.addEventListener('change', function() {
+  // get the currently selected track
+  let index = tracks.selectedIndex;
+  let track = tracks[index];
+
+  // print the currently selected track
+  console.log(track.label);
+});
+```
+
+## API
+
+### `player.videoTracks() -> VideoTrackList`
+This is the main interface into the video tracks of the player.
+It returns an VideoTrackList which is an array like object that contains all the `VideoTrack` on the player.
+
+### `player.videoTracks().addTrack(VideoTrack)`
+Add an existing VideoTrack to the players internal list of VideoTracks.
+
+### `player.videoTracks().removeTrack(VideoTrack)`
+Remove a track from the VideoTrackList currently on the player. if no track exists this will do nothing.
+
+### `player.videoTracks().selectedIndex`
+The current index for the selected track

docs/index.md

@@ -14,7 +14,7 @@ There are two categories of docs: [Guides](./guides/) and [API docs](./api/). Gu
 
 * [Options](./guides/options.md) - There are a number of options that can be used to change how the player behaves, starting with the HTML5 media options like autoplay and preload, and expanding to Video.js specific options.
 
-* [Tracks](./guides/tracks.md) - Text Tracks are used to display subtitles and captions, and add a menu for navigating between chapters in a video.
+* [Tracks](./guides/tracks.md) - Tracks are used for displaying text information over a video, selecting different audio tracks for a video, or selected different video tracks for a video.
 
 ### Customizing
 

lang/en.json

@@ -18,6 +18,7 @@
   "Captions": "Captions",
   "captions off": "captions off",
   "Chapters": "Chapters",
+  "Close Modal Dialog": "Close Modal Dialog",
   "Descriptions": "Descriptions",
   "descriptions off": "descriptions off",
   "You aborted the media playback": "You aborted the media playback",

lang/nl.json

@@ -14,13 +14,24 @@
   "Unmute": "Geluid aan",
   "Playback Rate": "Weergavesnelheid",
   "Subtitles": "Ondertiteling",
-  "subtitles off": "Ondertiteling uit",
-  "Captions": "Ondertiteling",
-  "captions off": "Ondertiteling uit",
+  "subtitles off": "ondertiteling uit",
+  "Captions": "Bijschriften",
+  "captions off": "bijschriften uit",
   "Chapters": "Hoofdstukken",
+  "Descriptions": "Beschrijvingen",
+  "descriptions off": "beschrijvingen off",
   "You aborted the media playback": "U hebt de mediaweergave afgebroken.",
   "A network error caused the media download to fail part-way.": "De mediadownload is mislukt door een netwerkfout.",
   "The media could not be loaded, either because the server or network failed or because the format is not supported.": "De media kon niet worden geladen, vanwege een server- of netwerkfout of doordat het formaat niet wordt ondersteund.",
   "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "De mediaweergave is afgebroken vanwege beschadigde data of het mediabestand gebruikt functies die niet door uw browser worden ondersteund.",
-  "No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden."
+  "No compatible source was found for this media.": "Voor deze media is geen ondersteunde bron gevonden.",
+  "Play Video": "Video Afspelen",
+  "Close": "Sluiten",
+  "Modal Window": "Modal Venster",
+  "This is a modal window": "Dit is een modaal venster",
+  "This modal can be closed by pressing the Escape key or activating the close button.": "Dit modaal venster kan gesloten worden door op Escape te drukken of de 'sluiten' knop te activeren.",
+  ", opens captions settings dialog": ", opent bijschriften instellingen venster",
+  ", opens subtitles settings dialog": ", opent ondertiteling instellingen venster",
+  ", opens descriptions settings dialog": ", opent beschrijvingen instellingen venster",
+  ", selected": ", selected"
 }

lang/pt-BR.json

@@ -1,6 +1,6 @@
 {
   "Play": "Tocar",
-  "Pause": "Pause",
+  "Pause": "Pausar",
   "Current Time": "Tempo",
   "Duration Time": "Duração",
   "Remaining Time": "Tempo Restante",
@@ -18,9 +18,9 @@
   "Captions": "Anotações",
   "captions off": "Sem Anotações",
   "Chapters": "Capítulos",
-  "You aborted the media playback": "Você parou a execução de vídeo.",
+  "You aborted the media playback": "Você parou a execução do vídeo.",
   "A network error caused the media download to fail part-way.": "Um erro na rede fez o vídeo parar parcialmente.",
   "The media could not be loaded, either because the server or network failed or because the format is not supported.": "O vídeo não pode ser carregado, ou porque houve um problema com sua rede ou pelo formato do vídeo não ser suportado.",
-  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A Execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "A execução foi interrompida por um problema com o vídeo ou por seu navegador não dar suporte ao seu formato.",
   "No compatible source was found for this media.": "Não foi encontrada fonte de vídeo compatível."
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.9.1",
+  "version": "5.11.4",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
   "keywords": [
@@ -14,7 +14,7 @@
   "homepage": "http://videojs.com",
   "author": "Steve Heffernan",
   "scripts": {
-    "test": "grunt test && if [ '$TRAVIS' ]; then grunt coveralls; fi;"
+    "test": "grunt test"
   },
   "repository": {
     "type": "git",
@@ -23,16 +23,16 @@
   "main": "./dist/video.js",
   "style": "./dist/video-js.css",
   "dependencies": {
-    "global": "^4.3.0",
-    "lodash-compat": "^3.9.3",
-    "object.assign": "^4.0.1",
-    "safe-json-parse": "^4.0.0",
+    "global": "4.3.0",
+    "lodash-compat": "3.10.2",
+    "object.assign": "4.0.3",
+    "safe-json-parse": "4.0.0",
     "tsml": "1.0.1",
-    "videojs-font": "1.5.1",
+    "videojs-font": "2.0.0",
     "videojs-ie8": "1.1.2",
-    "videojs-swf": "5.0.1",
-    "videojs-vtt.js": "^0.12.1",
-    "xhr": "~2.2.0"
+    "videojs-swf": "5.1.0",
+    "videojs-vtt.js": "0.12.1",
+    "xhr": "2.2.0"
   },
   "devDependencies": {
     "babel": "^5.2.2",
@@ -44,6 +44,8 @@
     "chg": "^0.3.2",
     "css": "^2.2.0",
     "es5-shim": "^4.1.3",
+    "es6-shim": "^0.35.1",
+    "gkatsev-grunt-sass": "^1.1.1",
     "grunt": "^0.4.4",
     "grunt-aws-s3": "^0.12.1",
     "grunt-banner": "^0.4.0",
@@ -64,7 +66,6 @@
     "grunt-fastly": "^0.1.3",
     "grunt-github-releaser": "^0.1.17",
     "grunt-karma": "^0.8.3",
-    "grunt-sass": "^1.0.0",
     "grunt-version": "~0.3.0",
     "grunt-videojs-languages": "0.0.4",
     "grunt-zip": "0.10.2",

sandbox/descriptions.html.example

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Video.js Text Descriptions, Chapters &amp; Captions Example</title>

sandbox/icons.html.example

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Video.js Icons Sandbox</title>

sandbox/index.html.example

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Video.js Sandbox</title>

sandbox/plugin.html.example

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Video.js Plugin Example</title>

src/css/_print.scss

@@ -0,0 +1,5 @@
+@media print {
+  .video-js > *:not(.vjs-tech):not(.vjs-poster) {
+    visibility:hidden;
+  }
+}

src/css/_variables.scss

@@ -1,2 +1 @@
 $icon-font-path: 'font' !default;
-$icon-codepoints: false !default;

src/css/components/_adaptive.scss

@@ -8,7 +8,8 @@
   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
   .vjs-playback-rate, .vjs-progress-control,
   .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
-  .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button { display: none; }
+  .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
+  .vjs-subtitles-button, .vjs-audio-button { display: none; }
 }
 
 // When the player is x-small, display nothing but:
@@ -19,7 +20,8 @@
   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
   .vjs-playback-rate,
   .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button,
-  .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button { display: none; }
+  .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
+  .vjs-subtitles-button, .vjs-audio-button { display: none; }
 }
 
 
@@ -33,5 +35,6 @@
   .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
   .vjs-playback-rate,
   .vjs-mute-control, .vjs-volume-control,
-  .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button { display: none; }
+  .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
+  .vjs-subtitles-button .vjs-audio-button { display: none; }
 }

src/css/components/_audio.scss

@@ -0,0 +1,3 @@
+.video-js .vjs-audio-button {
+  @extend .vjs-icon-audio;
+}

src/css/components/_captions-settings.scss

@@ -6,14 +6,14 @@
   color: $primary-foreground-color;
   margin: 0 auto;
   padding: 0.5em;
-  height: 15em;
+  height: 16em;
   font-size: 12px;
   width: 40em;
 }
 
 .vjs-caption-settings .vjs-tracksettings {
   top: 0;
-  bottom: 2em;
+  bottom: 1em;
   left: 0;
   right: 0;
   position: absolute;
@@ -40,8 +40,10 @@
   margin: 5px;
   padding: 3px;
   min-height: 40px;
+  border: none;
 }
-.vjs-caption-settings .vjs-tracksetting label {
+.vjs-caption-settings .vjs-tracksetting label,
+.vjs-caption-settings .vjs-tracksetting legend {
   display: block;
   width: 100px;
   margin-bottom: 5px;
@@ -50,6 +52,8 @@
 .vjs-caption-settings .vjs-tracksetting span {
   display: inline;
   margin-left: 5px;
+  vertical-align: top;
+  float: right;
 }
 
 .vjs-caption-settings .vjs-tracksetting > div {
@@ -67,6 +71,23 @@
   margin-right: 10px;
 }
 
+.vjs-caption-settings fieldset {
+  margin-top: 1em;
+  margin-left: .5em;
+}
+
+// Hide labels within fieldsets, so they are only for screen reader users
+.vjs-caption-settings fieldset .vjs-label {
+  position: absolute;
+  clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
+  clip: rect(1px, 1px, 1px, 1px);
+  padding: 0;
+  border: 0;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}
+
 .vjs-caption-settings input[type="button"] {
   width: 40px;
   height: 40px;

src/css/components/_control-bar.scss

@@ -20,13 +20,22 @@
   @include transition($trans);
 }
 
+// IE 8 hack for media queries
+$ie8screen: "\\0screen";
+
 // Video has started playing AND user is inactive
 .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
-  visibility: hidden;
+  // Remain visible for screen reader and keyboard users
+  visibility: visible;
   opacity: 0;
 
   $trans: visibility 1.0s, opacity 1.0s;
   @include transition($trans);
+
+  // Make controls hidden in IE8 for now
+  @media #{$ie8screen} {
+    visibility: hidden;
+  }
 }
 
 .vjs-controls-disabled .vjs-control-bar,
@@ -42,11 +51,11 @@
   visibility: visible;
 }
 
+
 // IE8 is flakey with fonts, and you have to change the actual content to force
 // fonts to show/hide properly.
 // - "\9" IE8 hack didn't work for this
 // Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
-$ie8screen: "\\0screen";
 .vjs-user-inactive.vjs-playing .vjs-control-bar :before {
   @media #{$ie8screen} { content: ""; }
 }

src/css/components/menu/_menu.scss

@@ -16,6 +16,7 @@
   display: block;
   padding: 0; margin: 0;
   overflow: auto;
+  font-family: $text-font-family;
 }
 
 // prevent menus from opening while scrubbing (FF, IE)

src/css/video-js.scss

@@ -2,11 +2,7 @@
 @import "private-variables";
 @import "utilities";
 
-@if $icon-codepoints {
-  @import "node_modules/videojs-font/scss/icons-codepoints";
-} @else {
-  @import "node_modules/videojs-font/scss/icons";
-}
+@import "node_modules/videojs-font/scss/icons";
 
 @import "components/layout";
 @import "components/big-play";
@@ -39,6 +35,9 @@
 @import "components/chapters";
 @import "components/descriptions";
 @import "components/subtitles";
+@import "components/audio";
 @import "components/adaptive";
 @import "components/captions-settings";
 @import "components/modal-dialog";
+
+@import "print";

src/css/vjs.scss

@@ -1,3 +1 @@
-$icon-codepoints: true;
-
 @import "video-js";

src/js/clickable-component.js

@@ -78,7 +78,7 @@ class ClickableComponent extends Component {
       el.appendChild(this.controlTextEl_);
     }
 
-    this.controlText(this.controlText_);
+    this.controlText(this.controlText_, el);
 
     return this.controlTextEl_;
   }
@@ -86,15 +86,19 @@ class ClickableComponent extends Component {
   /**
    * Controls text - both request and localize
    *
-   * @param {String} text Text for element
+   * @param {String}  text Text for element
+   * @param {Element=} el Element to set the title on
    * @return {String}
    * @method controlText
    */
-  controlText(text) {
+  controlText(text, el=this.el()) {
     if (!text) return this.controlText_ || 'Need Text';
+    
+    const localizedText = this.localize(text);
 
     this.controlText_ = text;
-    this.controlTextEl_.innerHTML = this.localize(this.controlText_);
+    this.controlTextEl_.innerHTML = localizedText;
+    el.setAttribute('title', localizedText);
 
     return this;
   }

src/js/component.js

@@ -11,7 +11,6 @@ import * as Guid from './utils/guid.js';
 import * as Events from './utils/events.js';
 import log from './utils/log.js';
 import toTitleCase from './utils/to-title-case.js';
-import assign from 'object.assign';
 import mergeOptions from './utils/merge-options.js';
 
 
@@ -1176,8 +1175,11 @@ class Component {
     this.on('touchstart', function(event) {
       // If more than one finger, don't consider treating this as a click
       if (event.touches.length === 1) {
-        // Copy the touches object to prevent modifying the original
-        firstTouch = assign({}, event.touches[0]);
+        // Copy pageX/pageY from the object
+        firstTouch = {
+          pageX: event.touches[0].pageX,
+          pageY: event.touches[0].pageY
+        };
         // Record start time so we can detect a tap vs. "touch and hold"
         touchStart = new Date().getTime();
         // Reset couldBeTap tracking

src/js/control-bar/audio-track-controls/audio-track-button.js

@@ -0,0 +1,64 @@
+/**
+ * @file audio-track-button.js
+ */
+import TrackButton from '../track-button.js';
+import Component from '../../component.js';
+import * as Fn from '../../utils/fn.js';
+import AudioTrackMenuItem from './audio-track-menu-item.js';
+
+/**
+ * The base class for buttons that toggle specific text track types (e.g. subtitles)
+ *
+ * @param {Player|Object} player
+ * @param {Object=} options
+ * @extends TrackButton
+ * @class AudioTrackButton
+ */
+class AudioTrackButton extends TrackButton {
+  constructor(player, options = {}) {
+    options.tracks = player.audioTracks && player.audioTracks();
+
+    super(player, options);
+
+    this.el_.setAttribute('aria-label', 'Audio Menu');
+  }
+
+  /**
+   * Allow sub components to stack CSS class names
+   *
+   * @return {String} The constructed class name
+   * @method buildCSSClass
+   */
+  buildCSSClass() {
+    return `vjs-audio-button ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Create a menu item for each audio track
+   *
+   * @return {Array} Array of menu items
+   * @method createItems
+   */
+  createItems(items = []) {
+    let tracks = this.player_.audioTracks && this.player_.audioTracks();
+
+    if (!tracks) {
+      return items;
+    }
+
+    for (let i = 0; i < tracks.length; i++) {
+      let track = tracks[i];
+
+      items.push(new AudioTrackMenuItem(this.player_, {
+        // MenuItem is selectable
+        'selectable': true,
+        'track': track
+      }));
+    }
+
+    return items;
+  }
+}
+
+Component.registerComponent('AudioTrackButton', AudioTrackButton);
+export default AudioTrackButton;

src/js/control-bar/audio-track-controls/audio-track-menu-item.js

@@ -0,0 +1,71 @@
+/**
+ * @file audio-track-menu-item.js
+ */
+import MenuItem from '../../menu/menu-item.js';
+import Component from '../../component.js';
+import * as Fn from '../../utils/fn.js';
+
+/**
+ * The audio track menu item
+ *
+ * @param {Player|Object} player
+ * @param {Object=} options
+ * @extends MenuItem
+ * @class AudioTrackMenuItem
+ */
+class AudioTrackMenuItem extends MenuItem {
+  constructor(player, options) {
+    let track = options.track;
+    let tracks = player.audioTracks();
+
+    // Modify options for parent MenuItem class's init.
+    options.label = track.label || track.language || 'Unknown';
+    options.selected = track.enabled;
+
+    super(player, options);
+
+    this.track = track;
+
+    if (tracks) {
+      let changeHandler = Fn.bind(this, this.handleTracksChange);
+
+      tracks.addEventListener('change', changeHandler);
+      this.on('dispose', () => {
+        tracks.removeEventListener('change', changeHandler);
+      });
+    }
+  }
+
+  /**
+   * Handle click on audio track
+   *
+   * @method handleClick
+   */
+  handleClick(event) {
+    let tracks = this.player_.audioTracks();
+
+    super.handleClick(event);
+
+    if (!tracks) return;
+
+    for (let i = 0; i < tracks.length; i++) {
+      let track = tracks[i];
+
+      if (track === this.track) {
+        track.enabled = true;
+      }
+    }
+  }
+
+  /**
+   * Handle audio track change
+   *
+   * @method handleTracksChange
+   */
+  handleTracksChange(event) {
+    this.selected(this.track.enabled);
+  }
+}
+
+Component.registerComponent('AudioTrackMenuItem', AudioTrackMenuItem);
+export default AudioTrackMenuItem;

src/js/control-bar/control-bar.js

@@ -19,6 +19,7 @@ import ChaptersButton from './text-track-controls/chapters-button.js';
 import DescriptionsButton from './text-track-controls/descriptions-button.js';
 import SubtitlesButton from './text-track-controls/subtitles-button.js';
 import CaptionsButton from './text-track-controls/captions-button.js';
+import AudioTrackButton from './audio-track-controls/audio-track-button.js';
 import PlaybackRateMenuButton from './playback-rate-menu/playback-rate-menu-button.js';
 import CustomControlSpacer from './spacer-controls/custom-control-spacer.js';
 
@@ -47,7 +48,6 @@ class ControlBar extends Component {
 }
 
 ControlBar.prototype.options_ = {
-  loadEvent: 'play',
   children: [
     'playToggle',
     'volumeMenuButton',
@@ -63,6 +63,7 @@ ControlBar.prototype.options_ = {
     'descriptionsButton',
     'subtitlesButton',
     'captionsButton',
+    'audioTrackButton',
     'fullscreenToggle'
   ]
 };

src/js/control-bar/fullscreen-toggle.js

@@ -12,6 +12,11 @@ import Component from '../component.js';
  */
 class FullscreenToggle extends Button {
 
+  constructor(player, options) {
+    super(player, options);
+    this.on(player, 'fullscreenchange', this.handleFullscreenChange);
+  }
+
   /**
    * Allow sub components to stack CSS class names
    *
@@ -21,7 +26,18 @@ class FullscreenToggle extends Button {
   buildCSSClass() {
     return `vjs-fullscreen-control ${super.buildCSSClass()}`;
   }
-
+  /**
+   * Handles Fullscreenchange on the component and change control text accordingly
+   *
+   * @method handleFullscreenChange
+   */
+  handleFullscreenChange() {
+    if (this.player_.isFullscreen()) {
+      this.controlText('Non-Fullscreen');
+    } else {
+      this.controlText('Fullscreen');
+    }
+  }  
   /**
    * Handles click for full screen
    *
@@ -30,10 +46,8 @@ class FullscreenToggle extends Button {
   handleClick() {
     if (!this.player_.isFullscreen()) {
       this.player_.requestFullscreen();
-      this.controlText('Non-Fullscreen');
     } else {
       this.player_.exitFullscreen();
-      this.controlText('Fullscreen');
     }
   }
 

src/js/control-bar/text-track-controls/chapters-button.js

@@ -75,9 +75,11 @@ class ChaptersButton extends TextTrackButton {
   createMenu() {
     let tracks = this.player_.textTracks() || [];
     let chaptersTrack;
-    let items = this.items = [];
+    let items = this.items || [];
 
-    for (let i = 0, length = tracks.length; i < length; i++) {
+    for (let i = tracks.length - 1; i >= 0; i--) {
+
+      // We will always choose the last track as our chaptersTrack
       let track = tracks[i];
 
       if (track['kind'] === this.kind_) {
@@ -97,6 +99,12 @@ class ChaptersButton extends TextTrackButton {
       });
       menu.children_.unshift(title);
       Dom.insertElFirst(title, menu.contentEl());
+    } else {
+        // We will empty out the menu children each time because we want a 
+        // fresh new menu child list each time
+        items.forEach(item => menu.removeChild(item));
+        // Empty out the ChaptersButton menu items because we no longer need them
+        items = [];
     }
 
     if (chaptersTrack && chaptersTrack.cues == null) {
@@ -124,17 +132,15 @@ class ChaptersButton extends TextTrackButton {
 
         menu.addChild(mi);
       }
-
-      this.addChild(menu);
     }
 
-    if (this.items.length > 0) {
+    if (items.length > 0) {
       this.show();
     }
-
+    // Assigning the value of items back to this.items for next iteration
+    this.items = items;
     return menu;
   }
-
 }
 
 ChaptersButton.prototype.kind_ = 'chapters';

src/js/control-bar/text-track-controls/text-track-button.js

@@ -1,7 +1,7 @@
 /**
  * @file text-track-button.js
  */
-import MenuButton from '../../menu/menu-button.js';
+import TrackButton from '../track-button.js';
 import Component from '../../component.js';
 import * as Fn from '../../utils/fn.js';
 import TextTrackMenuItem from './text-track-menu-item.js';
@@ -15,32 +15,20 @@ import OffTextTrackMenuItem from './off-text-track-menu-item.js';
  * @extends MenuButton
  * @class TextTrackButton
  */
-class TextTrackButton extends MenuButton {
+class TextTrackButton extends TrackButton {
+
+  constructor(player, options = {}){
+    options.tracks = player.textTracks();
 
-  constructor(player, options){
     super(player, options);
-
-    let tracks = this.player_.textTracks();
-
-    if (this.items.length <= 1) {
-      this.hide();
-    }
-
-    if (!tracks) {
-      return;
-    }
-
-    let updateHandler = Fn.bind(this, this.update);
-    tracks.addEventListener('removetrack', updateHandler);
-    tracks.addEventListener('addtrack', updateHandler);
-
-    this.player_.on('dispose', function() {
-      tracks.removeEventListener('removetrack', updateHandler);
-      tracks.removeEventListener('addtrack', updateHandler);
-    });
   }
 
-  // Create a menu item for each text track
+  /**
+   * Create a menu item for each text track
+   *
+   * @return {Array} Array of menu items
+   * @method createItems
+   */
   createItems(items=[]) {
     // Add an OFF menu item to turn all tracks off
     items.push(new OffTextTrackMenuItem(this.player_, { 'kind': this.kind_ }));

src/js/control-bar/time-controls/duration-display.js

@@ -18,13 +18,7 @@ class DurationDisplay extends Component {
   constructor(player, options){
     super(player, options);
 
-    // this might need to be changed to 'durationchange' instead of 'timeupdate' eventually,
-    // however the durationchange event fires before this.player_.duration() is set,
-    // so the value cannot be written out using this method.
-    // Once the order of durationchange and this.player_.duration() being set is figured out,
-    // this can be updated.
-    this.on(player, 'timeupdate', this.updateContent);
-    this.on(player, 'loadedmetadata', this.updateContent);
+    this.on(player, 'durationchange', this.updateContent);
   }
 
   /**

src/js/control-bar/time-controls/remaining-time-display.js

@@ -19,6 +19,7 @@ class RemainingTimeDisplay extends Component {
     super(player, options);
 
     this.on(player, 'timeupdate', this.updateContent);
+    this.on(player, 'durationchange', this.updateContent);
   }
 
   /**

src/js/control-bar/track-button.js

@@ -0,0 +1,44 @@
+/**
+ * @file track-button.js
+ */
+import MenuButton from '../menu/menu-button.js';
+import Component from '../component.js';
+import * as Fn from '../utils/fn.js';
+
+/**
+ * The base class for buttons that toggle specific text track types (e.g. subtitles)
+ *
+ * @param {Player|Object} player
+ * @param {Object=} options
+ * @extends MenuButton
+ * @class TrackButton
+ */
+class TrackButton extends MenuButton {
+
+  constructor(player, options){
+    let tracks = options.tracks;
+
+    super(player, options);
+
+    if (this.items.length <= 1) {
+      this.hide();
+    }
+
+    if (!tracks) {
+      return;
+    }
+
+    let updateHandler = Fn.bind(this, this.update);
+    tracks.addEventListener('removetrack', updateHandler);
+    tracks.addEventListener('addtrack', updateHandler);
+
+    this.player_.on('dispose', function() {
+      tracks.removeEventListener('removetrack', updateHandler);
+      tracks.removeEventListener('addtrack', updateHandler);
+    });
+  }
+
+}
+
+Component.registerComponent('TrackButton', TrackButton);
+export default TrackButton;

src/js/event-target.js

@@ -11,7 +11,7 @@ EventTarget.prototype.on = function(type, fn) {
   // Remove the addEventListener alias before calling Events.on
   // so we don't get into an infinite type loop
   let ael = this.addEventListener;
-  this.addEventListener = Function.prototype;
+  this.addEventListener = () => {};
   Events.on(this, type, fn);
   this.addEventListener = ael;
 };
@@ -23,7 +23,12 @@ EventTarget.prototype.off = function(type, fn) {
 EventTarget.prototype.removeEventListener = EventTarget.prototype.off;
 
 EventTarget.prototype.one = function(type, fn) {
+  // Remove the addEventListener alias before calling Events.on
+  // so we don't get into an infinite type loop
+  let ael = this.addEventListener;
+  this.addEventListener = () => {};
   Events.one(this, type, fn);
+  this.addEventListener = ael;
 };
 
 EventTarget.prototype.trigger = function(event) {

src/js/menu/menu-button.js

@@ -141,8 +141,8 @@ class MenuButton extends ClickableComponent {
    * @method handleClick
    */
   handleClick() {
-    this.one('mouseout', Fn.bind(this, function(){
-      this.menu.unlockShowing();
+    this.one(this.menu.contentEl(), 'mouseleave', Fn.bind(this, function(e){
+      this.unpressButton();
       this.el_.blur();
     }));
     if (this.buttonPressed_){

src/js/modal-dialog.js

@@ -255,7 +255,7 @@ class ModalDialog extends Component {
         // content element, so temporarily change the content element.
         let temp = this.contentEl_;
         this.contentEl_ = this.el_;
-        close = this.addChild('closeButton');
+        close = this.addChild('closeButton', {controlText: 'Close Modal Dialog'});
         this.contentEl_ = temp;
         this.on(close, 'close', this.close);
       }

src/js/player.js

@@ -22,6 +22,8 @@ import safeParseTuple from 'safe-json-parse/tuple';
 import assign from 'object.assign';
 import mergeOptions from './utils/merge-options.js';
 import textTrackConverter from './tracks/text-track-list-converter.js';
+import AudioTrackList from './tracks/audio-track-list.js';
+import VideoTrackList from './tracks/video-track-list.js';
 
 // Include required child components (importing also registers them)
 import MediaLoader from './tech/loader.js';
@@ -90,6 +92,25 @@ class Player extends Component {
     // see enableTouchActivity in Component
     options.reportTouchActivity = false;
 
+    // If language is not set, get the closest lang attribute
+    if (!options.language) {
+      if (typeof tag.closest === 'function') {
+        let closest = tag.closest('[lang]');
+        if (closest) {
+          options.language = closest.getAttribute('lang');
+        }
+      } else {
+        let element = tag;
+        while (element && element.nodeType === 1) {
+          if (Dom.getElAttributes(element).hasOwnProperty('lang')) {
+            options.language = element.getAttribute('lang');
+            break;
+          }
+          element = element.parentNode;
+        }
+      }
+    }
+
     // Run base component initializing with new options
     super(null, options, ready);
 
@@ -555,7 +576,9 @@ class Player extends Component {
       'source': source,
       'playerId': this.id(),
       'techId': `${this.id()}_${techName}_api`,
+      'videoTracks': this.videoTracks_,
       'textTracks': this.textTracks_,
+      'audioTracks': this.audioTracks_,
       'autoplay': this.options_.autoplay,
       'preload': this.options_.preload,
       'loop': this.options_.loop,
@@ -620,6 +643,7 @@ class Player extends Component {
     this.on(this.tech_, 'texttrackchange', this.handleTechTextTrackChange_);
     this.on(this.tech_, 'loadedmetadata', this.updateStyleEl_);
     this.on(this.tech_, 'posterchange', this.handleTechPosterChange_);
+    this.on(this.tech_, 'textdata', this.handleTechTextData_);
 
     this.usingNativeControls(this.techGet_('controls'));
 
@@ -648,7 +672,9 @@ class Player extends Component {
    */
   unloadTech_() {
     // Save the current text tracks so that we can reuse the same text tracks with the next tech
+    this.videoTracks_ = this.videoTracks();
     this.textTracks_ = this.textTracks();
+    this.audioTracks_ = this.audioTracks();
     this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
 
     this.isReady_ = false;
@@ -766,8 +792,13 @@ class Player extends Component {
     // In Safari (5.1.1), when we move the video element into the container div, autoplay doesn't work.
     // In Chrome (15), if you have autoplay + a poster + no controls, the video gets hidden (but audio plays)
     // This fixes both issues. Need to wait for API, so it updates displays correctly
-    if (this.src() && this.tag && this.options_.autoplay && this.paused()) {
-      delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
+    if ((this.src() || this.currentSrc()) && this.tag && this.options_.autoplay && this.paused()) {
+      try {
+        delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
+      }
+      catch (e) {
+        log('deleting tag.poster throws in some browsers', e);
+      }
       this.play();
     }
   }
@@ -1096,7 +1127,7 @@ class Player extends Component {
    */
   handleTechError_() {
     let error = this.tech_.error();
-    this.error(error && error.code);
+    this.error(error);
   }
 
   /**
@@ -1149,6 +1180,14 @@ class Player extends Component {
     this.trigger('loadedmetadata');
   }
 
+  handleTechTextData_() {
+    var data = null;
+    if (arguments.length > 1) {
+      data = arguments[1];
+    }
+    this.trigger('textdata', data);
+  }
+
   /**
    * Fires when the browser has loaded the current frame of the audio/video
    *
@@ -1227,7 +1266,7 @@ class Player extends Component {
     // Otherwise call method now
     } else {
       try {
-        this.tech_[method](arg);
+        this.tech_ && this.tech_[method](arg);
       } catch(e) {
         log(e);
         throw e;
@@ -1281,7 +1320,15 @@ class Player extends Component {
    * @method play
    */
   play() {
-    this.techCall_('play');
+    // Only calls the tech's play if we already have a src loaded
+    if (this.src() || this.currentSrc()) {
+      this.techCall_('play');
+    } else {
+      this.tech_.one('loadstart', function() {
+        this.play();
+      });
+    }
+
     return this;
   }
 
@@ -1371,7 +1418,8 @@ class Player extends Component {
   }
 
   /**
-   * Get the length in time of the video in seconds
+   * Normally gets the length in time of the video in seconds;
+   * in all but the rarest use cases an argument will NOT be passed to the method
    * ```js
    *     var lengthOfVideo = myPlayer.duration();
    * ```
@@ -1817,7 +1865,7 @@ class Player extends Component {
     let foundSourceAndTech;
     let flip = (fn) => (a, b) => fn(b, a);
     let finder = ([techName, tech], source) => {
-      if (tech.canPlaySource(source)) {
+      if (tech.canPlaySource(source, this.options_[techName.toLowerCase()])) {
         return {source: source, tech: techName};
       }
     };
@@ -1892,7 +1940,7 @@ class Player extends Component {
     } else if (source instanceof Object) {
       // check if the source has a type and the loaded tech cannot play the source
       // if there's no type we'll just try the current tech
-      if (source.type && !currentTech.canPlaySource(source)) {
+      if (source.type && !currentTech.canPlaySource(source, this.options_[this.techName_.toLowerCase()])) {
         // create a source list with the current source and send through
         // the tech loop to check for a compatible technology
         this.sourceList_([source]);
@@ -2223,7 +2271,9 @@ class Player extends Component {
     if (err === null) {
       this.error_ = err;
       this.removeClass('vjs-error');
-      this.errorDisplay.close();
+      if (this.errorDisplay) {
+        this.errorDisplay.close();
+      }
       return this;
     }
 
@@ -2509,12 +2559,48 @@ class Player extends Component {
   }
 
   /**
-   * Text tracks are tracks of timed text events.
-   * Captions - text displayed over the video for the hearing impaired
-   * Subtitles - text displayed over the video for those who don't understand language in the video
-   * Chapters - text displayed in a menu allowing the user to jump to particular points (chapters) in the video
-   * Descriptions - audio descriptions that are read back to the user by a screen reading device
+   * Get a video track list
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+   *
+   * @return {VideoTrackList} thes current video track list
+   * @method videoTracks
    */
+  videoTracks() {
+    // if we have not yet loadTech_, we create videoTracks_
+    // these will be passed to the tech during loading
+    if (!this.tech_) {
+      this.videoTracks_ = this.videoTracks_ || new VideoTrackList();
+      return this.videoTracks_;
+    }
+
+    return this.tech_.videoTracks();
+  }
+
+  /**
+   * Get an audio track list
+   * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+   *
+   * @return {AudioTrackList} thes current audio track list
+   * @method audioTracks
+   */
+  audioTracks() {
+    // if we have not yet loadTech_, we create videoTracks_
+    // these will be passed to the tech during loading
+    if (!this.tech_) {
+      this.audioTracks_ = this.audioTracks_ || new AudioTrackList();
+      return this.audioTracks_;
+    }
+
+    return this.tech_.audioTracks();
+  }
+
+  /*
+    * Text tracks are tracks of timed text events.
+    * Captions - text displayed over the video for the hearing impaired
+    * Subtitles - text displayed over the video for those who don't understand language in the video
+    * Chapters - text displayed in a menu allowing the user to jump to particular points (chapters) in the video
+    * Descriptions (not supported yet) - audio descriptions that are read back to the user by a screen reading device
+    */
 
   /**
    * Get an array of associated text tracks. captions, subtitles, chapters, descriptions
@@ -2609,8 +2695,6 @@ class Player extends Component {
   // initialTime: function(){ return this.techCall_('initialTime'); },
   // startOffsetTime: function(){ return this.techCall_('startOffsetTime'); },
   // played: function(){ return this.techCall_('played'); },
-  // videoTracks: function(){ return this.techCall_('videoTracks'); },
-  // audioTracks: function(){ return this.techCall_('audioTracks'); },
   // defaultPlaybackRate: function(){ return this.techCall_('defaultPlaybackRate'); },
   // defaultMuted: function(){ return this.techCall_('defaultMuted'); }
 
@@ -2800,7 +2884,7 @@ Player.prototype.options_ = {
     'textTrackSettings'
   ],
 
-  language: document.getElementsByTagName('html')[0].getAttribute('lang') || navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en',
+  language: navigator.languages && navigator.languages[0] || navigator.userLanguage || navigator.language || 'en',
 
   // locales and their language translations
   languages: {},
@@ -2809,6 +2893,13 @@ Player.prototype.options_ = {
   notSupportedMessage: 'No compatible source was found for this media.'
 };
 
+/**
+ * Fired when the user agent begins looking for media data
+ *
+ * @event loadstart
+ */
+Player.prototype.handleTechLoadStart_;
+
 /**
  * Fired when the player has initial duration and dimension information
  *
@@ -2816,6 +2907,13 @@ Player.prototype.options_ = {
  */
 Player.prototype.handleLoadedMetaData_;
 
+/**
+ * Fired when the player receives text data
+ *
+ * @event textdata
+ */
+Player.prototype.handleTextData_;
+
 /**
  * Fired when the player has downloaded data at the current playback position
  *

src/js/tech/flash-rtmp.js

@@ -75,9 +75,10 @@ function FlashRtmpDecorator(Flash) {
   /**
    * Check if Flash can handle the source natively
    * @param  {Object} source  The source object
+   * @param  {Object} options The options passed to the tech
    * @return {String}         'probably', 'maybe', or '' (empty string)
    */
-  Flash.rtmpSourceHandler.canHandleSource = function(source){
+  Flash.rtmpSourceHandler.canHandleSource = function(source, options){
     let can = Flash.rtmpSourceHandler.canPlayType(source.type);
 
     if (can) {
@@ -95,10 +96,11 @@ function FlashRtmpDecorator(Flash) {
    * Pass the source to the flash object
    * Adaptive source handlers will have more complicated workflows before passing
    * video data to the video element
-   * @param  {Object} source    The source object
-   * @param  {Flash} tech   The instance of the Flash tech
+   * @param  {Object} source   The source object
+   * @param  {Flash}  tech     The instance of the Flash tech
+   * @param  {Object} options  The options to pass to the source
    */
-  Flash.rtmpSourceHandler.handleSource = function(source, tech){
+  Flash.rtmpSourceHandler.handleSource = function(source, tech, options){
     let srcParts = Flash.streamToParts(source.src);
 
     tech['setRtmpConnection'](srcParts.connection);

src/js/tech/flash.js

@@ -229,6 +229,20 @@ class Flash extends Tech {
     }
   }
 
+  /**
+   * Get media duration
+   *
+   * @returns {Number} Media duration
+   */
+  duration() {
+    if (this.readyState() === 0) {
+      return NaN;
+    } else {
+      let duration = this.el_.vjs_getProperty('duration');
+      return duration >= 0 ? duration : Infinity;
+    }
+  }
+
   /**
    * Load media into player
    *
@@ -312,7 +326,7 @@ class Flash extends Tech {
 // Create setters and getters for attributes
 const _api = Flash.prototype;
 const _readWrite = 'rtmpConnection,rtmpStream,preload,defaultPlaybackRate,playbackRate,autoplay,loop,mediaGroup,controller,controls,volume,muted,defaultMuted'.split(',');
-const _readOnly = 'networkState,readyState,initialTime,duration,startOffsetTime,paused,ended,videoTracks,audioTracks,videoWidth,videoHeight'.split(',');
+const _readOnly = 'networkState,readyState,initialTime,startOffsetTime,paused,ended,videoWidth,videoHeight'.split(',');
 
 function _createSetter(attr){
   var attrUpper = attr.charAt(0).toUpperCase() + attr.slice(1);
@@ -369,9 +383,10 @@ Flash.nativeSourceHandler.canPlayType = function(type){
  * Check Flash can handle the source natively
  *
  * @param  {Object} source  The source object
+ * @param  {Object} options The options passed to the tech
  * @return {String}         'probably', 'maybe', or '' (empty string)
  */
-Flash.nativeSourceHandler.canHandleSource = function(source){
+Flash.nativeSourceHandler.canHandleSource = function(source, options){
   var type;
 
   function guessMimeType(src) {
@@ -397,10 +412,11 @@ Flash.nativeSourceHandler.canHandleSource = function(source){
  * Adaptive source handlers will have more complicated workflows before passing
  * video data to the video element
  *
- * @param  {Object} source    The source object
- * @param  {Flash} tech   The instance of the Flash tech
+ * @param  {Object} source   The source object
+ * @param  {Flash}  tech     The instance of the Flash tech
+ * @param  {Object} options  The options to pass to the source
  */
-Flash.nativeSourceHandler.handleSource = function(source, tech){
+Flash.nativeSourceHandler.handleSource = function(source, tech, options){
   tech.setSrc(source.src);
 };
 
@@ -455,7 +471,7 @@ Flash.checkReady = function(tech){
 // Trigger events from the swf on the player
 Flash.onEvent = function(swfID, eventName){
   let tech = Dom.getEl(swfID).tech;
-  tech.trigger(eventName);
+  tech.trigger(eventName, Array.prototype.slice.call(arguments, 2));
 };
 
 // Log errors from the swf

src/js/tech/html5.js

@@ -9,11 +9,14 @@ import * as Dom from '../utils/dom.js';
 import * as Url from '../utils/url.js';
 import * as Fn from '../utils/fn.js';
 import log from '../utils/log.js';
+import tsml from 'tsml';
+import TextTrack from '../../../src/js/tracks/text-track.js';
 import * as browser from '../utils/browser.js';
 import document from 'global/document';
 import window from 'global/window';
 import assign from 'object.assign';
 import mergeOptions from '../utils/merge-options.js';
+import toTitleCase from '../utils/to-title-case.js';
 
 /**
  * HTML5 Media Controller - Wrapper for HTML5 Media API
@@ -29,6 +32,7 @@ class Html5 extends Tech {
     super(options, ready);
 
     const source = options.source;
+    let crossoriginTracks = false;
 
     // Set the source if one is provided
     // 1) Check if the source is new (if not, we want to keep the original so playback isn't interrupted)
@@ -61,6 +65,11 @@ class Html5 extends Tech {
             // store HTMLTrackElement and TextTrack to remote list
             this.remoteTextTrackEls().addTrackElement_(node);
             this.remoteTextTracks().addTrack_(node.track);
+            if (!crossoriginTracks &&
+                !this.el_.hasAttribute('crossorigin') &&
+                Url.isCrossOrigin(node.src)) {
+              crossoriginTracks = true;
+            }
           }
         }
       }
@@ -70,7 +79,33 @@ class Html5 extends Tech {
       }
     }
 
+    let trackTypes = ['audio', 'video'];
+
+    // ProxyNativeTextTracks
+    trackTypes.forEach((type) => {
+      let capitalType = toTitleCase(type);
+
+      if (!this[`featuresNative${capitalType}Tracks`]) {
+        return;
+      }
+      let tl = this.el()[`${type}Tracks`];
+
+      if (tl && tl.addEventListener) {
+        tl.addEventListener('change', Fn.bind(this, this[`handle${capitalType}TrackChange_`]));
+        tl.addEventListener('addtrack', Fn.bind(this, this[`handle${capitalType}TrackAdd_`]));
+        tl.addEventListener('removetrack', Fn.bind(this, this[`handle${capitalType}TrackRemove_`]));
+
+        // Remove (native) trackts that are not used anymore
+        this.on('loadstart', this[`removeOld${capitalType}Tracks_`]);
+      }
+    });
+
     if (this.featuresNativeTextTracks) {
+      if (crossoriginTracks) {
+        log.warn(tsml`Text Tracks are being loaded from another origin but the crossorigin attribute isn't used. 
+            This may prevent text tracks from loading.`);
+      }
+
       this.handleTextTrackChange_ = Fn.bind(this, this.handleTextTrackChange);
       this.handleTextTrackAdd_ = Fn.bind(this, this.handleTextTrackAdd);
       this.handleTextTrackRemove_ = Fn.bind(this, this.handleTextTrackRemove);
@@ -81,9 +116,8 @@ class Html5 extends Tech {
     // Our goal should be to get the custom controls on mobile solid everywhere
     // so we can remove this all together. Right now this will block custom
     // controls on touch enabled laptops like the Chrome Pixel
-    if (browser.TOUCH_ENABLED && options.nativeControlsForTouch === true ||
-        browser.IS_IPHONE ||
-        browser.IS_NATIVE_ANDROID) {
+    if ((browser.TOUCH_ENABLED || browser.IS_IPHONE ||
+        browser.IS_NATIVE_ANDROID) && options.nativeControlsForTouch === true) {
       this.setControls(true);
     }
 
@@ -96,25 +130,25 @@ class Html5 extends Tech {
    * @method dispose
    */
   dispose() {
-    let tt = this.el().textTracks;
-    let emulatedTt = this.textTracks();
-
-    // remove native event listeners
-    if (tt && tt.removeEventListener) {
-      tt.removeEventListener('change', this.handleTextTrackChange_);
-      tt.removeEventListener('addtrack', this.handleTextTrackAdd_);
-      tt.removeEventListener('removetrack', this.handleTextTrackRemove_);
-    }
-
-    // clearout the emulated text track list.
-    let i = emulatedTt.length;
-
-    while (i--) {
-      emulatedTt.removeTrack_(emulatedTt[i]);
-    }
+    // Un-ProxyNativeTracks
+    ['audio', 'video', 'text'].forEach((type) => {
+      let capitalType = toTitleCase(type);
+      let tl = this.el_[`${type}Tracks`];
 
+      if (tl && tl.removeEventListener) {
+        tl.removeEventListener('change', this[`handle${capitalType}TrackChange_`]);
+        tl.removeEventListener('addtrack', this[`handle${capitalType}TrackAdd_`]);
+        tl.removeEventListener('removetrack', this[`handle${capitalType}TrackRemove_`]);
+      }
+      
+      // Stop removing old text tracks
+      if (tl) {
+        this.off('loadstart', this[`removeOld${capitalType}Tracks_`]);
+      }
+    });
 
     Html5.disposeMediaElement(this.el_);
+    // tech will handle clearing of the emulated track list
     super.dispose();
   }
 
@@ -269,6 +303,9 @@ class Html5 extends Tech {
         tt.addEventListener('addtrack', this.handleTextTrackAdd_);
         tt.addEventListener('removetrack', this.handleTextTrackRemove_);
       }
+    
+      // Remove (native) texttracks that are not used anymore
+      this.on('loadstart', this.removeOldTextTracks_);
     }
   }
 
@@ -290,12 +327,111 @@ class Html5 extends Tech {
     this.textTracks().removeTrack_(e.track);
   }
 
+  handleVideoTrackChange_(e) {
+    let vt = this.videoTracks();
+    this.videoTracks().trigger({
+      type: 'change',
+      target: vt,
+      currentTarget: vt,
+      srcElement: vt
+    });
+  }
+
+  handleVideoTrackAdd_(e) {
+    this.videoTracks().addTrack_(e.track);
+  }
+
+  handleVideoTrackRemove_(e) {
+    this.videoTracks().removeTrack_(e.track);
+  }
+
+  handleAudioTrackChange_(e) {
+    let audioTrackList = this.audioTracks();
+    this.audioTracks().trigger({
+      type: 'change',
+      target: audioTrackList,
+      currentTarget: audioTrackList,
+      srcElement: audioTrackList
+    });
+  }
+
+  handleAudioTrackAdd_(e) {
+    this.audioTracks().addTrack_(e.track);
+  }
+
+  handleAudioTrackRemove_(e) {
+    this.audioTracks().removeTrack_(e.track);
+  }
+
+  /**
+   * This is a helper function that is used in removeOldTextTracks_, removeOldAudioTracks_ and
+   * removeOldVideoTracks_
+   * @param {Track[]} techTracks Tracks for this tech
+   * @param {Track[]} elTracks Tracks for the HTML5 video element
+   * @private
+   */
+  removeOldTracks_(techTracks, elTracks) {
+    // This will loop over the techTracks and check if they are still used by the HTML5 video element
+    // If not, they will be removed from the emulated list
+    let removeTracks = [];
+    if (!elTracks) {
+      return;
+    }
+
+    for (let i = 0; i < techTracks.length; i++) {
+      let techTrack = techTracks[i];
+
+      let found = false;
+      for (let j = 0; j < elTracks.length; j++) {
+        if (elTracks[j] === techTrack) {
+          found = true;
+          break;
+        }
+      }
+
+      if (!found) {
+        removeTracks.push(techTrack);
+      }
+    }
+
+    for (let i = 0; i < removeTracks.length; i++) {
+      const track = removeTracks[i];
+      techTracks.removeTrack_(track);
+    }
+  }
+
+  removeOldTextTracks_() {
+    const techTracks = this.textTracks();
+    const elTracks = this.el().textTracks;
+    this.removeOldTracks_(techTracks, elTracks);
+  }
+
+  removeOldAudioTracks_() {
+    const techTracks = this.audioTracks();
+    const elTracks = this.el().audioTracks;
+    this.removeOldTracks_(techTracks, elTracks);
+  }
+
+  removeOldVideoTracks_() {
+    const techTracks = this.videoTracks();
+    const elTracks = this.el().videoTracks;
+    this.removeOldTracks_(techTracks, elTracks);
+  }
+
   /**
    * Play for html5 tech
    *
    * @method play
    */
-  play() { this.el_.play(); }
+  play() {
+    const playPromise = this.el_.play();
+
+    // Catch/silence error when a pause interrupts a play request
+    // on browsers which return a promise
+    if (playPromise !== undefined && typeof playPromise.then === 'function') {
+      playPromise.then(null, (e) => {});
+    }
+  }
 
   /**
    * Pause for html5 tech
@@ -880,9 +1016,10 @@ Html5.nativeSourceHandler.canPlayType = function(type){
  * Check if the video element can handle the source natively
  *
  * @param  {Object} source  The source object
+ * @param  {Object} options The options passed to the tech
  * @return {String}         'probably', 'maybe', or '' (empty string)
  */
-Html5.nativeSourceHandler.canHandleSource = function(source){
+Html5.nativeSourceHandler.canHandleSource = function(source, options){
   var match, ext;
 
   // If a type was provided we should rely on that
@@ -903,10 +1040,11 @@ Html5.nativeSourceHandler.canHandleSource = function(source){
  * Adaptive source handlers will have more complicated workflows before passing
  * video data to the video element
  *
- * @param  {Object} source    The source object
- * @param  {Html5} tech   The instance of the Html5 tech
+ * @param  {Object} source   The source object
+ * @param  {Html5}  tech     The instance of the Html5 tech
+ * @param  {Object} options  The options to pass to the source
  */
-Html5.nativeSourceHandler.handleSource = function(source, tech){
+Html5.nativeSourceHandler.handleSource = function(source, tech, options){
   tech.setSrc(source.src);
 };
 
@@ -927,9 +1065,14 @@ Html5.registerSourceHandler(Html5.nativeSourceHandler);
  * @return {Boolean}
  */
 Html5.canControlVolume = function(){
-  var volume =  Html5.TEST_VID.volume;
-  Html5.TEST_VID.volume = (volume / 2) + 0.1;
-  return volume !== Html5.TEST_VID.volume;
+  // IE will error if Windows Media Player not installed #3315
+  try {
+    var volume =  Html5.TEST_VID.volume;
+    Html5.TEST_VID.volume = (volume / 2) + 0.1;
+    return volume !== Html5.TEST_VID.volume;
+  } catch(e) {
+    return false;
+  }
 };
 
 /*
@@ -943,9 +1086,14 @@ Html5.canControlPlaybackRate = function(){
   if (browser.IS_ANDROID && browser.IS_CHROME) {
     return false;
   }
-  var playbackRate = Html5.TEST_VID.playbackRate;
-  Html5.TEST_VID.playbackRate = (playbackRate / 2) + 0.1;
-  return playbackRate !== Html5.TEST_VID.playbackRate;
+  // IE will error if Windows Media Player not installed #3315
+  try {
+    var playbackRate = Html5.TEST_VID.playbackRate;
+    Html5.TEST_VID.playbackRate = (playbackRate / 2) + 0.1;
+    return playbackRate !== Html5.TEST_VID.playbackRate;
+  } catch(e) {
+    return false;
+  }
 };
 
 /*
@@ -975,6 +1123,27 @@ Html5.supportsNativeTextTracks = function() {
   return supportsTextTracks;
 };
 
+/*
+ * Check to see if native video tracks are supported by this browser/device
+ *
+ * @return {Boolean}
+ */
+Html5.supportsNativeVideoTracks = function() {
+  let supportsVideoTracks = !!Html5.TEST_VID.videoTracks;
+  return supportsVideoTracks;
+};
+
+/*
+ * Check to see if native audio tracks are supported by this browser/device
+ *
+ * @return {Boolean}
+ */
+Html5.supportsNativeAudioTracks = function() {
+  let supportsAudioTracks = !!Html5.TEST_VID.audioTracks;
+  return supportsAudioTracks;
+};
+
+
 /**
  * An array of events available on the Html5 tech.
  *
@@ -1048,6 +1217,20 @@ Html5.prototype['featuresProgressEvents'] = true;
  */
 Html5.prototype['featuresNativeTextTracks'] = Html5.supportsNativeTextTracks();
 
+/**
+ * Sets the tech's status on native text track support
+ *
+ * @type {Boolean}
+ */
+Html5.prototype['featuresNativeVideoTracks'] = Html5.supportsNativeVideoTracks();
+
+/**
+ * Sets the tech's status on native audio track support
+ *
+ * @type {Boolean}
+ */
+Html5.prototype['featuresNativeAudioTracks'] = Html5.supportsNativeAudioTracks();
+
 // HTML5 Feature detection and Device Fixes --------------------------------- //
 let canPlayType;
 const mpegurlRE = /^application\/(?:x-|vnd\.apple\.)mpegurl/i;

src/js/tech/tech.js

@@ -10,6 +10,10 @@ import HTMLTrackElementList from '../tracks/html-track-element-list';
 import mergeOptions from '../utils/merge-options.js';
 import TextTrack from '../tracks/text-track';
 import TextTrackList from '../tracks/text-track-list';
+import VideoTrack from '../tracks/video-track';
+import VideoTrackList from '../tracks/video-track-list';
+import AudioTrackList from '../tracks/audio-track-list';
+import AudioTrack from '../tracks/audio-track';
 import * as Fn from '../utils/fn.js';
 import log from '../utils/log.js';
 import { createTimeRange } from '../utils/time-ranges.js';
@@ -45,6 +49,8 @@ class Tech extends Component {
     });
 
     this.textTracks_ = options.textTracks;
+    this.videoTracks_ = options.videoTracks;
+    this.audioTracks_ = options.audioTracks;
 
     // Manually track progress in cases where the browser/flash player doesn't report it.
     if (!this.featuresProgressEvents) {
@@ -65,6 +71,7 @@ class Tech extends Component {
     }
 
     this.initTextTrackListeners();
+    this.initTrackListeners();
 
     // Turn on component tap events
     this.emitTapEvents();
@@ -218,15 +225,9 @@ class Tech extends Component {
    * @method dispose
    */
   dispose() {
-    // clear out text tracks because we can't reuse them between techs
-    let textTracks = this.textTracks();
 
-    if (textTracks) {
-      let i = textTracks.length;
-      while(i--) {
-        this.removeRemoteTextTrack(textTracks[i]);
-      }
-    }
+    // clear out all tracks because we can't reuse them between techs
+    this.clearTracks(['audio', 'video', 'text']);
 
     // Turn off any manual progress or timeupdate tracking
     if (this.manualProgress) { this.manualProgressOff(); }
@@ -236,6 +237,33 @@ class Tech extends Component {
     super.dispose();
   }
 
+  /**
+   * clear out a track list, or multiple track lists
+   *
+   * Note: Techs without source handlers should call this between
+   * sources for video & audio tracks, as usually you don't want
+   * to use them between tracks and we have no automatic way to do
+   * it for you
+   *
+   * @method clearTracks
+   * @param {Array|String} types type(s) of track lists to empty
+   */
+  clearTracks(types) {
+    types = [].concat(types);
+    // clear out all tracks because we can't reuse them between techs
+    types.forEach((type) => {
+      let list = this[`${type}Tracks`]() || [];
+      let i = list.length;
+      while (i--) {
+        let track = list[i];
+        if (type === 'text') {
+          this.removeRemoteTextTrack(track);
+        }
+        list.removeTrack_(track);
+      }
+    });
+  }
+
   /**
    * Reset the tech. Removes all sources and resets readyState.
    *
@@ -313,6 +341,32 @@ class Tech extends Component {
     }));
   }
 
+
+  /**
+   * Initialize audio and video track listeners
+   *
+   * @method initTrackListeners
+   */
+  initTrackListeners() {
+    const trackTypes = ['video', 'audio'];
+
+    trackTypes.forEach((type) => {
+      let trackListChanges = () => {
+        this.trigger(`${type}trackchange`);
+      };
+
+      let tracks = this[`${type}Tracks`]();
+
+      tracks.addEventListener('removetrack', trackListChanges);
+      tracks.addEventListener('addtrack', trackListChanges);
+
+      this.on('dispose', () => {
+        tracks.removeEventListener('removetrack', trackListChanges);
+        tracks.removeEventListener('addtrack', trackListChanges);
+      });
+    });
+  }
+
   /**
    * Emulate texttracks
    *
@@ -337,8 +391,10 @@ class Tech extends Component {
         script.onload = null;
         script.onerror = null;
       });
-      this.el().parentNode.appendChild(script);
+      // but have not loaded yet and we set it to true before the inject so that
+      // we don't overwrite the injected window.WebVTT if it loads right away
       window['WebVTT'] = true;
+      this.el().parentNode.appendChild(script);
     }
 
     let updateDisplay = () => this.trigger('texttrackchange');
@@ -362,6 +418,28 @@ class Tech extends Component {
     });
   }
 
+  /**
+   * Get videotracks
+   *
+   * @returns {VideoTrackList}
+   * @method videoTracks
+   */
+  videoTracks() {
+    this.videoTracks_ = this.videoTracks_ || new VideoTrackList();
+    return this.videoTracks_;
+  }
+
+  /**
+   * Get audiotracklist
+   *
+   * @returns {AudioTrackList}
+   * @method audioTracks
+   */
+  audioTracks() {
+    this.audioTracks_ = this.audioTracks_ || new AudioTrackList();
+    return this.audioTracks_;
+  }
+
   /*
    * Provide default methods for text tracks.
    *
@@ -536,14 +614,31 @@ class Tech extends Component {
   }
 }
 
-/*
+/**
  * List of associated text tracks
  *
- * @type {Array}
+ * @type {TextTrackList}
  * @private
  */
 Tech.prototype.textTracks_;
 
+/**
+ * List of associated audio tracks
+ *
+ * @type {AudioTrackList}
+ * @private
+ */
+Tech.prototype.audioTracks_;
+
+/**
+ * List of associated video tracks
+ *
+ * @type {VideoTrackList}
+ * @private
+ */
+Tech.prototype.videoTracks_;
+
+
 var createTrackHelper = function(self, kind, label, language, options={}) {
   let tracks = self.textTracks();
 
@@ -631,16 +726,17 @@ Tech.withSourceHandlers = function(_Tech){
    /*
     * Return the first source handler that supports the source
     * TODO: Answer question: should 'probably' be prioritized over 'maybe'
-    * @param  {Object} source The source object
+    * @param  {Object} source  The source object
+    * @param  {Object} options The options passed to the tech
     * @returns {Object}       The first source handler that supports the source
     * @returns {null}         Null if no source handler is found
     */
-   _Tech.selectSourceHandler = function(source){
+   _Tech.selectSourceHandler = function(source, options){
     let handlers = _Tech.sourceHandlers || [];
     let can;
 
     for (let i = 0; i < handlers.length; i++) {
-      can = handlers[i].canHandleSource(source);
+      can = handlers[i].canHandleSource(source, options);
 
       if (can) {
         return handlers[i];
@@ -653,13 +749,14 @@ Tech.withSourceHandlers = function(_Tech){
   /*
    * Check if the tech can support the given source
    * @param  {Object} srcObj  The source object
+   * @param  {Object} options The options passed to the tech
    * @return {String}         'probably', 'maybe', or '' (empty string)
    */
-  _Tech.canPlaySource = function(srcObj){
-    let sh = _Tech.selectSourceHandler(srcObj);
+  _Tech.canPlaySource = function(srcObj, options){
+    let sh = _Tech.selectSourceHandler(srcObj, options);
 
     if (sh) {
-      return sh.canHandleSource(srcObj);
+      return sh.canHandleSource(srcObj, options);
     }
 
     return '';
@@ -697,7 +794,7 @@ Tech.withSourceHandlers = function(_Tech){
     * @return {Tech} self
     */
    _Tech.prototype.setSource = function(source){
-    let sh = _Tech.selectSourceHandler(source);
+    let sh = _Tech.selectSourceHandler(source, this.options_);
 
     if (!sh) {
       // Fall back to a native source hander when unsupported sources are
@@ -713,19 +810,54 @@ Tech.withSourceHandlers = function(_Tech){
     this.disposeSourceHandler();
     this.off('dispose', this.disposeSourceHandler);
 
-    this.currentSource_ = source;
-    this.sourceHandler_ = sh.handleSource(source, this);
+    // if we have a source and get another one
+    // then we are loading something new
+    // than clear all of our current tracks
+    if (this.currentSource_) {
+      this.clearTracks(['audio', 'video']);
+
+      this.currentSource_ = null;
+    }
+
+    if (sh !== _Tech.nativeSourceHandler) {
+
+      this.currentSource_ = source;
+
+      // Catch if someone replaced the src without calling setSource.
+      // If they do, set currentSource_ to null and dispose our source handler.
+      this.off(this.el_, 'loadstart', _Tech.prototype.firstLoadStartListener_);
+      this.off(this.el_, 'loadstart', _Tech.prototype.successiveLoadStartListener_);
+      this.one(this.el_, 'loadstart', _Tech.prototype.firstLoadStartListener_);
+
+    }
+
+    this.sourceHandler_ = sh.handleSource(source, this, this.options_);
     this.on('dispose', this.disposeSourceHandler);
 
     return this;
   };
 
-   /*
-    * Clean up any existing source handler
-    */
-   _Tech.prototype.disposeSourceHandler = function(){
+  // On the first loadstart after setSource
+  _Tech.prototype.firstLoadStartListener_ = function() {
+    this.one(this.el_, 'loadstart', _Tech.prototype.successiveLoadStartListener_);
+  };
+
+  // On successive loadstarts when setSource has not been called again
+  _Tech.prototype.successiveLoadStartListener_ = function() {
+    this.currentSource_ = null;
+    this.disposeSourceHandler();
+    this.one(this.el_, 'loadstart', _Tech.prototype.successiveLoadStartListener_);
+  };
+
+  /*
+   * Clean up any existing source handler
+   */
+  _Tech.prototype.disposeSourceHandler = function() {
     if (this.sourceHandler_ && this.sourceHandler_.dispose) {
+      this.off(this.el_, 'loadstart', _Tech.prototype.firstLoadStartListener_);
+      this.off(this.el_, 'loadstart', _Tech.prototype.successiveLoadStartListener_);
       this.sourceHandler_.dispose();
+      this.sourceHandler_ = null;
     }
   };
 

src/js/tracks/audio-track-list.js

@@ -0,0 +1,113 @@
+/**
+ * @file audio-track-list.js
+ */
+import TrackList from './track-list';
+import * as browser from '../utils/browser.js';
+import document from 'global/document';
+
+/**
+ * anywhere we call this function we diverge from the spec
+ * as we only support one enabled audiotrack at a time
+ *
+ * @param {Array|AudioTrackList} list list to work on
+ * @param {AudioTrack} track the track to skip
+ */
+const disableOthers = function(list, track) {
+  for (let i = 0; i < list.length; i++) {
+    if (track.id === list[i].id) {
+      continue;
+    }
+    // another audio track is enabled, disable it
+    list[i].enabled = false;
+  }
+};
+/**
+ * A list of possible audio tracks. All functionality is in the
+ * base class Tracklist and the spec for AudioTrackList is located at:
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist
+ *
+ * interface AudioTrackList : EventTarget {
+ *   readonly attribute unsigned long length;
+ *   getter AudioTrack (unsigned long index);
+ *   AudioTrack? getTrackById(DOMString id);
+ *
+ *   attribute EventHandler onchange;
+ *   attribute EventHandler onaddtrack;
+ *   attribute EventHandler onremovetrack;
+ * };
+ *
+ * @param {AudioTrack[]} tracks a list of audio tracks to instantiate the list with
+ * @extends TrackList
+ * @class AudioTrackList
+ */
+class AudioTrackList extends TrackList {
+  constructor(tracks = []) {
+    let list;
+
+    // make sure only 1 track is enabled
+    // sorted from last index to first index
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      if (tracks[i].enabled) {
+        disableOthers(tracks, tracks[i]);
+        break;
+      }
+    }
+
+    // IE8 forces us to implement inheritance ourselves
+    // as it does not support Object.defineProperty properly
+    if (browser.IS_IE8) {
+      list = document.createElement('custom');
+      for (let prop in TrackList.prototype) {
+        if (prop !== 'constructor') {
+          list[prop] = TrackList.prototype[prop];
+        }
+      }
+      for (let prop in AudioTrackList.prototype) {
+        if (prop !== 'constructor') {
+          list[prop] = AudioTrackList.prototype[prop];
+        }
+      }
+    }
+
+    list = super(tracks, list);
+    list.changing_ = false;
+
+    return list;
+  }
+
+  addTrack_(track) {
+    if (track.enabled) {
+      disableOthers(this, track);
+    }
+
+    super.addTrack_(track);
+    // native tracks don't have this
+    if (!track.addEventListener) {
+      return;
+    }
+
+    track.addEventListener('enabledchange', () => {
+      // when we are disabling other tracks (since we don't support
+      // more than one track at a time) we will set changing_
+      // to true so that we don't trigger additional change events
+      if (this.changing_) {
+        return;
+      }
+      this.changing_ = true;
+      disableOthers(this, track);
+      this.changing_ = false;
+      this.trigger('change');
+    });
+  }
+
+  addTrack(track) {
+    this.addTrack_(track);
+  }
+
+  removeTrack(track) {
+    super.removeTrack_(track);
+  }
+
+}
+
+export default AudioTrackList;

src/js/tracks/audio-track.js

@@ -0,0 +1,63 @@
+import {AudioTrackKind} from './track-enums';
+import Track from './track';
+import merge from '../utils/merge-options';
+import * as browser from '../utils/browser.js';
+
+/**
+ * A single audio text track as defined in:
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack
+ *
+ * interface AudioTrack {
+ *   readonly attribute DOMString id;
+ *   readonly attribute DOMString kind;
+ *   readonly attribute DOMString label;
+ *   readonly attribute DOMString language;
+ *   attribute boolean enabled;
+ * };
+ *
+ * @param {Object=} options Object of option names and values
+ * @class AudioTrack
+ */
+class AudioTrack extends Track {
+  constructor(options = {}) {
+    let settings = merge(options, {
+      kind: AudioTrackKind[options.kind] || ''
+    });
+    // on IE8 this will be a document element
+    // for every other browser this will be a normal object
+    let track = super(settings);
+    let enabled = false;
+
+    if (browser.IS_IE8) {
+      for (let prop in AudioTrack.prototype) {
+        if (prop !== 'constructor') {
+          track[prop] = AudioTrack.prototype[prop];
+        }
+      }
+    }
+
+    Object.defineProperty(track, 'enabled', {
+      get() { return enabled; },
+      set(newEnabled) {
+        // an invalid or unchanged value
+        if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {
+          return;
+        }
+        enabled = newEnabled;
+        this.trigger('enabledchange');
+      }
+    });
+
+    // if the user sets this track to selected then
+    // set selected to that true value otherwise
+    // we keep it false
+    if (settings.enabled) {
+      track.enabled = settings.enabled;
+    }
+    track.loaded_ = true;
+
+    return track;
+  }
+}
+
+export default AudioTrack;

src/js/tracks/text-track-enums.js

@@ -1,39 +0,0 @@
-/**
- * @file text-track-enums.js
- */
-
-/**
- * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
- *
- * enum TextTrackMode { "disabled",  "hidden",  "showing" };
- */
-const TextTrackMode = {
-  disabled: 'disabled',
-  hidden: 'hidden',
-  showing: 'showing'
-};
-
-/**
- * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackkind
- *
- * enum TextTrackKind {
- *   "subtitles",
- *   "captions",
- *   "descriptions",
- *   "chapters",
- *   "metadata"
- * };
- */
-const TextTrackKind = {
-  subtitles: 'subtitles',
-  captions: 'captions',
-  descriptions: 'descriptions',
-  chapters: 'chapters',
-  metadata: 'metadata'
-};
-
-/* jshint ignore:start */
-// we ignore jshint here because it does not see
-// TextTrackMode or TextTrackKind as defined here somehow...
-export { TextTrackMode, TextTrackKind };
-/* jshint ignore:end */

src/js/tracks/text-track-list.js

@@ -1,14 +1,15 @@
 /**
  * @file text-track-list.js
  */
-import EventTarget from '../event-target';
+import TrackList from './track-list';
 import * as Fn from '../utils/fn.js';
 import * as browser from '../utils/browser.js';
 import document from 'global/document';
 
 /**
- * A text track list as defined in:
- * https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist
+ * A list of possible text tracks. All functionality is in the
+ * base class TrackList. The spec for TextTrackList is located at:
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist
  *
  * interface TextTrackList : EventTarget {
  *   readonly attribute unsigned long length;
@@ -20,19 +21,23 @@ import document from 'global/document';
  *   attribute EventHandler onremovetrack;
  * };
  *
- * @param {Track[]} tracks A list of tracks to initialize the list with
- * @extends EventTarget
+ * @param {TextTrack[]} tracks A list of tracks to initialize the list with
+ * @extends TrackList
  * @class TextTrackList
  */
-
-class TextTrackList extends EventTarget {
+class TextTrackList extends TrackList {
   constructor(tracks = []) {
-    super();
-    let list = this;
+    let list;
 
+    // IE8 forces us to implement inheritance ourselves
+    // as it does not support Object.defineProperty properly
     if (browser.IS_IE8) {
       list = document.createElement('custom');
-
+      for (let prop in TrackList.prototype) {
+        if (prop !== 'constructor') {
+          list[prop] = TrackList.prototype[prop];
+        }
+      }
       for (let prop in TextTrackList.prototype) {
         if (prop !== 'constructor') {
           list[prop] = TextTrackList.prototype[prop];
@@ -40,54 +45,15 @@ class TextTrackList extends EventTarget {
       }
     }
 
-    list.tracks_ = [];
-
-    Object.defineProperty(list, 'length', {
-      get() {
-        return this.tracks_.length;
-      }
-    });
-
-    for (let i = 0; i < tracks.length; i++) {
-      list.addTrack_(tracks[i]);
-    }
-
-    if (browser.IS_IE8) {
-      return list;
-    }
+    list = super(tracks, list);
+    return list;
   }
 
-  /**
-   * Add TextTrack from TextTrackList
-   *
-   * @param {TextTrack} track
-   * @method addTrack_
-   * @private
-   */
   addTrack_(track) {
-    let index = this.tracks_.length;
-
-    if (!('' + index in this)) {
-      Object.defineProperty(this, index, {
-        get() {
-          return this.tracks_[index];
-        }
-      });
-    }
-
+    super.addTrack_(track);
     track.addEventListener('modechange', Fn.bind(this, function() {
       this.trigger('change');
     }));
-
-    // Do not add duplicate tracks
-    if (this.tracks_.indexOf(track) === -1) {
-      this.tracks_.push(track);
-      this.trigger({
-        track,
-        type: 'addtrack'
-      });
-    }
-
   }
 
   /**
@@ -147,21 +113,4 @@ class TextTrackList extends EventTarget {
     return result;
   }
 }
-
-/**
- * change - One or more tracks in the track list have been enabled or disabled.
- * addtrack - A track has been added to the track list.
- * removetrack - A track has been removed from the track list.
- */
-TextTrackList.prototype.allowedEvents_ = {
-  change: 'change',
-  addtrack: 'addtrack',
-  removetrack: 'removetrack'
-};
-
-// emulate attribute EventHandler support to allow for feature detection
-for (let event in TextTrackList.prototype.allowedEvents_) {
-  TextTrackList.prototype['on' + event] = null;
-}
-
 export default TextTrackList;

src/js/tracks/text-track-settings.js

@@ -67,9 +67,18 @@ class TextTrackSettings extends Component {
    * @method createEl
    */
   createEl() {
+    let uniqueId = this.id_;
+    let dialogLabelId = 'TTsettingsDialogLabel-' + uniqueId;
+    let dialogDescriptionId = 'TTsettingsDialogDescription-' + uniqueId;
+
     return super.createEl('div', {
       className: 'vjs-caption-settings vjs-modal-overlay',
-      innerHTML: captionOptionsMenuTemplate()
+      innerHTML: captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId),
+      tabIndex: -1
+    }, {
+      role: 'dialog',
+      'aria-labelledby': dialogLabelId,
+      'aria-describedby': dialogDescriptionId
     });
   }
 
@@ -241,14 +250,19 @@ function setSelectedOption(target, value) {
   target.selectedIndex = i;
 }
 
-function captionOptionsMenuTemplate() {
-  let template = `<div class="vjs-tracksettings">
-      <div class="vjs-tracksettings-colors">
-        <div class="vjs-fg-color vjs-tracksetting">
-            <label class="vjs-label">Foreground</label>
-            <select>
-              <option value="">---</option>
-              <option value="#FFF">White</option>
+function captionOptionsMenuTemplate(uniqueId, dialogLabelId, dialogDescriptionId) {
+
+  let template = `
+    <div role="document">
+      <div role="heading" aria-level="1" id="${dialogLabelId}" class="vjs-control-text">Captions Settings Dialog</div>
+      <div id="${dialogDescriptionId}" class="vjs-control-text">Beginning of dialog window. Escape will cancel and close the window.</div>
+      <div class="vjs-tracksettings">
+        <div class="vjs-tracksettings-colors">
+          <fieldset class="vjs-fg-color vjs-tracksetting">
+            <legend>Text</legend>
+            <label class="vjs-label" for="captions-foreground-color-${uniqueId}">Color</label>
+            <select id="captions-foreground-color-${uniqueId}">
+              <option value="#FFF" selected>White</option>
               <option value="#000">Black</option>
               <option value="#F00">Red</option>
               <option value="#0F0">Green</option>
@@ -258,19 +272,19 @@ function captionOptionsMenuTemplate() {
               <option value="#0FF">Cyan</option>
             </select>
             <span class="vjs-text-opacity vjs-opacity">
-              <select>
-                <option value="">---</option>
-                <option value="1">Opaque</option>
+              <label class="vjs-label" for="captions-foreground-opacity-${uniqueId}">Transparency</label>
+              <select id="captions-foreground-opacity-${uniqueId}">
+                <option value="1" selected>Opaque</option>
                 <option value="0.5">Semi-Opaque</option>
               </select>
             </span>
-        </div> <!-- vjs-fg-color -->
-        <div class="vjs-bg-color vjs-tracksetting">
-            <label class="vjs-label">Background</label>
-            <select>
-              <option value="">---</option>
+          </fieldset>
+          <fieldset class="vjs-bg-color vjs-tracksetting">
+            <legend>Background</legend>
+            <label class="vjs-label" for="captions-background-color-${uniqueId}">Color</label>
+            <select id="captions-background-color-${uniqueId}">
+              <option value="#000" selected>Black</option>
               <option value="#FFF">White</option>
-              <option value="#000">Black</option>
               <option value="#F00">Red</option>
               <option value="#0F0">Green</option>
               <option value="#00F">Blue</option>
@@ -279,20 +293,20 @@ function captionOptionsMenuTemplate() {
               <option value="#0FF">Cyan</option>
             </select>
             <span class="vjs-bg-opacity vjs-opacity">
-                <select>
-                  <option value="">---</option>
-                  <option value="1">Opaque</option>
-                  <option value="0.5">Semi-Transparent</option>
-                  <option value="0">Transparent</option>
-                </select>
+              <label class="vjs-label" for="captions-background-opacity-${uniqueId}">Transparency</label>
+              <select id="captions-background-opacity-${uniqueId}">
+                <option value="1" selected>Opaque</option>
+                <option value="0.5">Semi-Transparent</option>
+                <option value="0">Transparent</option>
+              </select>
             </span>
-        </div> <!-- vjs-bg-color -->
-        <div class="window-color vjs-tracksetting">
-            <label class="vjs-label">Window</label>
-            <select>
-              <option value="">---</option>
+          </fieldset>
+          <fieldset class="window-color vjs-tracksetting">
+            <legend>Window</legend>
+            <label class="vjs-label" for="captions-window-color-${uniqueId}">Color</label>
+            <select id="captions-window-color-${uniqueId}">
+              <option value="#000" selected>Black</option>
               <option value="#FFF">White</option>
-              <option value="#000">Black</option>
               <option value="#F00">Red</option>
               <option value="#0F0">Green</option>
               <option value="#00F">Blue</option>
@@ -301,59 +315,59 @@ function captionOptionsMenuTemplate() {
               <option value="#0FF">Cyan</option>
             </select>
             <span class="vjs-window-opacity vjs-opacity">
-                <select>
-                  <option value="">---</option>
-                  <option value="1">Opaque</option>
-                  <option value="0.5">Semi-Transparent</option>
-                  <option value="0">Transparent</option>
-                </select>
+              <label class="vjs-label" for="captions-window-opacity-${uniqueId}">Transparency</label>
+              <select id="captions-window-opacity-${uniqueId}">
+                <option value="0" selected>Transparent</option>
+                <option value="0.5">Semi-Transparent</option>
+                <option value="1">Opaque</option>
+              </select>
             </span>
-        </div> <!-- vjs-window-color -->
+          </fieldset>
+        </div> <!-- vjs-tracksettings-colors -->
+        <div class="vjs-tracksettings-font">
+          <div class="vjs-font-percent vjs-tracksetting">
+            <label class="vjs-label" for="captions-font-size-${uniqueId}">Font Size</label>
+            <select id="captions-font-size-${uniqueId}">
+              <option value="0.50">50%</option>
+              <option value="0.75">75%</option>
+              <option value="1.00" selected>100%</option>
+              <option value="1.25">125%</option>
+              <option value="1.50">150%</option>
+              <option value="1.75">175%</option>
+              <option value="2.00">200%</option>
+              <option value="3.00">300%</option>
+              <option value="4.00">400%</option>
+            </select>
+          </div>
+          <div class="vjs-edge-style vjs-tracksetting">
+            <label class="vjs-label" for="captions-edge-style-${uniqueId}">Text Edge Style</label>
+            <select id="captions-edge-style-${uniqueId}">
+              <option value="none" selected>None</option>
+              <option value="raised">Raised</option>
+              <option value="depressed">Depressed</option>
+              <option value="uniform">Uniform</option>
+              <option value="dropshadow">Dropshadow</option>
+            </select>
+          </div>
+          <div class="vjs-font-family vjs-tracksetting">
+            <label class="vjs-label" for="captions-font-family-${uniqueId}">Font Family</label>
+            <select id="captions-font-family-${uniqueId}">
+              <option value="proportionalSansSerif" selected>Proportional Sans-Serif</option>
+              <option value="monospaceSansSerif">Monospace Sans-Serif</option>
+              <option value="proportionalSerif">Proportional Serif</option>
+              <option value="monospaceSerif">Monospace Serif</option>
+              <option value="casual">Casual</option>
+              <option value="script">Script</option>
+              <option value="small-caps">Small Caps</option>
+            </select>
+          </div>
+        </div> <!-- vjs-tracksettings-font -->
+        <div class="vjs-tracksettings-controls">
+          <button class="vjs-default-button">Defaults</button>
+          <button class="vjs-done-button">Done</button>
+        </div>
       </div> <!-- vjs-tracksettings -->
-      <div class="vjs-tracksettings-font">
-        <div class="vjs-font-percent vjs-tracksetting">
-          <label class="vjs-label">Font Size</label>
-          <select>
-            <option value="0.50">50%</option>
-            <option value="0.75">75%</option>
-            <option value="1.00" selected>100%</option>
-            <option value="1.25">125%</option>
-            <option value="1.50">150%</option>
-            <option value="1.75">175%</option>
-            <option value="2.00">200%</option>
-            <option value="3.00">300%</option>
-            <option value="4.00">400%</option>
-          </select>
-        </div> <!-- vjs-font-percent -->
-        <div class="vjs-edge-style vjs-tracksetting">
-          <label class="vjs-label">Text Edge Style</label>
-          <select>
-            <option value="none">None</option>
-            <option value="raised">Raised</option>
-            <option value="depressed">Depressed</option>
-            <option value="uniform">Uniform</option>
-            <option value="dropshadow">Dropshadow</option>
-          </select>
-        </div> <!-- vjs-edge-style -->
-        <div class="vjs-font-family vjs-tracksetting">
-          <label class="vjs-label">Font Family</label>
-          <select>
-            <option value="">Default</option>
-            <option value="monospaceSerif">Monospace Serif</option>
-            <option value="proportionalSerif">Proportional Serif</option>
-            <option value="monospaceSansSerif">Monospace Sans-Serif</option>
-            <option value="proportionalSansSerif">Proportional Sans-Serif</option>
-            <option value="casual">Casual</option>
-            <option value="script">Script</option>
-            <option value="small-caps">Small Caps</option>
-          </select>
-        </div> <!-- vjs-font-family -->
-      </div>
-    </div>
-    <div class="vjs-tracksettings-controls">
-      <button class="vjs-default-button">Defaults</button>
-      <button class="vjs-done-button">Done</button>
-    </div>`;
+    </div> <!--  role="document" -->`;
 
     return template;
 }

src/js/tracks/text-track.js

@@ -3,15 +3,15 @@
  */
 import TextTrackCueList from './text-track-cue-list';
 import * as Fn from '../utils/fn.js';
-import * as Guid from '../utils/guid.js';
-import * as browser from '../utils/browser.js';
-import * as TextTrackEnum from './text-track-enums';
+import {TextTrackKind, TextTrackMode} from './track-enums';
 import log from '../utils/log.js';
-import EventTarget from '../event-target';
 import document from 'global/document';
 import window from 'global/window';
+import Track from './track.js';
 import { isCrossOrigin } from '../utils/url.js';
 import XHR from 'xhr';
+import merge from '../utils/merge-options';
+import * as browser from '../utils/browser.js';
 
 /**
  * takes a webvtt file contents and parses it into cues
@@ -23,13 +23,14 @@ const parseCues = function(srcContent, track) {
   let parser = new window.WebVTT.Parser(window,
                                         window.vttjs,
                                         window.WebVTT.StringDecoder());
+  let errors = [];
 
   parser.oncue = function(cue) {
     track.addCue(cue);
   };
 
   parser.onparsingerror = function(error) {
-    log.error(error);
+    errors.push(error);
   };
 
   parser.onflush = function() {
@@ -40,10 +41,19 @@ const parseCues = function(srcContent, track) {
   };
 
   parser.parse(srcContent);
+  if (errors.length > 0) {
+    if (console.groupCollapsed) {
+      console.groupCollapsed(`Text Track parsing errors for ${track.src}`);
+    }
+    errors.forEach((error) => log.error(error));
+    if (console.groupEnd) {
+      console.groupEnd();
+    }
+  }
+
   parser.flush();
 };
 
-
 /**
  * load a track from a  specifed url
  *
@@ -88,7 +98,7 @@ const loadTrack = function(src, track) {
 
 /**
  * A single text track as defined in:
- * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack
  *
  * interface TextTrack : EventTarget {
  *   readonly attribute TextTrackKind kind;
@@ -110,21 +120,31 @@ const loadTrack = function(src, track) {
  * };
  *
  * @param {Object=} options Object of option names and values
- * @extends EventTarget
+ * @extends Track
  * @class TextTrack
  */
-class TextTrack extends EventTarget {
+class TextTrack extends Track {
   constructor(options = {}) {
-    super();
     if (!options.tech) {
       throw new Error('A tech was not provided.');
     }
 
-    let tt = this;
+    let settings = merge(options, {
+      kind: TextTrackKind[options.kind] || 'subtitles',
+      language: options.language || options.srclang || ''
+    });
+    let mode = TextTrackMode[settings.mode] || 'disabled';
+    let default_ = settings.default;
+
+    if (settings.kind === 'metadata' || settings.kind === 'chapters') {
+      mode = 'hidden';
+    }
+    // on IE8 this will be a document element
+    // for every other browser this will be a normal object
+    let tt = super(settings);
+    tt.tech_ = settings.tech;
 
     if (browser.IS_IE8) {
-      tt = document.createElement('custom');
-
       for (let prop in TextTrack.prototype) {
         if (prop !== 'constructor') {
           tt[prop] = TextTrack.prototype[prop];
@@ -132,19 +152,6 @@ class TextTrack extends EventTarget {
       }
     }
 
-    tt.tech_ = options.tech;
-
-    let mode = TextTrackEnum.TextTrackMode[options.mode] || 'disabled';
-    let kind = TextTrackEnum.TextTrackKind[options.kind] || 'subtitles';
-    let default_ = options.default;
-    let label = options.label || '';
-    let language = options.language || options.srclang || '';
-    let id = options.id || 'vjs_text_track_' + Guid.newGUID();
-
-    if (kind === 'metadata' || kind === 'chapters') {
-      mode = 'hidden';
-    }
-
     tt.cues_ = [];
     tt.activeCues_ = [];
 
@@ -163,34 +170,6 @@ class TextTrack extends EventTarget {
       tt.tech_.on('timeupdate', timeupdateHandler);
     }
 
-    Object.defineProperty(tt, 'kind', {
-      get() {
-        return kind;
-      },
-      set() {}
-    });
-
-    Object.defineProperty(tt, 'label', {
-      get() {
-        return label;
-      },
-      set() {}
-    });
-
-    Object.defineProperty(tt, 'language', {
-      get() {
-        return language;
-      },
-      set() {}
-    });
-
-    Object.defineProperty(tt, 'id', {
-      get() {
-        return id;
-      },
-      set() {}
-    });
-
     Object.defineProperty(tt, 'default', {
       get() {
         return default_;
@@ -203,7 +182,7 @@ class TextTrack extends EventTarget {
         return mode;
       },
       set(newMode) {
-        if (!TextTrackEnum.TextTrackMode[newMode]) {
+        if (!TextTrackMode[newMode]) {
           return;
         }
         mode = newMode;
@@ -271,16 +250,14 @@ class TextTrack extends EventTarget {
       set() {}
     });
 
-    if (options.src) {
-      tt.src = options.src;
-      loadTrack(options.src, tt);
+    if (settings.src) {
+      tt.src = settings.src;
+      loadTrack(settings.src, tt);
     } else {
       tt.loaded_ = true;
     }
 
-    if (browser.IS_IE8) {
-      return tt;
-    }
+    return tt;
   }
 
   /**

src/js/tracks/track-enums.js

@@ -0,0 +1,86 @@
+/**
+ * @file track-kinds.js
+ */
+
+/**
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind
+ *
+ * enum VideoTrackKind {
+ *   "alternative",
+ *   "captions",
+ *   "main",
+ *   "sign",
+ *   "subtitles",
+ *   "commentary",
+ *   "",
+ * };
+ */
+const VideoTrackKind = {
+  alternative: 'alternative',
+  captions: 'captions',
+  main: 'main',
+  sign: 'sign',
+  subtitles: 'subtitles',
+  commentary: 'commentary',
+};
+
+/**
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind
+ *
+ * enum AudioTrackKind {
+ *   "alternative",
+ *   "descriptions",
+ *   "main",
+ *   "main-desc",
+ *   "translation",
+ *   "commentary",
+ *   "",
+ * };
+ */
+const AudioTrackKind = {
+  alternative: 'alternative',
+  descriptions: 'descriptions',
+  main: 'main',
+  'main-desc': 'main-desc',
+  translation: 'translation',
+  commentary: 'commentary',
+};
+
+/**
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackkind
+ *
+ * enum TextTrackKind {
+ *   "subtitles",
+ *   "captions",
+ *   "descriptions",
+ *   "chapters",
+ *   "metadata"
+ * };
+ */
+const TextTrackKind = {
+  subtitles: 'subtitles',
+  captions: 'captions',
+  descriptions: 'descriptions',
+  chapters: 'chapters',
+  metadata: 'metadata'
+};
+
+
+
+/**
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode
+ *
+ * enum TextTrackMode { "disabled",  "hidden",  "showing" };
+ */
+const TextTrackMode = {
+  disabled: 'disabled',
+  hidden: 'hidden',
+  showing: 'showing'
+};
+
+/* jshint ignore:start */
+// we ignore jshint here because it does not see
+// AudioTrackKind as defined here
+export default { VideoTrackKind, AudioTrackKind, TextTrackKind, TextTrackMode };
+/* jshint ignore:end */
+

src/js/tracks/track-list.js

@@ -0,0 +1,148 @@
+/**
+ * @file track-list.js
+ */
+import EventTarget from '../event-target';
+import * as Fn from '../utils/fn.js';
+import * as browser from '../utils/browser.js';
+import document from 'global/document';
+
+/**
+ * Common functionaliy between Text, Audio, and Video TrackLists
+ * Interfaces defined in the following spec:
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html
+ *
+ * @param {Track[]} tracks A list of tracks to initialize the list with
+ * @param {Object} list the child object with inheritance done manually for ie8
+ * @extends EventTarget
+ * @class TrackList
+ */
+class TrackList extends EventTarget {
+  constructor(tracks = [], list = null) {
+    super();
+    if (!list) {
+      list = this;
+      if (browser.IS_IE8) {
+        list = document.createElement('custom');
+        for (let prop in TrackList.prototype) {
+          if (prop !== 'constructor') {
+            list[prop] = TrackList.prototype[prop];
+          }
+        }
+      }
+    }
+
+    list.tracks_ = [];
+    Object.defineProperty(list, 'length', {
+      get() {
+        return this.tracks_.length;
+      }
+    });
+
+    for (let i = 0; i < tracks.length; i++) {
+      list.addTrack_(tracks[i]);
+    }
+
+    return list;
+  }
+
+  /**
+   * Add a Track from TrackList
+   *
+   * @param {Mixed} track
+   * @method addTrack_
+   * @private
+   */
+  addTrack_(track) {
+    let index = this.tracks_.length;
+
+    if (!('' + index in this)) {
+      Object.defineProperty(this, index, {
+        get() {
+          return this.tracks_[index];
+        }
+      });
+    }
+
+    // Do not add duplicate tracks
+    if (this.tracks_.indexOf(track) === -1) {
+      this.tracks_.push(track);
+      this.trigger({
+        track,
+        type: 'addtrack'
+      });
+    }
+  }
+
+  /**
+   * Remove a Track from TrackList
+   *
+   * @param {Track} rtrack track to be removed
+   * @method removeTrack_
+   * @private
+   */
+  removeTrack_(rtrack) {
+    let track;
+
+    for (let i = 0, l = this.length; i < l; i++) {
+      if (this[i] === rtrack) {
+        track = this[i];
+        if (track.off) {
+          track.off();
+        }
+
+        this.tracks_.splice(i, 1);
+
+        break;
+      }
+    }
+
+    if (!track) {
+      return;
+    }
+
+    this.trigger({
+      track,
+      type: 'removetrack'
+    });
+  }
+
+  /**
+   * Get a Track from the TrackList by a tracks id
+   *
+   * @param {String} id - the id of the track to get
+   * @method getTrackById
+   * @return {Track}
+   * @private
+   */
+  getTrackById(id) {
+    let result = null;
+
+    for (let i = 0, l = this.length; i < l; i++) {
+      let track = this[i];
+      if (track.id === id) {
+        result = track;
+        break;
+      }
+    }
+
+    return result;
+  }
+}
+
+/**
+ * change - One or more tracks in the track list have been enabled or disabled.
+ * addtrack - A track has been added to the track list.
+ * removetrack - A track has been removed from the track list.
+ */
+TrackList.prototype.allowedEvents_ = {
+  change: 'change',
+  addtrack: 'addtrack',
+  removetrack: 'removetrack'
+};
+
+// emulate attribute EventHandler support to allow for feature detection
+for (let event in TrackList.prototype.allowedEvents_) {
+  TrackList.prototype['on' + event] = null;
+}
+
+export default TrackList;

src/js/tracks/track.js

@@ -0,0 +1,50 @@
+/**
+ * @file track.js
+ */
+import * as browser from '../utils/browser.js';
+import document from 'global/document';
+import * as Guid from '../utils/guid.js';
+import EventTarget from '../event-target';
+
+/**
+ * setup the common parts of an audio, video, or text track
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html
+ *
+ * @param {String} type The type of track we are dealing with audio|video|text
+ * @param {Object=} options Object of option names and values
+ * @extends EventTarget
+ * @class Track
+ */
+class Track extends EventTarget {
+  constructor(options = {}) {
+    super();
+
+    let track = this;
+    if (browser.IS_IE8) {
+      track = document.createElement('custom');
+      for (let prop in Track.prototype) {
+        if (prop !== 'constructor') {
+          track[prop] = Track.prototype[prop];
+        }
+      }
+    }
+
+    let trackProps = {
+      id: options.id || 'vjs_track_' + Guid.newGUID(),
+      kind: options.kind || '',
+      label: options.label || '',
+      language: options.language || ''
+    };
+
+    for (let key in trackProps) {
+      Object.defineProperty(track, key, {
+        get() { return trackProps[key]; },
+        set() {}
+      });
+    }
+
+    return track;
+  }
+}
+
+export default Track;

src/js/tracks/video-track-list.js

@@ -0,0 +1,123 @@
+/**
+ * @file video-track-list.js
+ */
+import TrackList from './track-list';
+import * as browser from '../utils/browser.js';
+import document from 'global/document';
+
+/**
+ * disable other video tracks before selecting the new one
+ *
+ * @param {Array|VideoTrackList} list list to work on
+ * @param {VideoTrack} track the track to skip
+ */
+const disableOthers = function(list, track) {
+  for (let i = 0; i < list.length; i++) {
+    if (track.id === list[i].id) {
+      continue;
+    }
+    // another audio track is enabled, disable it
+    list[i].selected = false;
+  }
+};
+
+/**
+* A list of possiblee video tracks. Most functionality is in the
+ * base class Tracklist and the spec for VideoTrackList is located at:
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist
+ *
+ * interface VideoTrackList : EventTarget {
+ *   readonly attribute unsigned long length;
+ *   getter VideoTrack (unsigned long index);
+ *   VideoTrack? getTrackById(DOMString id);
+ *   readonly attribute long selectedIndex;
+ *
+ *   attribute EventHandler onchange;
+ *   attribute EventHandler onaddtrack;
+ *   attribute EventHandler onremovetrack;
+ * };
+ *
+ * @param {VideoTrack[]} tracks a list of video tracks to instantiate the list with
+ # @extends TrackList
+ * @class VideoTrackList
+ */
+class VideoTrackList extends TrackList {
+
+  constructor(tracks = []) {
+    let list;
+
+    // make sure only 1 track is enabled
+    // sorted from last index to first index
+    for (let i = tracks.length - 1; i >= 0; i--) {
+      if (tracks[i].selected) {
+        disableOthers(tracks, tracks[i]);
+        break;
+      }
+    }
+
+    // IE8 forces us to implement inheritance ourselves
+    // as it does not support Object.defineProperty properly
+    if (browser.IS_IE8) {
+      list = document.createElement('custom');
+      for (let prop in TrackList.prototype) {
+        if (prop !== 'constructor') {
+          list[prop] = TrackList.prototype[prop];
+        }
+      }
+      for (let prop in VideoTrackList.prototype) {
+        if (prop !== 'constructor') {
+          list[prop] = VideoTrackList.prototype[prop];
+        }
+      }
+    }
+
+    list = super(tracks, list);
+    list.changing_ = false;
+
+    Object.defineProperty(list, 'selectedIndex', {
+      get() {
+        for (let i = 0; i < this.length; i++) {
+          if (this[i].selected) {
+            return i;
+          }
+        }
+        return -1;
+      },
+      set() {}
+    });
+
+    return list;
+  }
+
+  addTrack_(track) {
+    if (track.selected) {
+      disableOthers(this, track);
+    }
+
+    super.addTrack_(track);
+    // native tracks don't have this
+    if (!track.addEventListener) {
+      return;
+    }
+    track.addEventListener('selectedchange', () => {
+      if (this.changing_) {
+        return;
+      }
+      this.changing_ = true;
+      disableOthers(this, track);
+      this.changing_ = false;
+      this.trigger('change');
+    });
+  }
+
+  addTrack(track) {
+    this.addTrack_(track);
+  }
+
+  removeTrack(track) {
+    super.removeTrack_(track);
+  }
+
+}
+
+export default VideoTrackList;

src/js/tracks/video-track.js

@@ -0,0 +1,63 @@
+import {VideoTrackKind} from './track-enums';
+import Track from './track';
+import merge from '../utils/merge-options';
+import * as browser from '../utils/browser.js';
+
+/**
+ * A single video text track as defined in:
+ * @link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack
+ *
+ * interface VideoTrack {
+ *   readonly attribute DOMString id;
+ *   readonly attribute DOMString kind;
+ *   readonly attribute DOMString label;
+ *   readonly attribute DOMString language;
+ *   attribute boolean selected;
+ * };
+ *
+ * @param {Object=} options Object of option names and values
+ * @class VideoTrack
+ */
+class VideoTrack extends Track {
+  constructor(options = {}) {
+    let settings = merge(options, {
+      kind: VideoTrackKind[options.kind] || ''
+    });
+
+    // on IE8 this will be a document element
+    // for every other browser this will be a normal object
+    let track = super(settings);
+    let selected = false;
+
+    if (browser.IS_IE8) {
+      for (let prop in VideoTrack.prototype) {
+        if (prop !== 'constructor') {
+          track[prop] = VideoTrack.prototype[prop];
+        }
+      }
+    }
+
+    Object.defineProperty(track, 'selected', {
+      get() { return selected; },
+      set(newSelected) {
+        // an invalid or unchanged value
+        if (typeof newSelected !== 'boolean' || newSelected === selected) {
+          return;
+        }
+        selected = newSelected;
+        this.trigger('selectedchange');
+      }
+    });
+
+    // if the user sets this track to selected then
+    // set selected to that true value otherwise
+    // we keep it false
+    if (settings.selected) {
+      track.selected = settings.selected;
+    }
+
+    return track;
+  }
+}
+
+export default VideoTrack;

src/js/utils/browser.js

@@ -60,6 +60,9 @@ export const IS_FIREFOX = (/Firefox/i).test(USER_AGENT);
 export const IS_EDGE = (/Edge/i).test(USER_AGENT);
 export const IS_CHROME = !IS_EDGE && (/Chrome/i).test(USER_AGENT);
 export const IS_IE8 = (/MSIE\s8\.0/).test(USER_AGENT);
+export const IE_VERSION = (function(result){
+  return result && parseFloat(result[1]);
+})((/MSIE\s(\d+)\.\d/).exec(USER_AGENT));
 
 export const TOUCH_ENABLED = !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
 export const BACKGROUND_SIZE_SUPPORTED = 'backgroundSize' in document.createElement('video').style;

src/js/utils/create-deprecation-proxy.js

@@ -1,50 +0,0 @@
-import log from './log.js';
-
-/**
- * Object containing the default behaviors for available handler methods.
- *
- * @private
- * @type {Object}
- */
-const defaultBehaviors = {
-  get(obj, key) {
-    return obj[key];
-  },
-  set(obj, key, value) {
-    obj[key] = value;
-    return true;
-  }
-};
-
-/**
- * Expose private objects publicly using a Proxy to log deprecation warnings.
- *
- * Browsers that do not support Proxy objects will simply return the `target`
- * object, so it can be directly exposed.
- *
- * @param {Object} target The target object.
- * @param {Object} messages Messages to display from a Proxy. Only operations
- *                          with an associated message will be proxied.
- * @param {String} [messages.get]
- * @param {String} [messages.set]
- * @return {Object} A Proxy if supported or the `target` argument.
- */
-export default (target, messages={}) => {
-  if (typeof Proxy === 'function') {
-    let handler = {};
-
-    // Build a handler object based on those keys that have both messages
-    // and default behaviors.
-    Object.keys(messages).forEach(key => {
-      if (defaultBehaviors.hasOwnProperty(key)) {
-        handler[key] = function() {
-          log.warn(messages[key]);
-          return defaultBehaviors[key].apply(this, arguments);
-        };
-      }
-    });
-
-    return new Proxy(target, handler);
-  }
-  return target;
-};

src/js/utils/log.js

@@ -2,78 +2,96 @@
  * @file log.js
  */
 import window from 'global/window';
+import {IE_VERSION} from './browser';
 
 /**
- * Log plain debug messages
+ * Log messages to the console and history based on the type of message
+ *
+ * @param  {String} type
+ *         The name of the console method to use.
+ * @param  {Array} args
+ *         The arguments to be passed to the matching console method.
+ * @param  {Boolean} [stringify]
+ *         By default, only old IEs should get console argument stringification,
+ *         but this is exposed as a parameter to facilitate testing.
  */
-const log = function(){
-  _logType(null, arguments);
+export const logByType = (type, args, stringify = !!IE_VERSION && IE_VERSION < 11) => {
+  const console = window.console;
+
+  // If there's no console then don't try to output messages, but they will
+  // still be stored in `log.history`.
+  //
+  // Was setting these once outside of this function, but containing them
+  // in the function makes it easier to test cases where console doesn't exist
+  // when the module is executed.
+  const fn = console && console[type] || function(){};
+
+  if (type !== 'log') {
+
+    // add the type to the front of the message when it's not "log"
+    args.unshift(type.toUpperCase() + ':');
+  }
+
+  // add to history
+  log.history.push(args);
+
+  // add console prefix after adding to history
+  args.unshift('VIDEOJS:');
+
+  // IEs previous to 11 log objects uselessly as "[object Object]"; so, JSONify
+  // objects and arrays for those less-capable browsers.
+  if (stringify) {
+    args = args.map(a => {
+      if (a && typeof a === 'object' || Array.isArray(a)) {
+        try {
+          return JSON.stringify(a);
+        } catch (x) {}
+      }
+
+      // Cast to string before joining, so we get null and undefined explicitly
+      // included in output (as we would in a modern console).
+      return String(a);
+    }).join(' ');
+  }
+
+  // Old IE versions do not allow .apply() for console methods (they are
+  // reported as objects rather than functions).
+  if (!fn.apply) {
+    fn(args);
+  } else {
+    fn[Array.isArray(args) ? 'apply' : 'call'](console, args);
+  }
 };
 
+/**
+ * Log plain debug messages
+ *
+ * @function log
+ */
+function log(...args) {
+  logByType('log', args);
+}
+
 /**
  * Keep a history of log messages
+ *
  * @type {Array}
  */
 log.history = [];
 
 /**
  * Log error messages
+ *
+ * @method error
  */
-log.error = function(){
-  _logType('error', arguments);
-};
+log.error = (...args) => logByType('error', args);
 
 /**
  * Log warning messages
- */
-log.warn = function(){
-  _logType('warn', arguments);
-};
-
-/**
- * Log messages to the console and history based on the type of message
  *
- * @param  {String} type The type of message, or `null` for `log`
- * @param  {Object} args The args to be passed to the log
- * @private
- * @method _logType
+ * @method warn
  */
-function _logType(type, args){
-  // convert args to an array to get array functions
-  let argsArray = Array.prototype.slice.call(args);
-  // if there's no console then don't try to output messages
-  // they will still be stored in log.history
-  // Was setting these once outside of this function, but containing them
-  // in the function makes it easier to test cases where console doesn't exist
-  let noop = function(){};
+log.warn = (...args) => logByType('warn', args);
 
-  let console = window['console'] || {
-    'log': noop,
-    'warn': noop,
-    'error': noop
-  };
-
-  if (type) {
-    // add the type to the front of the message
-    argsArray.unshift(type.toUpperCase()+':');
-  } else {
-    // default to log with no prefix
-    type = 'log';
-  }
-
-  // add to history
-  log.history.push(argsArray);
-
-  // add console prefix after adding to history
-  argsArray.unshift('VIDEOJS:');
-
-  // call appropriate log function
-  if (console[type].apply) {
-    console[type].apply(console, argsArray);
-  } else {
-    // ie8 doesn't allow error.apply, but it will just join() the array anyway
-    console[type](argsArray.join(' '));
-  }
-}
 
 export default log;

src/js/video.js

@@ -13,8 +13,9 @@ import plugin from './plugins.js';
 import mergeOptions from '../../src/js/utils/merge-options.js';
 import * as Fn from './utils/fn.js';
 import TextTrack from './tracks/text-track.js';
+import AudioTrack from './tracks/audio-track.js';
+import VideoTrack from './tracks/video-track.js';
 
-import assign from 'object.assign';
 import { createTimeRanges } from './utils/time-ranges.js';
 import formatTime from './utils/format-time.js';
 import log from './utils/log.js';
@@ -23,7 +24,6 @@ import * as browser from './utils/browser.js';
 import * as Url from './utils/url.js';
 import extendFn from './extend.js';
 import merge from 'lodash-compat/object/merge';
-import createDeprecationProxy from './utils/create-deprecation-proxy.js';
 import xhr from 'xhr';
 
 // Include the built-in techs
@@ -53,7 +53,7 @@ if (typeof HTMLVideoElement === 'undefined') {
  * @mixes videojs
  * @method videojs
  */
-let videojs = function(id, options, ready){
+function videojs(id, options, ready){
   let tag; // Element of ID
 
   // Allow for element or ID to be passed in
@@ -97,7 +97,7 @@ let videojs = function(id, options, ready){
   // Element may have a player attr referring to an already created player instance.
   // If not, set up a new player and return the instance.
   return tag['player'] || Player.players[tag.playerId] || new Player(tag, options, ready);
-};
+}
 
 // Add default styles
 if (window.VIDEOJS_NO_DYNAMIC_STYLE !== true) {
@@ -151,21 +151,15 @@ videojs.options = Player.prototype.options_;
  * @mixes videojs
  * @method getPlayers
  */
-videojs.getPlayers = function() {
-  return Player.players;
-};
+videojs.getPlayers = () => Player.players;
 
 /**
- * For backward compatibility, expose players object.
+ * Expose players object.
  *
- * @deprecated
  * @memberOf videojs
- * @property {Object|Proxy} players
+ * @property {Object} players
  */
-videojs.players = createDeprecationProxy(Player.players, {
-  get: 'Access to videojs.players is deprecated; use videojs.getPlayers instead',
-  set: 'Modification of videojs.players is deprecated'
-});
+videojs.players = Player.players;
 
 /**
  * Get a component class object by name
@@ -549,6 +543,22 @@ videojs.xhr = xhr;
  */
 videojs.TextTrack = TextTrack;
 
+/**
+ * export the AudioTrack class so that source handlers can create
+ * AudioTracks and then add them to the players AudioTrackList
+ *
+ * @type {Function}
+ */
+videojs.AudioTrack = AudioTrack;
+
+/**
+ * export the VideoTrack class so that source handlers can create
+ * VideoTracks and then add them to the players VideoTrackList
+ *
+ * @type {Function}
+ */
+videojs.VideoTrack = VideoTrack;
+
 /**
  * Determines, via duck typing, whether or not a value is a DOM element.
  *

test/api/api.js

@@ -59,7 +59,9 @@ test('should be able to access expected player API methods', function() {
   ok(player.usingNativeControls, 'usingNativeControls exists');
   ok(player.isFullscreen, 'isFullscreen exists');
 
-  // TextTrack methods
+  // Track methods
+  ok(player.audioTracks, 'audioTracks exists');
+  ok(player.videoTracks, 'videoTracks exists');
   ok(player.textTracks, 'textTracks exists');
   ok(player.remoteTextTrackEls, 'remoteTextTrackEls exists');
   ok(player.remoteTextTracks, 'remoteTextTracks exists');

test/globals-shim.js

@@ -1,3 +1,4 @@
+import 'es6-shim';
 import document from 'global/document';
 import window from 'global/window';
 import sinon from 'sinon';

test/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>VideoJS Tests</title>

test/unit/button.test.js

@@ -4,7 +4,7 @@ import TestHelpers from './test-helpers.js';
 q.module('Button');
 
 test('should localize its text', function(){
-  expect(2);
+  expect(3);
 
   var player, testButton, el;
 
@@ -22,5 +22,6 @@ test('should localize its text', function(){
   el = testButton.createEl();
 
   ok(el.nodeName.toLowerCase().match('button'));
-  ok(el.innerHTML.match('Juego'));
+  ok(el.innerHTML.match(/vjs-control-text"?>Juego/));
+  equal(el.getAttribute('title'), 'Juego');
 });

test/unit/controls.test.js

@@ -2,6 +2,7 @@ import VolumeControl from '../../src/js/control-bar/volume-control/volume-contro
 import MuteToggle from '../../src/js/control-bar/mute-toggle.js';
 import PlaybackRateMenuButton from '../../src/js/control-bar/playback-rate-menu/playback-rate-menu-button.js';
 import Slider from '../../src/js/slider/slider.js';
+import FullscreenToggle from '../../src/js/control-bar/fullscreen-toggle.js';
 import TestHelpers from './test-helpers.js';
 import document from 'global/document';
 
@@ -112,3 +113,14 @@ test('should hide playback rate control if it\'s not supported', function(){
 
   ok(playbackRate.el().className.indexOf('vjs-hidden') >= 0, 'playbackRate is not hidden');
 });
+
+QUnit.test('Fullscreen control text should be correct when fullscreenchange is triggered', function() {
+  const player = TestHelpers.makePlayer();
+  const fullscreentoggle = new FullscreenToggle(player);
+  player.isFullscreen(true);
+  player.trigger('fullscreenchange');
+  QUnit.equal(fullscreentoggle.controlText(), 'Non-Fullscreen', 'Control Text is correct while switching to fullscreen mode');
+  player.isFullscreen(false);
+  player.trigger('fullscreenchange');
+  QUnit.equal(fullscreentoggle.controlText(), 'Fullscreen', 'Control Text is correct while switching back to normal mode');
+});

test/unit/player.test.js

@@ -247,7 +247,7 @@ test('should hide the poster when play is called', function() {
   });
 
   equal(player.hasStarted(), false, 'the show poster flag is true before play');
-  player.play();
+  player.tech_.trigger('play');
   equal(player.hasStarted(), true, 'the show poster flag is false after play');
 
   player.tech_.trigger('loadstart');
@@ -255,7 +255,7 @@ test('should hide the poster when play is called', function() {
         false,
         'the resource selection algorithm sets the show poster flag to true');
 
-  player.play();
+  player.tech_.trigger('play');
   equal(player.hasStarted(), true, 'the show poster flag is false after play');
 });
 
@@ -839,6 +839,24 @@ expect(3);
   strictEqual(player.localize('Good'), 'Brilliant', 'Ignored case');
 });
 
+test('inherits language from parent element', function() {
+  var fixture = document.getElementById('qunit-fixture');
+  var oldLang = fixture.getAttribute('lang');
+  var player;
+
+  fixture.setAttribute('lang', 'x-test');
+  player = TestHelpers.makePlayer();
+
+  equal(player.language(), 'x-test', 'player inherits parent element language');
+
+  player.dispose();
+  if (oldLang) {
+    fixture.setAttribute('lang', oldLang);
+  } else {
+    fixture.removeAttribute('lang');
+  }
+});
+
 test('should return correct values for canPlayType', function(){
   var player = TestHelpers.makePlayer();
 

test/unit/plugins.test.js

@@ -1,3 +1,4 @@
+import {IE_VERSION} from '../../src/js/utils/browser';
 import registerPlugin from '../../src/js/plugins.js';
 import Player from '../../src/js/player.js';
 import TestHelpers from './test-helpers.js';
@@ -169,14 +170,18 @@ test('Plugins should not get events after stopImmediatePropagation is called', f
 });
 
 test('Plugin that does not exist logs an error', function() {
+
   // stub the global log functions
   var console, log, error, origConsole;
-  origConsole = window['console'];
-  console = window['console'] = {
+
+  origConsole = window.console;
+
+  console = window.console = {
     log: function(){},
     warn: function(){},
     error: function(){}
   };
+
   log = sinon.stub(console, 'log');
   error = sinon.stub(console, 'error');
 
@@ -190,11 +195,16 @@ test('Plugin that does not exist logs an error', function() {
   });
 
   ok(error.called, 'error was called');
-  equal(error.firstCall.args[2], 'Unable to find plugin:');
-  equal(error.firstCall.args[3], 'nonExistingPlugin');
+
+  if (IE_VERSION && IE_VERSION < 11) {
+    equal(error.firstCall.args[0], 'VIDEOJS: ERROR: Unable to find plugin: nonExistingPlugin');
+  } else {
+    equal(error.firstCall.args[2], 'Unable to find plugin:');
+    equal(error.firstCall.args[3], 'nonExistingPlugin');
+  }
 
   // tear down logging stubs
   log.restore();
   error.restore();
-  window['console'] = origConsole;
+  window.console = origConsole;
 });

test/unit/tech/flash.test.js

@@ -8,16 +8,16 @@ test('Flash.canPlaySource', function() {
   var canPlaySource = Flash.canPlaySource;
 
   // Supported
-  ok(canPlaySource({ type: 'video/mp4; codecs=avc1.42E01E,mp4a.40.2' }), 'codecs supported');
-  ok(canPlaySource({ type: 'video/mp4' }), 'video/mp4 supported');
-  ok(canPlaySource({ type: 'video/x-flv' }), 'video/x-flv supported');
-  ok(canPlaySource({ type: 'video/flv' }), 'video/flv supported');
-  ok(canPlaySource({ type: 'video/m4v' }), 'video/m4v supported');
-  ok(canPlaySource({ type: 'VIDEO/FLV' }), 'capitalized mime type');
+  ok(canPlaySource({ type: 'video/mp4; codecs=avc1.42E01E,mp4a.40.2' }, {}), 'codecs supported');
+  ok(canPlaySource({ type: 'video/mp4' }, {}), 'video/mp4 supported');
+  ok(canPlaySource({ type: 'video/x-flv' }, {}), 'video/x-flv supported');
+  ok(canPlaySource({ type: 'video/flv' }, {}), 'video/flv supported');
+  ok(canPlaySource({ type: 'video/m4v' }, {}), 'video/m4v supported');
+  ok(canPlaySource({ type: 'VIDEO/FLV' }, {}), 'capitalized mime type');
 
   // Not supported
-  ok(!canPlaySource({ type: 'video/webm; codecs="vp8, vorbis"' }));
-  ok(!canPlaySource({ type: 'video/webm' }));
+  ok(!canPlaySource({ type: 'video/webm; codecs="vp8, vorbis"' }, {}));
+  ok(!canPlaySource({ type: 'video/webm' }, {}));
 });
 
 test('currentTime', function() {
@@ -86,14 +86,13 @@ test('dispose removes the object element even before ready fires', function() {
   // This test appears to test bad functionaly that was fixed
   // so it's debateable whether or not it's useful
   let dispose = Flash.prototype.dispose;
-  let mockFlash = {};
+  let mockFlash = new MockFlash();
   let noop = function(){};
 
   // Mock required functions for dispose
   mockFlash.off = noop;
   mockFlash.trigger = noop;
   mockFlash.el_ = {};
-  mockFlash.textTracks = () => ([]);
 
   dispose.call(mockFlash);
   strictEqual(mockFlash.el_, null, 'swf el is nulled');
@@ -148,10 +147,10 @@ test('canPlayType should select the correct types to play', function () {
 test('canHandleSource should be able to work with src objects without a type', function () {
   let canHandleSource = Flash.nativeSourceHandler.canHandleSource;
 
-  equal('maybe', canHandleSource({ src: 'test.video.mp4' }), 'should guess that it is a mp4 video');
-  equal('maybe', canHandleSource({ src: 'test.video.m4v' }), 'should guess that it is a m4v video');
-  equal('maybe', canHandleSource({ src: 'test.video.flv' }), 'should guess that it is a flash video');
-  equal('', canHandleSource({ src: 'test.video.wgg' }), 'should return empty string if it can not play the video');
+  equal('maybe', canHandleSource({ src: 'test.video.mp4' }, {}), 'should guess that it is a mp4 video');
+  equal('maybe', canHandleSource({ src: 'test.video.m4v' }, {}), 'should guess that it is a m4v video');
+  equal('maybe', canHandleSource({ src: 'test.video.flv' }, {}), 'should guess that it is a flash video');
+  equal('', canHandleSource({ src: 'test.video.wgg' }, {}), 'should return empty string if it can not play the video');
 });
 
 test('seekable', function() {
@@ -198,6 +197,33 @@ test('play after ended seeks to the beginning', function() {
   equal(seeks[0], 0, 'seeked to the beginning');
 });
 
+test('duration returns NaN, Infinity or duration according to the HTML standard', function() {
+  let duration = Flash.prototype.duration;
+  let mockedDuration = -1;
+  let mockedReadyState = 0;
+  let result;
+  let mockFlash = {
+    el_: {
+      vjs_getProperty() {
+        return mockedDuration;
+      }
+    },
+    readyState: function() {
+      return mockedReadyState;
+    }
+  };
+  result = duration.call(mockFlash);
+  ok(Number.isNaN(result), 'duration returns NaN when readyState equals 0');
+
+  mockedReadyState = 1;
+  result = duration.call(mockFlash);
+  ok(!Number.isFinite(result), 'duration returns Infinity when duration property is less then 0');
+
+  mockedDuration = 1;
+  result = duration.call(mockFlash);
+  equal(result, 1, 'duration returns duration property when readeyState and duration property are both higher than 0');
+});
+
 // fake out the <object> interaction but leave all the other logic intact
 class MockFlash extends Flash {
   constructor() {

test/unit/tech/html5.test.js

@@ -190,16 +190,16 @@ test('native source handler canHandleSource', function(){
 
   var canHandleSource = Html5.nativeSourceHandler.canHandleSource;
 
-  equal(canHandleSource({ type: 'video/mp4', src: 'video.flv' }), 'maybe', 'Native source handler reported type support');
-  equal(canHandleSource({ src: 'http://www.example.com/video.mp4' }), 'maybe', 'Native source handler reported extension support');
-  equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo&token=bar' }), 'maybe', 'Native source handler reported extension support');
-  equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo' }), 'maybe', 'Native source handler reported extension support');
+  equal(canHandleSource({ type: 'video/mp4', src: 'video.flv' }, {}), 'maybe', 'Native source handler reported type support');
+  equal(canHandleSource({ src: 'http://www.example.com/video.mp4' }, {}), 'maybe', 'Native source handler reported extension support');
+  equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo&token=bar' }, {}), 'maybe', 'Native source handler reported extension support');
+  equal(canHandleSource({ src: 'https://example.com/video.sd.mp4?s=foo' }, {}), 'maybe', 'Native source handler reported extension support');
 
   // Test for issue videojs/video.js#1785 and other potential failures
-  equal(canHandleSource({ src: '' }), '', 'Native source handler handled empty src');
-  equal(canHandleSource({}), '', 'Native source handler handled empty object');
-  equal(canHandleSource({ src: 'foo' }), '', 'Native source handler handled bad src');
-  equal(canHandleSource({ type: 'foo' }), '', 'Native source handler handled bad type');
+  equal(canHandleSource({ src: '' }, {}), '', 'Native source handler handled empty src');
+  equal(canHandleSource({}, {}), '', 'Native source handler handled empty object');
+  equal(canHandleSource({ src: 'foo' }, {}), '', 'Native source handler handled bad src');
+  equal(canHandleSource({ type: 'foo' }, {}), '', 'Native source handler handled bad type');
 
   // Reset test video canPlayType
   Html5.TEST_VID.canPlayType = origCPT;
@@ -249,6 +249,97 @@ if (Html5.supportsNativeTextTracks()) {
     equal(adds[2][0], rems[2][0], 'removetrack event handler removed');
   });
 }
+
+if (Html5.supportsNativeAudioTracks()) {
+  test('add native audioTrack listeners on startup', function() {
+    let adds = [];
+    let rems = [];
+    let at = {
+      length: 0,
+      addEventListener: (type, fn) => adds.push([type, fn]),
+      removeEventListener: (type, fn) => rems.push([type, fn]),
+    };
+    let el = document.createElement('div');
+    el.audioTracks = at;
+
+    let htmlTech = new Html5({el});
+
+    equal(adds[0][0], 'change', 'change event handler added');
+    equal(adds[1][0], 'addtrack', 'addtrack event handler added');
+    equal(adds[2][0], 'removetrack', 'removetrack event handler added');
+  });
+
+  test('remove all tracks from emulated list on dispose', function() {
+    let adds = [];
+    let rems = [];
+    let at = {
+      length: 0,
+      addEventListener: (type, fn) => adds.push([type, fn]),
+      removeEventListener: (type, fn) => rems.push([type, fn]),
+    };
+    let el = document.createElement('div');
+    el.audioTracks = at;
+
+    let htmlTech = new Html5({el});
+    htmlTech.dispose();
+
+    equal(adds[0][0], 'change', 'change event handler added');
+    equal(adds[1][0], 'addtrack', 'addtrack event handler added');
+    equal(adds[2][0], 'removetrack', 'removetrack event handler added');
+    equal(rems[0][0], 'change', 'change event handler removed');
+    equal(rems[1][0], 'addtrack', 'addtrack event handler removed');
+    equal(rems[2][0], 'removetrack', 'removetrack event handler removed');
+    equal(adds[0][0], rems[0][0], 'change event handler removed');
+    equal(adds[1][0], rems[1][0], 'addtrack event handler removed');
+    equal(adds[2][0], rems[2][0], 'removetrack event handler removed');
+  });
+}
+
+if (Html5.supportsNativeVideoTracks()) {
+  test('add native videoTrack listeners on startup', function() {
+    let adds = [];
+    let rems = [];
+    let vt = {
+      length: 0,
+      addEventListener: (type, fn) => adds.push([type, fn]),
+      removeEventListener: (type, fn) => rems.push([type, fn]),
+    };
+    let el = document.createElement('div');
+    el.videoTracks = vt;
+
+    let htmlTech = new Html5({el});
+
+    equal(adds[0][0], 'change', 'change event handler added');
+    equal(adds[1][0], 'addtrack', 'addtrack event handler added');
+    equal(adds[2][0], 'removetrack', 'removetrack event handler added');
+  });
+
+  test('remove all tracks from emulated list on dispose', function() {
+    let adds = [];
+    let rems = [];
+    let vt = {
+      length: 0,
+      addEventListener: (type, fn) => adds.push([type, fn]),
+      removeEventListener: (type, fn) => rems.push([type, fn]),
+    };
+    let el = document.createElement('div');
+    el.videoTracks = vt;
+
+    let htmlTech = new Html5({el});
+    htmlTech.dispose();
+
+    equal(adds[0][0], 'change', 'change event handler added');
+    equal(adds[1][0], 'addtrack', 'addtrack event handler added');
+    equal(adds[2][0], 'removetrack', 'removetrack event handler added');
+    equal(rems[0][0], 'change', 'change event handler removed');
+    equal(rems[1][0], 'addtrack', 'addtrack event handler removed');
+    equal(rems[2][0], 'removetrack', 'removetrack event handler removed');
+    equal(adds[0][0], rems[0][0], 'change event handler removed');
+    equal(adds[1][0], rems[1][0], 'addtrack event handler removed');
+    equal(adds[2][0], rems[2][0], 'removetrack event handler removed');
+  });
+}
+
 test('should always return currentSource_ if set', function(){
   let currentSrc = Html5.prototype.currentSrc;
   equal(currentSrc.call({el_: {currentSrc:'test1'}}), 'test1', 'sould return source from element if nothing else set');
@@ -351,3 +442,20 @@ test('Html5#reset calls Html5.resetMediaElement when called', function() {
 
   Html5.resetMediaElement = oldResetMedia;
 });
+
+QUnit.test('Exception in play promise should be caught', function() {
+  const oldEl = tech.el_;
+  
+  tech.el_ = {
+    play: () => {
+      return new Promise(function(resolve, reject) {
+        reject(new DOMException());
+      });
+    }
+  };
+
+  tech.play();
+  QUnit.ok(true, 'error was caught');
+ 
+  tech.el_ = oldEl;
+});

test/unit/tech/tech.test.js

@@ -7,6 +7,12 @@ import Button from '../../../src/js/button.js';
 import { createTimeRange } from '../../../src/js/utils/time-ranges.js';
 import extendFn from '../../../src/js/extend.js';
 import MediaError from '../../../src/js/media-error.js';
+import AudioTrack from '../../../src/js/tracks/audio-track';
+import VideoTrack from '../../../src/js/tracks/video-track';
+import TextTrack from '../../../src/js/tracks/text-track';
+import AudioTrackList from '../../../src/js/tracks/audio-track-list';
+import VideoTrackList from '../../../src/js/tracks/video-track-list';
+import TextTrackList from '../../../src/js/tracks/text-track-list';
 
 q.module('Media Tech', {
   'setup': function() {
@@ -14,20 +20,10 @@ q.module('Media Tech', {
     this.clock = sinon.useFakeTimers();
     this.featuresProgessEvents = Tech.prototype['featuresProgessEvents'];
     Tech.prototype['featuresProgressEvents'] = false;
-    Tech.prototype['featuresNativeTextTracks'] = true;
-    oldTextTracks = Tech.prototype.textTracks;
-    Tech.prototype.textTracks = function() {
-      return {
-        addEventListener: Function.prototype,
-        removeEventListener: Function.prototype
-      };
-    };
   },
   'teardown': function() {
     this.clock.restore();
     Tech.prototype['featuresProgessEvents'] = this.featuresProgessEvents;
-    Tech.prototype['featuresNativeTextTracks'] = false;
-    Tech.prototype.textTracks = oldTextTracks;
   }
 });
 
@@ -103,6 +99,54 @@ test('dispose() should stop time tracking', function() {
   ok(true, 'no exception was thrown');
 });
 
+test('dispose() should clear all tracks that are passed when its created', function() {
+  var audioTracks = new AudioTrackList([new AudioTrack(), new AudioTrack()]);
+  var videoTracks = new VideoTrackList([new VideoTrack(), new VideoTrack()]);
+  var textTracks = new TextTrackList([new TextTrack({tech: {}}), new TextTrack({tech: {}})]);
+
+  equal(audioTracks.length, 2, 'should have two audio tracks at the start');
+  equal(videoTracks.length, 2, 'should have two video tracks at the start');
+  equal(textTracks.length, 2, 'should have two text tracks at the start');
+
+  var tech = new Tech({audioTracks, videoTracks, textTracks});
+  equal(tech.videoTracks().length, videoTracks.length, 'should hold video tracks that we passed');
+  equal(tech.audioTracks().length, audioTracks.length, 'should hold audio tracks that we passed');
+  equal(tech.textTracks().length, textTracks.length, 'should hold text tracks that we passed');
+
+  tech.dispose();
+
+  equal(audioTracks.length, 0, 'should have zero audio tracks after dispose');
+  equal(videoTracks.length, 0, 'should have zero video tracks after dispose');
+  equal(textTracks.length, 0, 'should have zero text tracks after dispose');
+});
+
+test('dispose() should clear all tracks that are added after creation', function() {
+  var tech = new Tech();
+
+  tech.addRemoteTextTrack({});
+  tech.addRemoteTextTrack({});
+
+  tech.audioTracks().addTrack_(new AudioTrack());
+  tech.audioTracks().addTrack_(new AudioTrack());
+
+  tech.videoTracks().addTrack_(new VideoTrack());
+  tech.videoTracks().addTrack_(new VideoTrack());
+
+  equal(tech.audioTracks().length, 2, 'should have two audio tracks at the start');
+  equal(tech.videoTracks().length, 2, 'should have two video tracks at the start');
+  equal(tech.textTracks().length, 2, 'should have two video tracks at the start');
+  equal(tech.remoteTextTrackEls().length, 2, 'should have two remote text tracks els');
+  equal(tech.remoteTextTracks().length, 2, 'should have two remote text tracks');
+
+  tech.dispose();
+
+  equal(tech.audioTracks().length, 0, 'should have zero audio tracks after dispose');
+  equal(tech.videoTracks().length, 0, 'should have zero video tracks after dispose');
+  equal(tech.remoteTextTrackEls().length, 0, 'should have zero remote text tracks els');
+  equal(tech.remoteTextTracks().length, 0, 'should have zero remote text tracks');
+  equal(tech.textTracks().length, 0, 'should have zero video tracks after dispose');
+});
+
 test('should add the source handler interface to a tech', function(){
   var sourceA = { src: 'foo.mp4', type: 'video/mp4' };
   var sourceB = { src: 'no-support', type: 'no-support' };
@@ -141,15 +185,17 @@ test('should add the source handler interface to a tech', function(){
       }
       return '';
     },
-    canHandleSource: function(source){
+    canHandleSource: function(source, options){
+      strictEqual(tech.options_, options, 'the tech options were passed to the source handler canHandleSource');
       if (source.type !=='no-support') {
         return 'probably';
       }
       return '';
     },
-    handleSource: function(s, t){
+    handleSource: function(s, t, o){
       strictEqual(tech, t, 'the tech instance was passed to the source handler');
       strictEqual(sourceA, s, 'the tech instance was passed to the source handler');
+      strictEqual(tech.options_, o, 'the tech options were passed to the source handler handleSource');
       return new handlerInternalState();
     }
   };
@@ -158,10 +204,10 @@ test('should add the source handler interface to a tech', function(){
     canPlayType: function(type){
       return ''; // no support
     },
-    canHandleSource: function(source){
+    canHandleSource: function(source, options){
       return ''; // no support
     },
-    handleSource: function(source, tech){
+    handleSource: function(source, tech, options){
       ok(false, 'handlerTwo supports nothing and should never be called');
     }
   };
@@ -173,24 +219,60 @@ test('should add the source handler interface to a tech', function(){
   strictEqual(MyTech.sourceHandlers[0], handlerTwo, 'handlerTwo was registered at the correct index (0)');
 
   // Test handler selection
-  strictEqual(MyTech.selectSourceHandler(sourceA), handlerOne, 'handlerOne was selected to handle the valid source');
-  strictEqual(MyTech.selectSourceHandler(sourceB), null, 'no handler was selected to handle the invalid source');
+  strictEqual(MyTech.selectSourceHandler(sourceA, tech.options_), handlerOne, 'handlerOne was selected to handle the valid source');
+  strictEqual(MyTech.selectSourceHandler(sourceB, tech.options_), null, 'no handler was selected to handle the invalid source');
 
   // Test canPlayType return values
   strictEqual(MyTech.canPlayType(sourceA.type), 'probably', 'the Tech returned probably for the valid source');
   strictEqual(MyTech.canPlayType(sourceB.type), '', 'the Tech returned an empty string for the invalid source');
 
   // Test canPlaySource return values
-  strictEqual(MyTech.canPlaySource(sourceA), 'probably', 'the Tech returned probably for the valid source');
-  strictEqual(MyTech.canPlaySource(sourceB), '', 'the Tech returned an empty string for the invalid source');
+  strictEqual(MyTech.canPlaySource(sourceA, tech.options_), 'probably', 'the Tech returned probably for the valid source');
+  strictEqual(MyTech.canPlaySource(sourceB, tech.options_), '', 'the Tech returned an empty string for the invalid source');
+
+  tech.addRemoteTextTrack({});
+  tech.addRemoteTextTrack({});
+
+  tech.audioTracks().addTrack_(new AudioTrack());
+  tech.audioTracks().addTrack_(new AudioTrack());
+
+  tech.videoTracks().addTrack_(new VideoTrack());
+  tech.videoTracks().addTrack_(new VideoTrack());
+
+  equal(tech.audioTracks().length, 2, 'should have two audio tracks at the start');
+  equal(tech.videoTracks().length, 2, 'should have two video tracks at the start');
+  equal(tech.textTracks().length, 2, 'should have two video tracks at the start');
+  equal(tech.remoteTextTrackEls().length, 2, 'should have two remote text tracks els');
+  equal(tech.remoteTextTracks().length, 2, 'should have two remote text tracks');
 
   // Pass a source through the source handler process of a tech instance
   tech.setSource(sourceA);
+
+  // verify that the Tracks are still there
+  equal(tech.audioTracks().length, 2, 'should have two audio tracks at the start');
+  equal(tech.videoTracks().length, 2, 'should have two video tracks at the start');
+  equal(tech.textTracks().length, 2, 'should have two video tracks at the start');
+  equal(tech.remoteTextTrackEls().length, 2, 'should have two remote text tracks els');
+  equal(tech.remoteTextTracks().length, 2, 'should have two remote text tracks');
+
+  strictEqual(tech.currentSource_, sourceA, 'sourceA was handled and stored');
+  ok(tech.sourceHandler_.dispose, 'the handlerOne state instance was stored');
+
+  // Pass a second source
+  tech.setSource(sourceA);
   strictEqual(tech.currentSource_, sourceA, 'sourceA was handled and stored');
   ok(tech.sourceHandler_.dispose, 'the handlerOne state instance was stored');
 
+  // verify that all the tracks were removed as we got a new source
+  equal(tech.audioTracks().length, 0, 'should have zero audio tracks');
+  equal(tech.videoTracks().length, 0, 'should have zero video tracks');
+  equal(tech.textTracks().length, 2, 'should have two text tracks');
+  equal(tech.remoteTextTrackEls().length, 2, 'should have two remote text tracks els');
+  equal(tech.remoteTextTracks().length, 2, 'should have two remote text tracks');
+
   // Check that the handler dipose method works
-  ok(!disposeCalled, 'dispose has not been called for the handler yet');
+  ok(disposeCalled, 'dispose has been called for the handler yet');
+  disposeCalled = false;
   tech.dispose();
   ok(disposeCalled, 'the handler dispose method was called when the tech was disposed');
 });
@@ -261,7 +343,7 @@ test('delegates seekable to the source handler', function(){
     canHandleSource: function() {
       return true;
     },
-    handleSource: function(source, tech) {
+    handleSource: function(source, tech, options) {
       return handler;
     }
   });
@@ -288,3 +370,126 @@ test('Tech.isTech returns correct answers for techs and components', function()
   ok(!isTech(new Button({}, {})), 'A Button instance is not a Tech');
   ok(!isTech(isTech), 'A function is not a Tech');
 });
+
+test('Tech#setSource clears currentSource_ after repeated loadstart', function() {
+  let disposed = false;
+  let MyTech = extendFn(Tech);
+
+  Tech.withSourceHandlers(MyTech);
+  let tech = new MyTech();
+
+  var sourceHandler = {
+    canPlayType: function(type) {
+      return true;
+    },
+    canHandleSource: function(source, options) {
+      return true;
+    },
+    handleSource: function(source, tech, options) {
+      return {
+        dispose: function() {
+          disposed = true;
+        }
+      };
+    }
+  };
+
+  // Test registering source handlers
+  MyTech.registerSourceHandler(sourceHandler);
+
+  // First loadstart
+  tech.setSource('test');
+  tech.currentSource_ = 'test';
+  tech.trigger('loadstart');
+  equal(tech.currentSource_, 'test', 'Current source is test');
+
+  // Second loadstart
+  tech.trigger('loadstart');
+  equal(tech.currentSource_, null, 'Current source is null');
+  equal(disposed, true, 'disposed is true');
+
+  // Third loadstart
+  tech.currentSource_ = 'test';
+  tech.trigger('loadstart');
+  equal(tech.currentSource_, null, 'Current source is still null');
+
+});
+
+test('setSource after tech dispose should dispose source handler once', function(){
+  let MyTech = extendFn(Tech);
+  Tech.withSourceHandlers(MyTech);
+
+  let disposeCount = 0;
+  let handler = {
+    dispose() {
+      disposeCount++;
+    }
+  };
+
+  MyTech.registerSourceHandler({
+    canPlayType: function() {
+      return true;
+    },
+    canHandleSource: function() {
+      return true;
+    },
+    handleSource: function(source, tech, options) {
+      return handler;
+    }
+  });
+
+  let tech = new MyTech();
+  tech.setSource('test');
+
+  equal(disposeCount, 0, 'did not call sourceHandler_ dispose for initial dispose');
+  tech.dispose();
+  ok(!tech.sourceHandler_, 'sourceHandler should be unset');
+  equal(disposeCount, 1, 'called the source handler dispose');
+
+  // this would normally be done above tech on src after dispose
+  tech.el_ = tech.createEl();
+
+  tech.setSource('test');
+  equal(disposeCount, 1, 'did not dispose after initial setSource');
+
+  tech.setSource('test');
+  equal(disposeCount, 2, 'did dispose on second setSource');
+
+});
+
+test('setSource after previous setSource should dispose source handler once', function(){
+  let MyTech = extendFn(Tech);
+  Tech.withSourceHandlers(MyTech);
+
+  let disposeCount = 0;
+  let handler = {
+    dispose() {
+      disposeCount++;
+    }
+  };
+
+  MyTech.registerSourceHandler({
+    canPlayType: function() {
+      return true;
+    },
+    canHandleSource: function() {
+      return true;
+    },
+    handleSource: function(source, tech, options) {
+      return handler;
+    }
+  });
+
+  let tech = new MyTech();
+
+  tech.setSource('test');
+  equal(disposeCount, 0, 'did not call dispose for initial setSource');
+
+  tech.setSource('test');
+  equal(disposeCount, 1, 'did dispose for second setSource');
+
+  tech.setSource('test');
+  equal(disposeCount, 2, 'did dispose for third setSource');
+
+});
+

test/unit/tracks/audio-track-list.test.js

@@ -0,0 +1,97 @@
+import AudioTrackList from '../../../src/js/tracks/audio-track-list.js';
+import AudioTrack from '../../../src/js/tracks/audio-track.js';
+import EventTarget from '../../../src/js/event-target.js';
+
+q.module('Audio Track List');
+
+test('trigger "change" when "enabledchange" is fired on a track', function() {
+  let track = new EventTarget();
+  track.loaded_ = true;
+  let audioTrackList = new AudioTrackList([track]);
+  let changes = 0;
+  let changeHandler = function() {
+    changes++;
+  };
+  audioTrackList.on('change', changeHandler);
+  track.trigger('enabledchange');
+  equal(changes, 1, 'one change events for trigger');
+
+  audioTrackList.off('change', changeHandler);
+  audioTrackList.onchange = changeHandler;
+
+  track.trigger('enabledchange');
+  equal(changes, 2, 'one change events for another trigger');
+});
+
+test('only one track is ever enabled', function() {
+  let track = new AudioTrack({enabled: true});
+  let track2 = new AudioTrack({enabled: true});
+  let track3 = new AudioTrack({enabled: true});
+  let track4 = new AudioTrack();
+  let list = new AudioTrackList([track, track2]);
+  equal(track.enabled, false, 'track is disabled');
+  equal(track2.enabled, true, 'track2 is enabled');
+
+  track.enabled = true;
+  equal(track.enabled, true, 'track is enabled');
+  equal(track2.enabled, false, 'track2 is disabled');
+
+  list.addTrack_(track3);
+  equal(track.enabled, false, 'track is disabled');
+  equal(track2.enabled, false, 'track2 is disabled');
+  equal(track3.enabled, true, 'track3 is enabled');
+
+  track.enabled = true;
+  equal(track.enabled, true, 'track is disabled');
+  equal(track2.enabled, false, 'track2 is disabled');
+  equal(track3.enabled, false, 'track3 is disabled');
+
+  list.addTrack_(track4);
+  equal(track.enabled, true, 'track is enabled');
+  equal(track2.enabled, false, 'track2 is disabled');
+  equal(track3.enabled, false, 'track3 is disabled');
+  equal(track4.enabled, false, 'track4 is disabled');
+
+});
+
+test('all tracks can be disabled', function() {
+  let track = new AudioTrack();
+  let track2 = new AudioTrack();
+  let list = new AudioTrackList([track, track2]);
+  equal(track.enabled, false, 'track is disabled');
+  equal(track2.enabled, false, 'track2 is disabled');
+
+  track.enabled = true;
+  equal(track.enabled, true, 'track is enabled');
+  equal(track2.enabled, false, 'track2 is disabled');
+
+  track.enabled = false;
+  equal(track.enabled, false, 'track is disabled');
+  equal(track2.enabled, false, 'track2 is disabled');
+});
+
+test('trigger a change event per enabled change', function() {
+  let track = new AudioTrack({enabled: true});
+  let track2 = new AudioTrack({enabled: true});
+  let track3 = new AudioTrack({enabled: true});
+  let track4 = new AudioTrack();
+  let list = new AudioTrackList([track, track2]);
+
+  let change = 0;
+  list.on('change', () => change++);
+  track.enabled = true;
+  equal(change, 1, 'one change triggered');
+
+  list.addTrack_(track3);
+  equal(change, 2, 'another change triggered by adding an enabled track');
+
+  track.enabled = true;
+  equal(change, 3, 'another change trigger by changing enabled');
+
+  track.enabled = false;
+  equal(change, 4, 'another change trigger by changing enabled');
+
+  list.addTrack_(track4);
+  equal(change, 4, 'no change triggered by adding a disabled track');
+
+});

test/unit/tracks/audio-track.test.js

@@ -0,0 +1,118 @@
+import AudioTrack from '../../../src/js/tracks/audio-track.js';
+import {AudioTrackKind} from '../../../src/js/tracks/track-enums.js';
+import TrackBaseline from './track-baseline';
+
+q.module('Audio Track');
+
+// do baseline track testing
+TrackBaseline(AudioTrack, {
+  id: '1',
+  language: 'en',
+  label: 'English',
+  kind: 'main',
+});
+
+test('can create an enabled propert on an AudioTrack', function() {
+  let enabled = true;
+  let track = new AudioTrack({
+    enabled,
+  });
+  equal(track.enabled, enabled, 'enabled value matches what we passed in');
+});
+
+test('defaults when items not provided', function() {
+  let track = new AudioTrack();
+
+  equal(track.kind, '', 'kind defaulted to empty string');
+  equal(track.enabled, false, 'enabled defaulted to true since there is one track');
+  equal(track.label, '', 'label defaults to empty string');
+  equal(track.language, '', 'language defaults to empty string');
+  ok(track.id.match(/vjs_track_\d{5}/), 'id defaults to vjs_track_GUID');
+});
+
+test('kind can only be one of several options, defaults to empty string', function() {
+  let track = new AudioTrack({
+    kind: 'foo'
+  });
+
+  equal(track.kind, '', 'the kind is set to empty string, not foo');
+  notEqual(track.kind, 'foo', 'the kind is set to empty string, not foo');
+
+  // loop through all possible kinds to verify
+  for (let key in AudioTrackKind) {
+    let currentKind = AudioTrackKind[key];
+    let track = new AudioTrack({
+      kind: currentKind,
+    });
+    equal(track.kind, currentKind, 'the kind is set to ' + currentKind);
+  }
+});
+
+test('enabled can only be instantiated to true or false, defaults to false', function() {
+  let track = new AudioTrack({
+    enabled: 'foo'
+  });
+
+  equal(track.enabled, false, 'the enabled value is set to false, not foo');
+  notEqual(track.enabled, 'foo', 'the enabled value is not set to foo');
+
+  track = new AudioTrack({
+    enabled: true
+  });
+
+  equal(track.enabled, true, 'the enabled value is set to true');
+
+  track = new AudioTrack({
+    enabled: false
+  });
+
+  equal(track.enabled, false, 'the enabled value is set to false');
+});
+
+test('enabled can only be changed to true or false', function() {
+  let track = new AudioTrack();
+
+  track.enabled = 'foo';
+  notEqual(track.enabled, 'foo', 'enabled not set to invalid value, foo');
+  equal(track.enabled, false, 'enabled remains on the old value, false');
+
+  track.enabled = true;
+  equal(track.enabled, true, 'enabled was set to true');
+
+  track.enabled = 'baz';
+  notEqual(track.enabled, 'baz', 'enabled not set to invalid value, baz');
+  equal(track.enabled, true, 'enabled remains on the old value, true');
+
+  track.enabled = false;
+  equal(track.enabled, false, 'enabled was set to false');
+});
+
+test('when enabled is changed enabledchange event is fired', function() {
+  let track = new AudioTrack({
+    tech: this.tech,
+    enabled: false
+  });
+  let eventsTriggered = 0;
+  track.addEventListener('enabledchange', () => {
+    eventsTriggered++;
+  });
+
+  // two events
+  track.enabled = true;
+  track.enabled = false;
+  equal(eventsTriggered, 2, 'two enabled changes');
+
+  // no event here
+  track.enabled = false;
+  track.enabled = false;
+  equal(eventsTriggered, 2, 'still two enabled changes');
+
+  // one event
+  track.enabled = true;
+  equal(eventsTriggered, 3, 'three enabled changes');
+
+  // no events
+  track.enabled = true;
+  track.enabled = true;
+  equal(eventsTriggered, 3, 'still three enabled changes');
+});

test/unit/tracks/audio-tracks.test.js

@@ -0,0 +1,114 @@
+import AudioTrack from '../../../src/js/tracks/text-track.js';
+import Html5 from '../../../src/js/tech/html5.js';
+import Tech from '../../../src/js/tech/tech.js';
+import Component from '../../../src/js/component.js';
+
+import * as browser from '../../../src/js/utils/browser.js';
+import TestHelpers from '../test-helpers.js';
+import document from 'global/document';
+
+q.module('Tracks', {
+  setup() {
+    this.clock = sinon.useFakeTimers();
+  },
+  teardown() {
+    this.clock.restore();
+  }
+});
+
+test('Player track methods call the tech', function() {
+  let player;
+  let calls = 0;
+
+  player = TestHelpers.makePlayer();
+
+  player.tech_.audioTracks = function() {
+    calls++;
+  };
+
+  player.audioTracks();
+
+  equal(calls, 1, 'audioTrack defers to the tech');
+  player.dispose();
+});
+
+test('listen to remove and add track events in native audio tracks', function() {
+  let oldTestVid = Html5.TEST_VID;
+  let player;
+  let options;
+  let oldAudioTracks = Html5.prototype.audioTracks;
+  let events = {};
+  let html;
+
+  Html5.prototype.audioTracks = function() {
+    return {
+      addEventListener(type, handler) {
+        events[type] = true;
+      }
+    };
+  };
+
+  Html5.TEST_VID = {
+    audioTracks: []
+  };
+
+  player = {
+    // Function.prototype is a built-in no-op function.
+    controls() {},
+    ready() {},
+    options() {
+      return {};
+    },
+    addChild() {},
+    id() {},
+    el() {
+      return {
+        insertBefore() {},
+        appendChild() {}
+      };
+    }
+  };
+  player.player_ = player;
+  player.options_ = options = {};
+
+  html = new Html5(options);
+
+  ok(events.removetrack, 'removetrack listener was added');
+  ok(events.addtrack, 'addtrack listener was added');
+
+  Html5.TEST_VID = oldTestVid;
+  Html5.prototype.audioTracks = oldAudioTracks;
+});
+
+test('html5 tech supports native audio tracks if the video supports it', function() {
+  let oldTestVid = Html5.TEST_VID;
+
+  Html5.TEST_VID = {
+    audioTracks: []
+  };
+
+  ok(Html5.supportsNativeAudioTracks(), 'native audio tracks are supported');
+
+  Html5.TEST_VID = oldTestVid;
+});
+
+test('html5 tech does not support native audio tracks if the video does not supports it', function() {
+  let oldTestVid = Html5.TEST_VID;
+  Html5.TEST_VID = {};
+
+  ok(!Html5.supportsNativeAudioTracks(), 'native audio tracks are not supported');
+
+  Html5.TEST_VID = oldTestVid;
+});
+
+test('when switching techs, we should not get a new audio track', function() {
+  let player = TestHelpers.makePlayer();
+
+  player.loadTech_('TechFaker');
+  let firstTracks = player.audioTracks();
+
+  player.loadTech_('TechFaker');
+  let secondTracks = player.audioTracks();
+
+  ok(firstTracks === secondTracks, 'the tracks are equal');
+});

test/unit/tracks/text-track-list.test.js

@@ -2,155 +2,7 @@ import TextTrackList from '../../../src/js/tracks/text-track-list.js';
 import TextTrack from '../../../src/js/tracks/text-track.js';
 import EventTarget from '../../../src/js/event-target.js';
 
-const genericTracks = [
-  {
-    id: '1',
-    addEventListener() {},
-    off() {}
-  }, {
-    id: '2',
-    addEventListener() {},
-    off() {}
-  }, {
-    id: '3',
-    addEventListener() {},
-    off() {}
-  }
-];
-
 q.module('Text Track List');
-
-test('TextTrackList\'s length is set correctly', function() {
-  let ttl = new TextTrackList(genericTracks);
-
-  equal(ttl.length, genericTracks.length, 'the length is ' + genericTracks.length);
-});
-
-test('can get text tracks by id', function() {
-  let ttl = new TextTrackList(genericTracks);
-
-  equal(ttl.getTrackById('1').id, 1, 'id "1" has id of "1"');
-  equal(ttl.getTrackById('2').id, 2, 'id "2" has id of "2"');
-  equal(ttl.getTrackById('3').id, 3, 'id "3" has id of "3"');
-  ok(!ttl.getTrackById(1), 'there isn\'t an item with "numeric" id of `1`');
-});
-
-test('length is updated when new tracks are added or removed', function() {
-  let ttl = new TextTrackList(genericTracks);
-
-  ttl.addTrack_({id: '100', addEventListener() {}, off() {}});
-  equal(ttl.length, genericTracks.length + 1, 'the length is ' + (genericTracks.length + 1));
-  ttl.addTrack_({id: '101', addEventListener() {}, off() {}});
-  equal(ttl.length, genericTracks.length + 2, 'the length is ' + (genericTracks.length + 2));
-
-  ttl.removeTrack_(ttl.getTrackById('101'));
-  equal(ttl.length, genericTracks.length + 1, 'the length is ' + (genericTracks.length + 1));
-  ttl.removeTrack_(ttl.getTrackById('100'));
-  equal(ttl.length, genericTracks.length, 'the length is ' + genericTracks.length);
-});
-
-test('can access items by index', function() {
-  let ttl = new TextTrackList(genericTracks);
-  let i = 0;
-  let length = ttl.length;
-
-  expect(length);
-
-  for (; i < length; i++) {
-    equal(ttl[i].id, String(i + 1), 'the id of a track matches the index + 1');
-  }
-});
-
-test('can access new items by index', function() {
-  let ttl = new TextTrackList(genericTracks);
-
-  ttl.addTrack_({id: '100', addEventListener() {}});
-  equal(ttl[3].id, '100', 'id of item at index 3 is 100');
-  ttl.addTrack_({id: '101', addEventListener() {}});
-  equal(ttl[4].id, '101', 'id of item at index 4 is 101');
-});
-
-test('cannot access removed items by index', function() {
-  let ttl = new TextTrackList(genericTracks);
-
-  ttl.addTrack_({id: '100', addEventListener() {}, off() {}});
-  ttl.addTrack_({id: '101', addEventListener() {}, off() {}});
-  equal(ttl[3].id, '100', 'id of item at index 3 is 100');
-  equal(ttl[4].id, '101', 'id of item at index 4 is 101');
-
-  ttl.removeTrack_(ttl.getTrackById('101'));
-  ttl.removeTrack_(ttl.getTrackById('100'));
-
-  ok(!ttl[3], 'nothing at index 3');
-  ok(!ttl[4], 'nothing at index 4');
-});
-
-test('new item available at old index', function() {
-  let ttl = new TextTrackList(genericTracks);
-
-  ttl.addTrack_({id: '100', addEventListener() {}, off() {}});
-  equal(ttl[3].id, '100', 'id of item at index 3 is 100');
-
-  ttl.removeTrack_(ttl.getTrackById('100'));
-  ok(!ttl[3], 'nothing at index 3');
-
-  ttl.addTrack_({id: '101', addEventListener() {}});
-  equal(ttl[3].id, '101', 'id of new item at index 3 is now 101');
-});
-
-test('a "addtrack" event is triggered when new tracks are added', function() {
-  let ttl = new TextTrackList(genericTracks);
-  let tracks = 0;
-  let adds = 0;
-  let addHandler = function(e) {
-    if (e.track) {
-      tracks++;
-    }
-    adds++;
-  };
-
-  ttl.on('addtrack', addHandler);
-
-  ttl.addTrack_({id: '100', addEventListener() {}});
-  ttl.addTrack_({id: '101', addEventListener() {}});
-
-  ttl.off('addtrack', addHandler);
-
-  ttl.onaddtrack = addHandler;
-
-  ttl.addTrack_({id: '102', addEventListener() {}});
-  ttl.addTrack_({id: '103', addEventListener() {}});
-
-  equal(adds, 4, 'we got ' + adds + ' "addtrack" events');
-  equal(tracks, 4, 'we got a track with every event');
-});
-
-test('a "removetrack" event is triggered when tracks are removed', function() {
-  let ttl = new TextTrackList(genericTracks);
-  let tracks = 0;
-  let rms = 0;
-  let rmHandler = function(e) {
-    if (e.track) {
-      tracks++;
-    }
-    rms++;
-  };
-
-  ttl.on('removetrack', rmHandler);
-
-  ttl.removeTrack_(ttl.getTrackById('1'));
-  ttl.removeTrack_(ttl.getTrackById('2'));
-
-  ttl.off('removetrack', rmHandler);
-
-  ttl.onremovetrack = rmHandler;
-
-  ttl.removeTrack_(ttl.getTrackById('3'));
-
-  equal(rms, 3, 'we got ' + rms + ' "removetrack" events');
-  equal(tracks, 3, 'we got a track with every event');
-});
-
 test('trigger "change" event when "modechange" is fired on a track', function() {
   let tt = new EventTarget();
   let ttl = new TextTrackList([tt]);
@@ -160,15 +12,12 @@ test('trigger "change" event when "modechange" is fired on a track', function()
   };
 
   ttl.on('change', changeHandler);
-
   tt.trigger('modechange');
 
   ttl.off('change', changeHandler);
-
   ttl.onchange = changeHandler;
 
   tt.trigger('modechange');
-
   equal(changes, 2, 'two change events should have fired');
 });
 
@@ -185,11 +34,9 @@ test('trigger "change" event when mode changes on a TextTrack', function() {
   };
 
   ttl.on('change', changeHandler);
-
   tt.mode = 'showing';
 
   ttl.off('change', changeHandler);
-
   ttl.onchange = changeHandler;
 
   tt.mode = 'hidden';

test/unit/tracks/text-track-settings.test.js

@@ -9,6 +9,16 @@ const tracks = [{
   label: 'test'
 }];
 
+const defaultSettings = {
+    backgroundColor: '#000',
+    backgroundOpacity: '1',
+    color: '#FFF',
+    fontFamily: 'proportionalSansSerif',
+    textOpacity: '1',
+    windowColor: '#000',
+    windowOpacity: '0'
+};
+
 q.module('Text Track Settings', {
   beforeEach() {
     window.localStorage.clear();
@@ -20,13 +30,13 @@ test('should update settings', function() {
     tracks,
     persistTextTrackSettings: true
   });
-  let newSettings = {
-    backgroundOpacity: '1',
-    textOpacity: '1',
-    windowOpacity: '1',
+  const newSettings = {
+    backgroundOpacity: '0.5',
+    textOpacity: '0.5',
+    windowOpacity: '0.5',
     edgeStyle: 'raised',
     fontFamily: 'monospaceSerif',
-    color: '#FFF',
+    color: '#F00',
     backgroundColor: '#FFF',
     windowColor: '#FFF',
     fontPercent: 1.25
@@ -35,14 +45,14 @@ test('should update settings', function() {
   player.textTrackSettings.setValues(newSettings);
   deepEqual(player.textTrackSettings.getValues(), newSettings, 'values are updated');
 
-  equal(player.$('.vjs-fg-color > select').selectedIndex, 1, 'fg-color is set to new value');
+  equal(player.$('.vjs-fg-color > select').selectedIndex, 2, 'fg-color is set to new value');
   equal(player.$('.vjs-bg-color > select').selectedIndex, 1, 'bg-color is set to new value');
   equal(player.$('.window-color > select').selectedIndex, 1, 'window-color is set to new value');
   equal(player.$('.vjs-text-opacity > select').selectedIndex, 1, 'text-opacity is set to new value');
   equal(player.$('.vjs-bg-opacity > select').selectedIndex, 1, 'bg-opacity is set to new value');
   equal(player.$('.vjs-window-opacity > select').selectedIndex, 1, 'window-opacity is set to new value');
   equal(player.$('.vjs-edge-style select').selectedIndex, 1, 'edge-style is set to new value');
-  equal(player.$('.vjs-font-family select').selectedIndex, 1, 'font-family is set to new value');
+  equal(player.$('.vjs-font-family select').selectedIndex, 3, 'font-family is set to new value');
   equal(player.$('.vjs-font-percent select').selectedIndex, 3, 'font-percent is set to new value');
 
   Events.trigger(player.$('.vjs-done-button'), 'click');
@@ -71,8 +81,9 @@ test('should restore default settings', function() {
   Events.trigger(player.$('.vjs-default-button'), 'click');
   Events.trigger(player.$('.vjs-done-button'), 'click');
 
-  deepEqual(player.textTrackSettings.getValues(), {}, 'values are defaulted');
-  deepEqual(window.localStorage.getItem('vjs-text-track-settings'), null, 'values are saved');
+  deepEqual(player.textTrackSettings.getValues(), defaultSettings, 'values are defaulted');
+  // MikeA: need to figure out how to modify saveSettings to factor in defaults are no longer null
+ // deepEqual(window.localStorage.getItem('vjs-text-track-settings'), defaultSettings, 'values are saved');
 
   equal(player.$('.vjs-fg-color > select').selectedIndex, 0, 'fg-color is set to default value');
   equal(player.$('.vjs-bg-color > select').selectedIndex, 0, 'bg-color is set to default value');
@@ -186,13 +197,13 @@ test('do not try to restore or save settings if persist option is not set', func
 
 test('should restore saved settings', function() {
   let player;
-  let newSettings = {
-    backgroundOpacity: '1',
-    textOpacity: '1',
-    windowOpacity: '1',
+  const newSettings = {
+    backgroundOpacity: '0.5',
+    textOpacity: '0.5',
+    windowOpacity: '0.5',
     edgeStyle: 'raised',
     fontFamily: 'monospaceSerif',
-    color: '#FFF',
+    color: '#F00',
     backgroundColor: '#FFF',
     windowColor: '#FFF',
     fontPercent: 1.25
@@ -212,13 +223,13 @@ test('should restore saved settings', function() {
 
 test('should not restore saved settings', function() {
   let player;
-  let newSettings = {
-    backgroundOpacity: '1',
-    textOpacity: '1',
-    windowOpacity: '1',
+  const newSettings = {
+    backgroundOpacity: '0.5',
+    textOpacity: '0.5',
+    windowOpacity: '0.5',
     edgeStyle: 'raised',
     fontFamily: 'monospaceSerif',
-    color: '#FFF',
+    color: '#F00',
     backgroundColor: '#FFF',
     windowColor: '#FFF',
     fontPercent: 1.25
@@ -231,7 +242,7 @@ test('should not restore saved settings', function() {
     persistTextTrackSettings: false
   });
 
-  deepEqual(player.textTrackSettings.getValues(), {});
+  deepEqual(player.textTrackSettings.getValues(), defaultSettings);
 
   player.dispose();
 });