v5.6.0 dist

.jshintrc

@@ -34,12 +34,14 @@
         "notEqual",
         "notStrictEqual",
         "ok",
+        "throws",
         "QUnit",
         "raises",
         "start",
         "stop",
         "strictEqual",
         "test",
+        "throws",
         "sinon"
     ]
 }

CHANGELOG.md

@@ -6,6 +6,128 @@ _(none)_
 
 --------------------
 
+## 5.6.0 (2016-01-26)
+* @OwenEdwards added ClickableComponent. Fixed keyboard operation of buttons ([view](https://github.com/videojs/video.js/pull/3032))
+* @OwenEdwards Fixed menu keyboard access and ARIA labeling for screen readers ([view](https://github.com/videojs/video.js/pull/3033))
+* @OwenEdwards Fixed volume menu keyboard access ([view](https://github.com/videojs/video.js/pull/3034))
+* @mister-ben made $primary-foreground-color a !default sass var ([view](https://github.com/videojs/video.js/pull/3003))
+* @OwenEdwards fixed double-localization of mute toggle control text ([view](https://github.com/videojs/video.js/pull/3017))
+* @gkatsev checked muted status when updating volume bar level ([view](https://github.com/videojs/video.js/pull/3037))
+* @vitor-faiante updated the guides ([view](https://github.com/videojs/video.js/pull/2781))
+* @aril-spetalen added language support for Norwegian (nb and nn) ([view](https://github.com/videojs/video.js/pull/3021))
+* @CoWinkKeyDinkInc fixed table in Tracks guide. Replaced some single quotes with double quotes ([view](https://github.com/videojs/video.js/pull/2946))
+* @hubdotcom changed URLs in README to be protocol-relative ([view](https://github.com/videojs/video.js/pull/3040))
+* @gkatsev updated to latest videojs-ie8 shim ([view](https://github.com/videojs/video.js/pull/3042))
+
+## 5.5.3 (2016-01-15)
+* @gkasev updated vjs to correctly return already created player when given an element ([view](https://github.com/videojs/video.js/pull/3006))
+* @mister-ben updated CDN urls in setup guide ([view](https://github.com/videojs/video.js/pull/2984))
+* @rcrooks fixed a couple of docs link and a jsdoc comment ([view](https://github.com/videojs/video.js/pull/2987))
+
+## 5.5.2 (2016-01-14)
+* make sure that styleEl_ is in DOM before removing on dispose ([view](https://github.com/videojs/video.js/pull/3004))
+
+## 5.5.1 (2016-01-08)
+* @gkatsev fixed sass if else for icons ([view](https://github.com/videojs/video.js/pull/2988))
+
+## 5.5.0 (2016-01-07)
+* @hartman fixed usage of lighten in progress component. Fixes #2793 ([view](https://github.com/videojs/video.js/pull/2875))
+* @misteroneill exposed createEl on videojs ([view](https://github.com/videojs/video.js/pull/2926))
+* @huitsing updated docstrings for autoplay and loop methods ([view](https://github.com/videojs/video.js/pull/2960))
+* @rcrooks fixed some broken links in guides ([view](https://github.com/videojs/video.js/pull/2965))
+* @forbesjo fixed errorDisplay erroring on subsequent openings ([view](https://github.com/videojs/video.js/pull/2966))
+* @incompl updated build command in CONTRIBUTING.md ([view](https://github.com/videojs/video.js/pull/2967))
+* @forbesjo updated player to not autoplay if there is no source ([view](https://github.com/videojs/video.js/pull/2971))
+* @gkatsev updated css to have ascii codepoints for fonticons. Expose new scss file ([view](https://github.com/videojs/video.js/pull/2973))
+
+## 5.4.6 (2015-12-22)
+* @gkatsev fixed vertical slider alignment in volume menu button ([view](https://github.com/videojs/video.js/pull/2943))
+
+## 5.4.5 (2015-12-15)
+* @gkatsev added mouse/touch listeners to volume menu button ([view](https://github.com/videojs/video.js/pull/2638))
+* @gkatsev updated styles for inline menu and volume bar ([view](https://github.com/videojs/video.js/pull/2913))
+* @BrandonOCasey updated sandbox to to use newer CDN urls ([view](https://github.com/videojs/video.js/pull/2917))
+* @hartman updated options guide doc ([view](https://github.com/videojs/video.js/pull/2908))
+* @rcrooks fixed simple embed example ([view](https://github.com/videojs/video.js/pull/2915))
+
+## 5.4.4 (2015-12-09)
+* @gkatsev switched to use custom vtt.js from npm ([view](https://github.com/videojs/video.js/pull/2905))
+
+## 5.4.3 (2015-12-08)
+* @gkatsev updated options customizer and github-release options ([view](https://github.com/videojs/video.js/pull/2903))
+
+## 5.4.2 (2015-12-08)
+* @gkatsev updated grunt-release config ([view](https://github.com/videojs/video.js/pull/2900))
+
+## 5.4.1 (2015-12-08)
+* @misteroneill updated videojs-ie8 to 1.1.1 ([view](https://github.com/videojs/video.js/pull/2869))
+* @gkatsev added Player#tech. Fixes #2617 ([view](https://github.com/videojs/video.js/pull/2883))
+* @nick11703 changed multiline comments in sass with single-line comments ([view](https://github.com/videojs/video.js/pull/2827))
+* @gkatsev added a Player#reset method. Fixes #2852 ([view](https://github.com/videojs/video.js/pull/2880))
+* @chemoish emulated HTMLTrackElement to enable track load events ([view](https://github.com/videojs/video.js/pull/2804))
+* @gkatsev added nullcheck for cues in updateForTrack. Fixes #2870 ([view](https://github.com/videojs/video.js/pull/2896))
+* @gkatsev added ability to release next tag from master ([view](https://github.com/videojs/video.js/pull/2894))
+* @gkatsev added chg- and github- release for next releases ([view](https://github.com/videojs/video.js/pull/2899))
+
+## 5.3.0 (2015-11-25)
+* @forbesjo updated formatTime to not go negative ([view](https://github.com/videojs/video.js/pull/2821))
+* @imbcmdth added sourceOrder option for source-first ordering in selectSource ([view](https://github.com/videojs/video.js/pull/2847))
+
+## 5.2.4 (2015-11-25)
+* @gesinger checked for track changes before tech started listening ([view](https://github.com/videojs/video.js/pull/2835))
+* @gesinger fixed handler explosion for cuechange events ([view](https://github.com/videojs/video.js/pull/2849))
+* @mmcc fixed vertical volume ([view](https://github.com/videojs/video.js/pull/2859))
+
+## 5.2.3 (2015-11-24)
+* @gkatsev fixed clearing out errors ([view](https://github.com/videojs/video.js/pull/2850))
+
+## 5.2.2 (2015-11-23)
+* @DatTran fixed bower paths. Fixes #2740 ([view](https://github.com/videojs/video.js/pull/2775))
+* @nbibler ensured classes begin with alpha characters. Fixes #2828 ([view](https://github.com/videojs/video.js/pull/2829))
+* @bcvio fixed returning current source rather than blob url ([view](https://github.com/videojs/video.js/pull/2833))
+* @tomaspinho added ended event to API docs ([view](https://github.com/videojs/video.js/pull/2836))
+* @paladox updated xhr from deprecated ver to v2.2 ([view](https://github.com/videojs/video.js/pull/2837))
+
+## 5.2.1 (2015-11-16)
+* @dmlap Check a component is a function before new-ing ([view](https://github.com/videojs/video.js/pull/2814))
+* @ksjun corrected the registerTech export ([view](https://github.com/videojs/video.js/pull/2816))
+
+## 5.2.0 (2015-11-10)
+* @gkatsev made initListeners more general and added Tech.isTech. Fixes #2767 ([view](https://github.com/videojs/video.js/pull/2773))
+* @dmlap updated swf to 5.0.1 ([view](https://github.com/videojs/video.js/pull/2795))
+* @gkatsev added a tech registry. Fixes #2772 ([view](https://github.com/videojs/video.js/pull/2782))
+* @Lillemanden impoved logic for dividing RTMP paths ([view](https://github.com/videojs/video.js/pull/2787))
+* @bdeitte added a test for improved RTMP path dividing logic ([view](https://github.com/videojs/video.js/pull/2794))
+* @paladox updated grunt-cli dependency ([view](https://github.com/videojs/video.js/pull/2555))
+* @paladox updated grunt-contrib-jshint ([view](https://github.com/videojs/video.js/pull/2554))
+* @siebrand updated dutch translations ([view](https://github.com/videojs/video.js/pull/2556))
+* @misteroneill exposed DOM helpers ([view](https://github.com/videojs/video.js/pull/2754))
+* @incompl fixed broken link to reduced test cases article ([view](https://github.com/videojs/video.js/pull/2801))
+* @zjruan updated text track prototype loops to blacklist constructor for IE8 ([view](https://github.com/videojs/video.js/pull/2565))
+* @gkatsev fixed usage of textTracksToJson ([view](https://github.com/videojs/video.js/pull/2797))
+* @gkatsev updated contrib.json to use / as branch-name separator in feature-accept ([view](https://github.com/videojs/video.js/pull/2803))
+* @gkatsev updated MediaLoader to check for techs in their registry ([view](https://github.com/videojs/video.js/pull/2798))
+
+## 5.1.0 (2015-11-02)
+* @typcn bumped grunt-sass to ^1.0.0 to support node 4.x ([view](https://github.com/videojs/video.js/pull/2645))
+* @gkatsev removed unhelpful isCrossOrigin test ([view](https://github.com/videojs/video.js/pull/2715))
+* @forbesjo updated karma to use all installed browsers for unit tests ([view](https://github.com/videojs/video.js/pull/2708))
+* @forbesjo removed android/ios tests to increase build stability ([view](https://github.com/videojs/video.js/pull/2739))
+* @nickygerritsen added canPlayType method to player ([view](https://github.com/videojs/video.js/pull/2709))
+* @gkatsev fixes track tests and ignored empty properties in tracks converter ([view](https://github.com/videojs/video.js/pull/2744))
+* @misteroneill added a modal dialog ([view](https://github.com/videojs/video.js/pull/2668))
+* @misteroneill removed z-index from big play button ([view](https://github.com/videojs/video.js/pull/2639))
+* @DaveVoyles updated URL to player API docs ([view](https://github.com/videojs/video.js/pull/2685))
+* @ ([view](https://github.com/videojs/video.js/pull/2691))
+* @kahwee Fixed sandbox plugin example to work in Video.js 5 ([view](https://github.com/videojs/video.js/pull/2691))
+* @Soviut Fixed argument names in some API docs ([view](https://github.com/videojs/video.js/pull/2714))
+* @forbesjo Added Microsoft Caption Maker link ([view](https://github.com/videojs/video.js/pull/2618))
+* @misteroneill updated modal dialog CSS ([view](https://github.com/videojs/video.js/pull/2756))
+* @misteroneill Add browserify
+* @brkattk updated emulateTextTrack to exit early if no textTracks ([view](https://github.com/videojs/video.js/pull/2426))
+* @chemoish Fix captions sticking to bottom for webkit browsers. Fixes #2193 ([view](https://github.com/videojs/video.js/pull/2702))
+* @imbcmdth Deferred the implementation of select functions in the tech to source handlers if they provide them ([view](https://github.com/videojs/video.js/pull/2760))
+
 ## 5.0.2 (2015-10-23)
 * @imbcmdth fixed an issue with emulateTextTracks being called before the tech dom was ready ([view](https://github.com/videojs/video.js/pull/2692))
 * @gkatsev bumped obj.assign to fix uncaught SecurityError in iframes. Fixes #2703 ([view](https://github.com/videojs/video.js/pull/2721))

CONTRIBUTING.md

@@ -28,7 +28,7 @@ Guidelines for bug reports:
 
 2. Check if the issue has already been fixed — try to reproduce it using the latest `master` branch in the repository.
 
-3. Isolate the problem — **create a [reduced test case](http://css-tricks.com/6263-reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point.
+3. Isolate the problem — **create a [reduced test case](https://css-tricks.com/reduced-test-cases/)** with a live example. You can possibly use [this JSBin example](http://jsbin.com/axedog/7/edit) as a starting point.
 
 A good bug report should be as detailed as possible, so that others won't have to follow up for the essential details.
 
@@ -144,7 +144,7 @@ npm install
 Build a local copy of video.js and run tests
 
 ```bash
-grunt
+grunt dist
 grunt test
 ```
 

README.md

@@ -1,20 +1,16 @@
-## Please Note!
-The master branch is now the development branch for 5.0 and should be considered unstable until the first 5.0 release. If you're looking for the most recent stable release, please refer to the [stable branch](https://github.com/videojs/video.js/tree/stable).
-
-
-![Video.js logo](https://i.cloudup.com/C3nAUZ-l4c.png)
+![Video.js logo](http://videojs.com/img/logo.png)
 
 # [Video.js - HTML5 Video Player](http://videojs.com)  [![Build Status](https://travis-ci.org/videojs/video.js.svg?branch=master)](https://travis-ci.org/videojs/video.js)
 
-> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ 100,000 websites.
+> Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through [plugins](https://github.com/videojs/video.js/wiki/Plugins)). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over ~~50,000~~ ~~100,000~~ 200,000 websites.
 
 ## Quick start
 Thanks to the awesome folks over at [Fastly](http://www.fastly.com/), there's a free, CDN hosted version of Video.js that anyone can use. Simply add these includes to your document's
 `<head>`:
 
 ```html
-<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
-<script src="http://vjs.zencdn.net/4.12/video.js"></script>
+<link href="//vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/5.0/video.min.js"></script>
 ```
 
 Then, whenever you want to use Video.js you can simply use the `<video>` element as your normally would, but with an additional `data-setup` attribute containing any Video.js options. These options
@@ -24,8 +20,8 @@ can include any Video.js option plus potential [plugin](https://github.com/video
 <video id="really-cool-video" class="video-js vjs-default-skin" controls
  preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg"
  data-setup='{}'>
-  <source src="really-cool-video.mp4" type='video/mp4'>
-  <source src="really-cool-video.webm" type='video/webm'>
+  <source src="really-cool-video.mp4" type="video/mp4">
+  <source src="really-cool-video.webm" type="video/webm">
   <p class="vjs-no-js">
     To view this video please enable JavaScript, and consider upgrading to a web browser
     that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
@@ -48,8 +44,7 @@ var player = videojs('really-cool-video', { /* Options */ }, function() {
 });
 ```
 
-If you're ready to dive in, the [documentation](docs/index.md) is the first place to go for more information. Generally the
-[player API docs](docs/api/vjs.Player.md) are the most pertinent.
+If you're ready to dive in, the [documentation](http://docs.videojs.com) is the first place to go for more information.
 
 ## Contributing
 Video.js is a free and open source library, and we appreciate any help you're willing to give. Check out the [contributing guide](CONTRIBUTING.md).

bower.json

@@ -2,8 +2,8 @@
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
   "main": [
-    "src/js/video.js",
-    "src/css/video-js.scss"
+    "dist/video.js",
+    "dist/video-js.css"
   ],
   "moduleType": "es6",
   "keywords": [

build/grunt.js

@@ -1,3 +1,4 @@
+import {gruntCustomizer, gruntOptionsMaker} from './options-customizer.js';
 module.exports = function(grunt) {
   require('time-grunt')(grunt);
 
@@ -13,9 +14,81 @@ module.exports = function(grunt) {
     patch: verParts[2]
   };
 
+  const browserifyGruntDefaults = {
+    browserifyOptions: {
+      debug: true,
+      standalone: 'videojs'
+    },
+    plugin: [
+      ['browserify-derequire']
+    ],
+    transform: [
+      require('babelify').configure({
+        sourceMapRelative: './',
+        loose: ['all']
+      }),
+      ['browserify-versionify', {
+        placeholder: '__VERSION__',
+        version: pkg.version
+      }],
+      ['browserify-versionify', {
+        placeholder: '__VERSION_NO_PATCH__',
+        version: version.majorMinor
+      }],
+      ['browserify-versionify', {
+        placeholder: '__SWF_VERSION__',
+        version: pkg.dependencies['videojs-swf']
+      }]
+    ]
+  };
+
+  const githubReleaseDefaults = {
+    options: {
+      release: {
+        tag_name: 'v'+ version.full,
+        name: version.full,
+        body: require('chg').find(version.full).changesRaw
+      },
+    },
+    files: {
+      src: [`dist/video-js-${version.full}.zip`] // Files that you want to attach to Release
+    }
+  };
+
+  /**
+   * Customizes _.merge behavior in `browserifyGruntOptions` to concatenate
+   * arrays. This can be overridden on a per-call basis to
+   *
+   * @see https://lodash.com/docs#merge
+   * @function browserifyGruntCustomizer
+   * @private
+   * @param  {Mixed} objectValue
+   * @param  {Mixed} sourceValue
+   * @return {Object}
+   */
+  const browserifyGruntCustomizer = gruntCustomizer;
+
+  /**
+   * Creates a unique object of Browserify Grunt task options.
+   *
+   * @function browserifyGruntOptions
+   * @private
+   * @param  {Object} [options]
+   * @param  {Function} [customizer=browserifyGruntCustomizer]
+   *         If the default array-concatenation behavior is not desireable,
+   *         pass _.noop or a unique customizer (https://lodash.com/docs#merge).
+   *
+   * @return {Object}
+   */
+  const browserifyGruntOptions = gruntOptionsMaker(browserifyGruntDefaults, browserifyGruntCustomizer);
+
+  const githubReleaseCustomizer = gruntCustomizer;
+  const githubReleaseOptions = gruntOptionsMaker(githubReleaseDefaults, githubReleaseCustomizer);
+
   /**
    * Creates processor functions for license banners.
    *
+   * @function createLicenseProcessor
    * @private
    * @param  {Object} data Custom data overriding `bannerCommonData`. Will
    *                       not be mutated.
@@ -23,11 +96,13 @@ module.exports = function(grunt) {
    *                       using an object constructed from `bannerCommonData`
    *                       and the `data` argument.
    */
-  let createLicenseProcessor = (data) => function () {
-    return grunt.template.process(license, {
-      data: _.merge({}, bannerCommonData, data)
-    });
-  };
+  function createLicenseProcessor(data) {
+    return () => {
+      return grunt.template.process(license, {
+        data: _.merge({}, bannerCommonData, data)
+      });
+    };
+  }
 
   version.majorMinor = `${version.major}.${version.minor}`;
   grunt.vjsVersion = version;
@@ -76,7 +151,7 @@ module.exports = function(grunt) {
     watch: {
       skin: {
         files: ['src/css/**/*'],
-        tasks: 'sass'
+        tasks: ['sass', 'wrapcodepoints']
       },
       jshint: {
         files: ['src/**/*', 'test/unit/**/*.js', 'Gruntfile.js'],
@@ -121,7 +196,7 @@ module.exports = function(grunt) {
     sass: {
       build: {
         files: {
-          'build/temp/video-js.css': 'src/css/video-js.scss'
+          'build/temp/video-js.css': 'src/css/vjs.scss'
         }
       }
     },
@@ -131,7 +206,12 @@ module.exports = function(grunt) {
         configFile: 'test/karma.conf.js'
       },
 
-      defaults: {},
+      defaults: {
+        detectBrowsers: {
+          enabled: !process.env.TRAVIS,
+          usePhantomJS: false
+        }
+      },
 
       watch: {
         autoWatch: true,
@@ -154,9 +234,7 @@ module.exports = function(grunt) {
       ie11_bs:      { browsers: ['ie11_bs'] },
       ie10_bs:      { browsers: ['ie10_bs'] },
       ie9_bs:       { browsers: ['ie9_bs'] },
-      ie8_bs:       { browsers: ['ie8_bs'] },
-      android_bs:   { browsers: ['android_bs'] },
-      ios_bs:       { browsers: ['ios_bs'] }
+      ie8_bs:       { browsers: ['ie8_bs'] }
     },
     vjsdocs: {
       all: {
@@ -227,50 +305,37 @@ module.exports = function(grunt) {
         auth: {
           user: process.env.VJS_GITHUB_USER,
           password: process.env.VJS_GITHUB_TOKEN
-        },
-        release: {
-          tag_name: 'v'+ version.full,
-          name: version.full,
-          body: require('chg').find(version.full).changesRaw
         }
       },
-      files: {
-        src: [`dist/video-js-${version.full}.zip`] // Files that you want to attach to Release
-      }
+      release: githubReleaseOptions(),
+      prerelease: githubReleaseOptions({
+        options: {
+          release: {
+            prerelease: true
+          }
+        }
+      })
     },
     browserify: {
-      options: {
-        browserifyOptions: {
-          debug: true,
-          standalone: 'videojs'
-        },
-        plugin: [
-          ['browserify-derequire']
-        ],
-        transform: [
-          require('babelify').configure({
-            sourceMapRelative: './',
-            loose: ['all']
-          }),
-          ['browserify-versionify', {
-            placeholder: '__VERSION__',
-            version: pkg.version
-          }],
-          ['browserify-versionify', {
-            placeholder: '__VERSION_NO_PATCH__',
-            version: version.majorMinor
-          }],
-          ['browserify-versionify', {
-            placeholder: '__SWF_VERSION__',
-            version: pkg.dependencies['videojs-swf']
-          }]
-        ]
-      },
+      options: browserifyGruntOptions(),
       build: {
         files: {
           'build/temp/video.js': ['src/js/video.js']
         }
       },
+      dist: {
+        options: browserifyGruntOptions({
+          transform: [
+            ['browserify-versionify', {
+              placeholder: '../node_modules/videojs-vtt.js/dist/vtt.js',
+              version: 'https://cdn.rawgit.com/gkatsev/vtt.js/vjs-v0.12.1/dist/vtt.min.js'
+            }],
+          ]
+        }),
+        files: {
+          'build/temp/video.js': ['src/js/video.js']
+        }
+      },
       watch: {
         options: {
           watch: true,
@@ -377,7 +442,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('videojs-doc-generator');
   grunt.loadNpmTasks('chg');
 
-  grunt.registerTask('build', [
+  const buildDependents = [
     'clean:build',
 
     'jshint',
@@ -390,6 +455,7 @@ module.exports = function(grunt) {
     'uglify',
 
     'sass',
+    'wrapcodepoints',
     'version:css',
     'cssmin',
 
@@ -397,16 +463,34 @@ module.exports = function(grunt) {
     'copy:swf',
     'copy:ie8',
     'vjslanguages'
-  ]);
+  ];
+
+  grunt.registerTask('build', buildDependents);
+
+  grunt.registerTask(
+    'build:dist',
+    buildDependents.map(task => task === 'browserify:build' ? 'browserify:dist' : task)
+  );
 
   grunt.registerTask('dist', [
     'clean:dist',
-    'build',
+    'build:dist',
     'copy:dist',
     'copy:examples',
     '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';"));
+  });
+
   // Default task - build and test
   grunt.registerTask('default', ['test']);
 

build/options-customizer.js

@@ -0,0 +1,49 @@
+import _ from 'lodash-compat';
+/**
+ * Customizes _.merge behavior in `gruntOptions` to concatenate
+ * arrays. This can be overridden on a per-call basis to
+ *
+ * @see https://lodash.com/docs#merge
+ * @function GruntCustomizer
+ * @private
+ * @param  {Mixed} objectValue
+ * @param  {Mixed} sourceValue
+ * @return {Object}
+ */
+function gruntCustomizer(objectValue, sourceValue) {
+  if (Array.isArray(objectValue)) {
+    return objectValue.concat(sourceValue);
+  }
+}
+
+/**
+ * Creates a gruntOptions instance for the specific defaultOptions and gruntCustomizer
+ *
+ * @function browserifyGruntOptions
+ * @private
+ * @param  {Object} [options]
+ * @param  {Function} [customizer=gruntCustomizer]
+ *         If the default array-concatenation behavior is not desireable,
+ *         pass _.noop or a unique customizer (https://lodash.com/docs#merge).
+ *
+ * @return {Function}
+ */
+function gruntOptionsMaker(defaultOptions, gruntCustomizer) {
+  /**
+   * Creates a unique object of Browserify Grunt task options.
+   *
+   * @function gruntOptions
+   * @private
+   * @param  {Object} [options]
+   * @param  {Function} [customizer=browserifyGruntCustomizer]
+   *         If the default array-concatenation behavior is not desireable,
+   *         pass _.noop or a unique customizer (https://lodash.com/docs#merge).
+   *
+   * @return {Object}
+   */
+  return function gruntOptions(options = null, customizer = gruntCustomizer) {
+    return _.merge({}, defaultOptions, options, customizer);
+  }
+};
+
+export { gruntCustomizer, gruntOptionsMaker };

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.0.2",
+  "version": "5.6.0",
   "keywords": [
     "videojs",
     "html5",

contrib.json

@@ -250,15 +250,37 @@
       ]
     },
 
+    "next": {
+      "patch": {
+        "description": "Create a patch release and tag it @next on npm",
+        "release_type": "patch",
+        "steps": [{ "include": "release run_next" }]
+      },
+      "minor": {
+        "description": "Create a minor release and tag it @next on npm",
+        "release_type": "minor",
+        "steps": [{ "include": "release run_next" }]
+      },
+      "major": {
+        "description": "Create a major release and tag it @next on npm",
+        "release_type": "major",
+        "steps": [{ "include": "release run_next" }]
+      }
+    },
+
     "prerelease": {
       "release_type": "prerelease",
+      "steps": [{ "include": "release run_next" }]
+    },
+
+    "run_next": {
       "steps": [
-        [ "git checkout master",                       "Checkout the developmet branch" ],
-        [ "git pull upstream master",                  "Update the developmet branch" ],
         { "include": "branch check" },
+        { "include": "update local master" },
         [ "git checkout -b temp-release-branch master","Create a temporary branch for the dist" ],
         [ "grunt version:{{release_type}}",            "Bump package versions" ],
         [ "./build/bin/version",                       "Return the current VJS Version from the package.json file", "version" ],
+        [ "grunt chg-release:{{version}}",             "Update the changelog with the new release" ],
         [ "git commit -am 'v{{version}}'",             "Add and commit the package changes" ],
         [ "git checkout master",                       "Checkout the developmet branch" ],
         [ "git merge temp-release-branch",             "Merge package changes into the dev brach" ],
@@ -269,11 +291,13 @@
         [ "git commit -m 'v{{version}} dist'",         "Commit the dist changes" ],
         [ "git tag -a v{{version}} -m 'v{{version}}'", "Tag the release" ],
         [ "git push upstream --tags",                  "Push the new tag to the repo" ],
+        [ "grunt github-release:prerelease",           "Create a new pre-release on Github" ],
         [ "npm publish --tag next",                    "Publish to npm as 'next'" ],
         [ "git checkout master",                       "Checkout the developmet branch" ],
         [ "git branch -D temp-release-branch",         "Delete the temp release branch" ]
       ]
     },
+
     "run": {
       "steps": [
         { "include": "branch check" },
@@ -285,14 +309,14 @@
         [ "grunt chg-release:{{version}}",             "Update the changelog with the new release" ],
         [ "git commit -am 'v{{version}}'",             "Add and commit the package changes" ],
         [ "git push upstream stable",                  "Push the release branch changes to the repo" ],
-        [ "git checkout -b temp-release-branch master","Create a temporary branch for the dist" ],
+        [ "git checkout -b temp-release-branch stable","Create a temporary branch for the dist" ],
         [ "grunt dist",                                "Build the dist" ],
         [ "git add dist --force",                      "Add the (otherwise ignored) release files" ],
         [ "git commit -m 'v{{version}} dist'",         "Commit the dist changes" ],
         [ "git tag -a v{{version}} -m 'v{{version}}'", "Tag the release" ],
         [ "git push upstream --tags",                  "Push the new tag to the repo" ],
         [ "npm publish",                               "Publish to npm" ],
-        [ "grunt github-release",                      "Create a new release on Github" ],
+        [ "grunt github-release:release",              "Create a new release on Github" ],
         [ "git checkout stable",                       "Checkout the developmet branch" ],
         [ "git branch -D temp-release-branch",         "Delete the temp release branch" ]
       ]
@@ -398,7 +422,7 @@
         { "prompt": "text", "id": "prNum",                             "desc": "What is the the pull request number?" },
         { "get": "{{meta.urls.repo_api}}/pulls/{{prNum}}",             "desc": "Get the PR information", "id": "pr" },
         { "get": "{{meta.urls.repo_api}}/pulls/{{prNum}}/commits",     "desc": "Get the PR commits to access author info", "id": "prCommits" },
-        [ "git checkout -b {{pr.user.login}}-{{pr.head.ref}} {{pr.base.ref}}", "Create a new branch for merging the changes" ],
+        [ "git checkout -b {{pr.user.login}}/{{pr.head.ref}} {{pr.base.ref}}", "Create a new branch for merging the changes" ],
         [ "git fetch {{pr.head.repo.ssh_url}} {{pr.head.ref}}",                "Fetch the changes" ],
         [ "git merge --no-commit --squash FETCH_HEAD",                         "Merge the changes in without committing so they can be squashed" ],
         [ "grunt test",                                                        "Run tests to make sure they still pass" ],
@@ -408,10 +432,10 @@
         [ "git commit -a --author='{{prCommits.[0].commit.author.name}} <{{prCommits.[0].commit.author.email}}>' -m '{{line}}. closes #{{prNum}}'", "Commit the changes" ],
         { "prompt": "confirm",                                         "desc": "Does everything look ok?" },
         [ "git checkout {{pr.base.ref}}",                                      "Check out the base branch" ],
-        [ "git merge {{pr.user.login}}-{{pr.head.ref}}",                       "Merge the changes" ],
+        [ "git merge {{pr.user.login}}/{{pr.head.ref}}",                       "Merge the changes" ],
         [ "git push origin {{pr.base.ref}}",                                   "Push the changes to your remote copy of the project" ],
         [ "git push upstream {{pr.base.ref}}",                                 "Push the changes to the main project" ],
-        [ "git branch -D {{pr.user.login}}-{{pr.head.ref}}",                   "Delete the local branch used for merging" ]
+        [ "git branch -D {{pr.user.login}}/{{pr.head.ref}}",                   "Delete the local branch used for merging" ]
       ]
     }
   }

dist/examples/simple-embed/index.html

@@ -1,37 +1,30 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <title>Video.js | HTML5 Video Player</title>
 
-  <!-- Chang URLs to wherever Video.js files will be hosted -->
-  <!-- Default URLs assume the examples folder is included alongside video.js -->
-  <link href="../../video-js.min.css" rel="stylesheet" type="text/css">
+  <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>
 
-  <!-- Include ES5 shim, sham and html5 shiv for ie8 support  -->
-  <!-- Exclude this if you don't need ie8 support -->
-  <script src="../../ie8/videojs-ie8.min.js"></script>
-
-  <!-- video.js must be in the <head> for older IEs to work. -->
-  <script src="../../video.min.js"></script>
-
-  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
-  <script>
-    videojs.options.flash.swf = "../../video-js.swf";
-  </script>
+  </head>
 
 </head>
+
 <body>
 
-  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
-      poster="http://video-js.zencoder.com/oceans-clip.png"
-      data-setup="{}">
-    <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="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
-    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
+    <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="../shared/example-captions.vtt" srclang="en" label="English"></track>
+    <!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
+    <!-- Tracks need an ending tag thanks to IE9 -->
     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
   </video>
-
 </body>
+
 </html>

dist/font/VideoJS.svg

@@ -2,71 +2,98 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <defs>
-  <font id="VideoJS" horiz-adv-x="512">
+  <font id="VideoJS" horiz-adv-x="1792">
     <font-face font-family="VideoJS"
-      units-per-em="512" ascent="512"
+      units-per-em="1792" ascent="1792"
       descent="0" />
     <missing-glyph horiz-adv-x="0" />
     <glyph glyph-name="play"
       unicode="&#xF101;"
-      horiz-adv-x="512" d=" M170.6666666666667 405.3333333333334V106.6666666666667L405.3333333333333 256z" />
+      horiz-adv-x="1792" d=" M597.3333333333334 1418.6666666666665V373.3333333333333L1418.6666666666667 896z" />
     <glyph glyph-name="play-circle"
       unicode="&#xF102;"
-      horiz-adv-x="512" d=" M213.3333333333333 160L341.3333333333333 256L213.3333333333333 352V160zM256 469.3333333333333C138.1333333333333 469.3333333333333 42.6666666666667 373.8666666666667 42.6666666666667 256S138.1333333333333 42.6666666666667 256 42.6666666666667S469.3333333333333 138.1333333333334 469.3333333333333 256S373.8666666666666 469.3333333333333 256 469.3333333333333zM256 85.3333333333334C161.92 85.3333333333334 85.3333333333333 161.92 85.3333333333333 256S161.92 426.6666666666667 256 426.6666666666667S426.6666666666667 350.0800000000001 426.6666666666667 256S350.08 85.3333333333334 256 85.3333333333334z" />
+      horiz-adv-x="1792" d=" M746.6666666666667 560L1194.6666666666667 896L746.6666666666667 1232V560zM896 1642.6666666666667C483.4666666666667 1642.6666666666667 149.3333333333334 1308.5333333333333 149.3333333333334 896S483.4666666666667 149.3333333333333 896 149.3333333333333S1642.6666666666667 483.4666666666667 1642.6666666666667 896S1308.5333333333333 1642.6666666666667 896 1642.6666666666667zM896 298.6666666666665C566.72 298.6666666666665 298.6666666666667 566.7199999999998 298.6666666666667 896S566.72 1493.3333333333333 896 1493.3333333333333S1493.3333333333335 1225.28 1493.3333333333335 896S1225.2800000000002 298.6666666666665 896 298.6666666666665z" />
     <glyph glyph-name="pause"
       unicode="&#xF103;"
-      horiz-adv-x="512" d=" M128 106.6666666666667H213.3333333333333V405.3333333333334H128V106.6666666666667zM298.6666666666667 405.3333333333334V106.6666666666667H384V405.3333333333334H298.6666666666667z" />
+      horiz-adv-x="1792" d=" M448 373.3333333333333H746.6666666666667V1418.6666666666665H448V373.3333333333333zM1045.3333333333335 1418.6666666666665V373.3333333333333H1344V1418.6666666666665H1045.3333333333335z" />
     <glyph glyph-name="volume-mute"
       unicode="&#xF104;"
-      horiz-adv-x="512" d=" M352 256C352 293.6533333333334 330.24 326.1866666666667 298.6666666666667 341.8666666666667V294.7200000000001L351.04 242.3466666666667C351.68 246.8266666666667 352 251.4133333333334 352 256.0000000000001zM405.3333333333333 256C405.3333333333333 235.9466666666667 400.9600000000001 217.0666666666667 393.8133333333334 199.68L426.1333333333334 167.36C440 193.92 448 224 448 256C448 347.3066666666667 384.1066666666667 423.68 298.6666666666667 443.0933333333334V399.04C360.32 380.6933333333334 405.3333333333333 323.6266666666667 405.3333333333333 256zM91.2 448L64 420.8L164.8 320H64V192H149.3333333333333L256 85.3333333333334V228.8L346.7733333333333 138.0266666666667C332.48 127.04 316.3733333333333 118.1866666666667 298.6666666666667 112.8533333333334V68.8C328 75.52 354.7733333333333 88.96 377.28 107.4133333333333L420.8 64L448 91.2L256 283.2L91.2 448zM256 426.6666666666667L211.4133333333333 382.0800000000001L256 337.4933333333334V426.6666666666667z" />
+      horiz-adv-x="1792" d=" M1232 896C1232 1027.7866666666666 1155.8400000000001 1141.6533333333332 1045.3333333333335 1196.5333333333333V1031.52L1228.6399999999999 848.2133333333334C1230.88 863.8933333333334 1232 879.9466666666667 1232 896.0000000000001zM1418.6666666666667 896C1418.6666666666667 825.8133333333333 1403.3600000000001 759.7333333333333 1378.3466666666668 698.8799999999999L1491.466666666667 585.7599999999998C1540 678.72 1568 783.9999999999999 1568 896C1568 1215.5733333333333 1344.3733333333334 1482.88 1045.3333333333335 1550.8266666666666V1396.6399999999999C1261.1200000000001 1332.4266666666667 1418.6666666666667 1132.6933333333332 1418.6666666666667 896zM319.2000000000001 1568L224 1472.8L576.8 1120H224V672H522.6666666666667L896 298.6666666666665V800.8L1213.7066666666667 483.0933333333332C1163.68 444.6399999999999 1107.3066666666666 413.6533333333332 1045.3333333333335 394.9866666666665V240.7999999999998C1148 264.32 1241.7066666666667 311.3599999999997 1320.48 375.9466666666663L1472.8000000000002 224L1568 319.1999999999998L896 991.1999999999998L319.2000000000001 1568zM896 1493.3333333333333L739.9466666666667 1337.28L896 1181.2266666666667V1493.3333333333333z" />
     <glyph glyph-name="volume-low"
       unicode="&#xF105;"
-      horiz-adv-x="512" d=" M149.3333333333333 320V192H234.6666666666667L341.3333333333333 85.3333333333334V426.6666666666667L234.6666666666667 320H149.3333333333333z" />
+      horiz-adv-x="1792" d=" M522.6666666666667 1120V672H821.3333333333334L1194.6666666666667 298.6666666666665V1493.3333333333333L821.3333333333334 1120H522.6666666666667z" />
     <glyph glyph-name="volume-mid"
       unicode="&#xF106;"
-      horiz-adv-x="512" d=" M394.6666666666667 256C394.6666666666667 293.6533333333334 372.9066666666667 326.1866666666667 341.3333333333333 341.8666666666667V170.0266666666667C372.9066666666667 185.8133333333333 394.6666666666667 218.3466666666667 394.6666666666667 256zM106.6666666666667 320V192H192L298.6666666666667 85.3333333333334V426.6666666666667L192 320H106.6666666666667z" />
+      horiz-adv-x="1792" d=" M1381.3333333333335 896C1381.3333333333335 1027.7866666666666 1305.1733333333334 1141.6533333333332 1194.6666666666667 1196.5333333333333V595.0933333333332C1305.1733333333334 650.3466666666666 1381.3333333333335 764.2133333333331 1381.3333333333335 896zM373.3333333333334 1120V672H672L1045.3333333333335 298.6666666666665V1493.3333333333333L672 1120H373.3333333333334z" />
     <glyph glyph-name="volume-high"
       unicode="&#xF107;"
-      horiz-adv-x="512" d=" M64 320V192H149.3333333333333L256 85.3333333333334V426.6666666666667L149.3333333333333 320H64zM352 256C352 293.6533333333334 330.24 326.1866666666667 298.6666666666667 341.8666666666667V170.0266666666667C330.24 185.8133333333333 352 218.3466666666667 352 256zM298.6666666666667 443.0933333333334V399.04C360.32 380.6933333333334 405.3333333333333 323.6266666666667 405.3333333333333 256S360.32 131.3066666666667 298.6666666666667 112.96V68.9066666666667C384.1066666666667 88.3200000000001 448 164.5866666666667 448 256S384.1066666666667 423.68 298.6666666666667 443.0933333333334z" />
+      horiz-adv-x="1792" d=" M224 1120V672H522.6666666666667L896 298.6666666666665V1493.3333333333333L522.6666666666667 1120H224zM1232 896C1232 1027.7866666666666 1155.8400000000001 1141.6533333333332 1045.3333333333335 1196.5333333333333V595.0933333333332C1155.8400000000001 650.3466666666666 1232 764.2133333333331 1232 896zM1045.3333333333335 1550.8266666666666V1396.6399999999999C1261.1200000000001 1332.4266666666667 1418.6666666666667 1132.6933333333332 1418.6666666666667 896S1261.1200000000001 459.5733333333333 1045.3333333333335 395.3600000000002V241.1733333333332C1344.3733333333334 309.1199999999999 1568 576.0533333333333 1568 896S1344.3733333333334 1482.88 1045.3333333333335 1550.8266666666666z" />
     <glyph glyph-name="fullscreen-enter"
       unicode="&#xF108;"
-      horiz-adv-x="512" d=" M149.3333333333333 213.3333333333334H106.6666666666667V106.6666666666667H213.3333333333333V149.3333333333334H149.3333333333333V213.3333333333334zM106.6666666666667 298.6666666666667H149.3333333333333V362.6666666666667H213.3333333333333V405.3333333333334H106.6666666666667V298.6666666666667zM362.6666666666667 149.3333333333334H298.6666666666667V106.6666666666667H405.3333333333333V213.3333333333334H362.6666666666667V149.3333333333334zM298.6666666666667 405.3333333333334V362.6666666666667H362.6666666666667V298.6666666666667H405.3333333333333V405.3333333333334H298.6666666666667z" />
+      horiz-adv-x="1792" d=" M522.6666666666667 746.6666666666665H373.3333333333334V373.3333333333333H746.6666666666667V522.6666666666665H522.6666666666667V746.6666666666665zM373.3333333333334 1045.3333333333333H522.6666666666667V1269.3333333333333H746.6666666666667V1418.6666666666665H373.3333333333334V1045.3333333333333zM1269.3333333333335 522.6666666666665H1045.3333333333335V373.3333333333333H1418.6666666666667V746.6666666666665H1269.3333333333335V522.6666666666665zM1045.3333333333335 1418.6666666666665V1269.3333333333333H1269.3333333333335V1045.3333333333333H1418.6666666666667V1418.6666666666665H1045.3333333333335z" />
     <glyph glyph-name="fullscreen-exit"
       unicode="&#xF109;"
-      horiz-adv-x="512" d=" M106.6666666666667 170.6666666666667H170.6666666666667V106.6666666666667H213.3333333333333V213.3333333333334H106.6666666666667V170.6666666666667zM170.6666666666667 341.3333333333334H106.6666666666667V298.6666666666667H213.3333333333333V405.3333333333334H170.6666666666667V341.3333333333334zM298.6666666666667 106.6666666666667H341.3333333333333V170.6666666666667H405.3333333333333V213.3333333333334H298.6666666666667V106.6666666666667zM341.3333333333333 341.3333333333334V405.3333333333334H298.6666666666667V298.6666666666667H405.3333333333333V341.3333333333334H341.3333333333333z" />
+      horiz-adv-x="1792" d=" M373.3333333333334 597.3333333333333H597.3333333333334V373.3333333333333H746.6666666666667V746.6666666666665H373.3333333333334V597.3333333333333zM597.3333333333334 1194.6666666666665H373.3333333333334V1045.3333333333333H746.6666666666667V1418.6666666666665H597.3333333333334V1194.6666666666665zM1045.3333333333335 373.3333333333333H1194.6666666666667V597.3333333333333H1418.6666666666667V746.6666666666665H1045.3333333333335V373.3333333333333zM1194.6666666666667 1194.6666666666665V1418.6666666666665H1045.3333333333335V1045.3333333333333H1418.6666666666667V1194.6666666666665H1194.6666666666667z" />
     <glyph glyph-name="square"
       unicode="&#xF10A;"
-      horiz-adv-x="512" d=" M384 426.6666666666667H128C104.4266666666667 426.6666666666667 85.3333333333333 407.5733333333334 85.3333333333333 384V128C85.3333333333333 104.4266666666667 104.4266666666667 85.3333333333334 128 85.3333333333334H384C407.5733333333333 85.3333333333334 426.6666666666667 104.4266666666667 426.6666666666667 128V384C426.6666666666667 407.5733333333334 407.5733333333333 426.6666666666667 384 426.6666666666667zM384 128H128V384H384V128z" />
+      horiz-adv-x="1792" d=" M1344 1493.3333333333333H448C365.4933333333334 1493.3333333333333 298.6666666666667 1426.5066666666667 298.6666666666667 1344V448C298.6666666666667 365.4933333333331 365.4933333333334 298.6666666666665 448 298.6666666666665H1344C1426.506666666667 298.6666666666665 1493.3333333333335 365.4933333333331 1493.3333333333335 448V1344C1493.3333333333335 1426.5066666666667 1426.506666666667 1493.3333333333333 1344 1493.3333333333333zM1344 448H448V1344H1344V448z" />
     <glyph glyph-name="spinner"
       unicode="&#xF10B;"
-      horiz-adv-x="512" d=" M200.5333333333333 288L302.1866666666666 464.1066666666667C287.36 467.4133333333334 271.8933333333333 469.3333333333333 256 469.3333333333333C204.8 469.3333333333333 157.9733333333333 451.3066666666667 121.1733333333333 421.2266666666667L199.36 285.8666666666667L200.5333333333333 288zM459.52 320C439.8933333333333 382.4 392.32 432.2133333333334 331.6266666666666 455.2533333333333L253.5466666666667 320H459.52zM465.0666666666667 298.6666666666667H305.28L311.4666666666667 288L413.12 112C447.8933333333333 149.9733333333334 469.3333333333333 200.4266666666667 469.3333333333333 256C469.3333333333333 270.6133333333334 467.84 284.9066666666667 465.0666666666667 298.6666666666667zM182.08 256L98.88 400C64.1066666666667 362.0266666666667 42.6666666666667 311.5733333333334 42.6666666666667 256C42.6666666666667 241.3866666666667 44.16 227.0933333333334 46.9333333333333 213.3333333333334H206.72L182.0800000000001 256zM52.48 192C72.1066666666667 129.6 119.68 79.7866666666668 180.3733333333333 56.7466666666667L258.4533333333333 192H52.48zM292.9066666666667 192L209.7066666666667 47.8933333333334C224.64 44.5866666666667 240.1066666666667 42.6666666666667 256 42.6666666666667C307.2 42.6666666666667 354.0266666666667 60.6933333333333 390.8266666666667 90.7733333333333L312.64 226.1333333333334L292.9066666666667 192z" />
+      horiz-adv-x="1792" d=" M701.8666666666668 1008L1057.6533333333334 1624.3733333333334C1005.7600000000002 1635.9466666666667 951.6266666666666 1642.6666666666667 896 1642.6666666666667C716.8000000000001 1642.6666666666667 552.9066666666668 1579.5733333333333 424.1066666666667 1474.2933333333333L697.76 1000.5333333333334L701.8666666666666 1008zM1608.32 1120C1539.6266666666666 1338.4 1373.1200000000001 1512.7466666666667 1160.6933333333332 1593.3866666666668L887.4133333333334 1120H1608.32zM1627.7333333333336 1045.3333333333333H1068.48L1090.1333333333334 1008L1445.92 392C1567.6266666666668 524.9066666666668 1642.6666666666667 701.4933333333333 1642.6666666666667 896C1642.6666666666667 947.1466666666666 1637.44 997.1733333333332 1627.7333333333336 1045.3333333333333zM637.2800000000001 896L346.08 1400C224.3733333333333 1267.0933333333332 149.3333333333334 1090.5066666666667 149.3333333333334 896C149.3333333333334 844.8533333333332 154.56 794.8266666666666 164.2666666666667 746.6666666666665H723.5200000000001L637.2800000000002 896zM183.68 672C252.3733333333334 453.5999999999999 418.88 279.2533333333334 631.3066666666667 198.6133333333332L904.5866666666668 672H183.68zM1025.1733333333334 672L733.9733333333334 167.6266666666666C786.24 156.0533333333333 840.3733333333334 149.3333333333333 896 149.3333333333333C1075.2 149.3333333333333 1239.0933333333332 212.4266666666665 1367.8933333333334 317.7066666666665L1094.24 791.4666666666666L1025.1733333333334 672z" />
     <glyph glyph-name="subtitles"
       unicode="&#xF10C;"
-      horiz-adv-x="512" d=" M426.6666666666667 426.6666666666667H85.3333333333333C61.76 426.6666666666667 42.6666666666667 407.5733333333334 42.6666666666667 384V128C42.6666666666667 104.4266666666667 61.76 85.3333333333334 85.3333333333333 85.3333333333334H426.6666666666667C450.24 85.3333333333334 469.3333333333333 104.4266666666667 469.3333333333333 128V384C469.3333333333333 407.5733333333334 450.24 426.6666666666667 426.6666666666667 426.6666666666667zM85.3333333333333 256H170.6666666666667V213.3333333333334H85.3333333333333V256zM298.6666666666667 128H85.3333333333333V170.6666666666667H298.6666666666667V128zM426.6666666666667 128H341.3333333333333V170.6666666666667H426.6666666666667V128zM426.6666666666667 213.3333333333334H213.3333333333333V256H426.6666666666667V213.3333333333334z" />
+      horiz-adv-x="1792" d=" M1493.3333333333335 1493.3333333333333H298.6666666666667C216.16 1493.3333333333333 149.3333333333334 1426.5066666666667 149.3333333333334 1344V448C149.3333333333334 365.4933333333331 216.16 298.6666666666665 298.6666666666667 298.6666666666665H1493.3333333333335C1575.8400000000001 298.6666666666665 1642.6666666666667 365.4933333333331 1642.6666666666667 448V1344C1642.6666666666667 1426.5066666666667 1575.8400000000001 1493.3333333333333 1493.3333333333335 1493.3333333333333zM298.6666666666667 896H597.3333333333334V746.6666666666665H298.6666666666667V896zM1045.3333333333335 448H298.6666666666667V597.3333333333333H1045.3333333333335V448zM1493.3333333333335 448H1194.6666666666667V597.3333333333333H1493.3333333333335V448zM1493.3333333333335 746.6666666666665H746.6666666666667V896H1493.3333333333335V746.6666666666665z" />
     <glyph glyph-name="captions"
       unicode="&#xF10D;"
-      horiz-adv-x="512" d=" M405.3333333333333 426.6666666666667H106.6666666666667C83.0933333333333 426.6666666666667 64 407.5733333333334 64 384V128C64 104.4266666666667 83.0933333333333 85.3333333333334 106.6666666666667 85.3333333333334H405.3333333333333C428.9066666666667 85.3333333333334 448 104.4266666666667 448 128V384C448 407.5733333333334 428.9066666666667 426.6666666666667 405.3333333333333 426.6666666666667zM234.6666666666667 277.3333333333334H202.6666666666667V288H160V224H202.6666666666667V234.6666666666667H234.6666666666667V213.3333333333334C234.6666666666667 201.6 225.1733333333333 192 213.3333333333333 192H149.3333333333333C137.4933333333334 192 128 201.6 128 213.3333333333334V298.6666666666667C128 310.4000000000001 137.4933333333334 320 149.3333333333333 320H213.3333333333333C225.1733333333333 320 234.6666666666667 310.4000000000001 234.6666666666667 298.6666666666667V277.3333333333334zM384 277.3333333333334H352V288H309.3333333333333V224H352V234.6666666666667H384V213.3333333333334C384 201.6 374.5066666666667 192 362.6666666666667 192H298.6666666666667C286.8266666666667 192 277.3333333333333 201.6 277.3333333333333 213.3333333333334V298.6666666666667C277.3333333333333 310.4000000000001 286.8266666666667 320 298.6666666666667 320H362.6666666666667C374.5066666666667 320 384 310.4000000000001 384 298.6666666666667V277.3333333333334z" />
+      horiz-adv-x="1792" d=" M1418.6666666666667 1493.3333333333333H373.3333333333334C290.8266666666667 1493.3333333333333 224 1426.5066666666667 224 1344V448C224 365.4933333333331 290.8266666666667 298.6666666666665 373.3333333333334 298.6666666666665H1418.6666666666667C1501.1733333333334 298.6666666666665 1568 365.4933333333331 1568 448V1344C1568 1426.5066666666667 1501.1733333333334 1493.3333333333333 1418.6666666666667 1493.3333333333333zM821.3333333333334 970.6666666666666H709.3333333333334V1008H560V783.9999999999999H709.3333333333334V821.3333333333333H821.3333333333334V746.6666666666665C821.3333333333334 705.5999999999999 788.1066666666667 672 746.6666666666667 672H522.6666666666667C481.2266666666667 672 448 705.5999999999999 448 746.6666666666665V1045.3333333333333C448 1086.4 481.2266666666667 1120 522.6666666666667 1120H746.6666666666667C788.1066666666667 1120 821.3333333333334 1086.4 821.3333333333334 1045.3333333333333V970.6666666666666zM1344 970.6666666666666H1232V1008H1082.6666666666667V783.9999999999999H1232V821.3333333333333H1344V746.6666666666665C1344 705.5999999999999 1310.7733333333333 672 1269.3333333333335 672H1045.3333333333335C1003.8933333333334 672 970.6666666666669 705.5999999999999 970.6666666666669 746.6666666666665V1045.3333333333333C970.6666666666669 1086.4 1003.8933333333334 1120 1045.3333333333335 1120H1269.3333333333335C1310.7733333333333 1120 1344 1086.4 1344 1045.3333333333333V970.6666666666666z" />
     <glyph glyph-name="chapters"
       unicode="&#xF10E;"
-      horiz-adv-x="512" d=" M64 234.6666666666667H106.6666666666667V277.3333333333334H64V234.6666666666667zM64 149.3333333333334H106.6666666666667V192H64V149.3333333333334zM64 320H106.6666666666667V362.6666666666667H64V320zM149.3333333333333 234.6666666666667H448V277.3333333333334H149.3333333333333V234.6666666666667zM149.3333333333333 149.3333333333334H448V192H149.3333333333333V149.3333333333334zM149.3333333333333 362.6666666666667V320H448V362.6666666666667H149.3333333333333z" />
+      horiz-adv-x="1792" d=" M224 821.3333333333333H373.3333333333334V970.6666666666666H224V821.3333333333333zM224 522.6666666666665H373.3333333333334V672H224V522.6666666666665zM224 1120H373.3333333333334V1269.3333333333333H224V1120zM522.6666666666667 821.3333333333333H1568V970.6666666666666H522.6666666666667V821.3333333333333zM522.6666666666667 522.6666666666665H1568V672H522.6666666666667V522.6666666666665zM522.6666666666667 1269.3333333333333V1120H1568V1269.3333333333333H522.6666666666667z" />
     <glyph glyph-name="share"
       unicode="&#xF10F;"
-      horiz-adv-x="512" d=" M384 168.8533333333334C367.7866666666667 168.8533333333334 353.1733333333333 162.56 342.08 152.4266666666667L190.08 241.0666666666667C191.2533333333333 245.8666666666667 192 250.8800000000001 192 256S191.2533333333333 266.1333333333334 190.08 270.9333333333334L340.48 358.7200000000001C351.8933333333333 348.0533333333334 367.1466666666667 341.44 384 341.44C419.3066666666667 341.44 448 370.1333333333334 448 405.44S419.3066666666667 469.44 384 469.44S320 440.7466666666667 320 405.44C320 400.32 320.7466666666667 395.3066666666667 321.92 390.5066666666667L171.52 302.72C160.1066666666666 313.3866666666667 144.8533333333333 320 128 320C92.6933333333333 320 64 291.3066666666666 64 256S92.6933333333333 192 128 192C144.8533333333333 192 160.1066666666666 198.6133333333334 171.52 209.28L323.52 120.64C322.4533333333333 116.16 321.8133333333333 111.4666666666666 321.8133333333333 106.6666666666666C321.8133333333333 72.3199999999999 349.6533333333333 44.48 384 44.48S446.1866666666666 72.3199999999999 446.1866666666666 106.6666666666666S418.3466666666667 168.8533333333333 384 168.8533333333333z" />
+      horiz-adv-x="1792" d=" M1344 590.9866666666665C1287.2533333333333 590.9866666666665 1236.1066666666668 568.9599999999998 1197.2800000000002 533.4933333333331L665.2800000000001 843.7333333333333C669.3866666666667 860.5333333333333 672 878.08 672 896S669.3866666666667 931.4666666666666 665.2800000000001 948.2666666666667L1191.68 1255.52C1231.6266666666668 1218.1866666666665 1285.0133333333335 1195.04 1344 1195.04C1467.5733333333335 1195.04 1568 1295.4666666666665 1568 1419.04S1467.5733333333335 1643.04 1344 1643.04S1120 1542.6133333333332 1120 1419.04C1120 1401.12 1122.6133333333335 1383.5733333333333 1126.72 1366.773333333333L600.3199999999999 1059.5199999999998C560.3733333333333 1096.853333333333 506.9866666666666 1119.9999999999998 448 1119.9999999999998C324.4266666666666 1119.9999999999998 224 1019.5733333333332 224 895.9999999999998S324.4266666666666 671.9999999999998 448 671.9999999999998C506.9866666666666 671.9999999999998 560.3733333333333 695.1466666666665 600.3199999999999 732.4799999999998L1132.32 422.2399999999998C1128.5866666666666 406.5599999999997 1126.3466666666666 390.133333333333 1126.3466666666666 373.3333333333331C1126.3466666666666 253.1199999999997 1223.7866666666669 155.6799999999996 1344 155.6799999999996S1561.6533333333334 253.1199999999997 1561.6533333333334 373.3333333333331S1464.2133333333334 590.9866666666662 1344 590.9866666666662z" />
     <glyph glyph-name="cog"
       unicode="&#xF110;"
-      horiz-adv-x="512" d=" M414.5066666666667 235.2000000000001C415.36 242.0266666666667 416 248.9600000000001 416 256S415.36 269.9733333333334 414.5066666666667 276.8L459.6266666666667 312.1066666666667C463.6800000000001 315.3066666666667 464.8533333333334 321.0666666666667 462.1866666666667 325.76L419.5200000000001 399.68C416.8533333333334 404.2666666666667 411.3066666666667 406.1866666666667 406.5066666666667 404.2666666666667L353.3866666666668 382.8266666666667C342.4000000000001 391.2533333333334 330.3466666666668 398.4 317.3333333333335 403.8400000000001L309.3333333333333 460.3733333333333C308.3733333333334 465.3866666666667 304 469.3333333333333 298.6666666666667 469.3333333333333H213.3333333333333C208 469.3333333333333 203.6266666666667 465.3866666666667 202.7733333333334 460.3733333333333L194.7733333333334 403.8400000000001C181.76 398.4 169.7066666666667 391.36 158.72 382.8266666666667L105.6 404.2666666666667C100.8 406.0800000000001 95.2533333333333 404.2666666666667 92.5866666666667 399.68L49.92 325.76C47.2533333333333 321.1733333333334 48.4266666666667 315.4133333333334 52.48 312.1066666666667L97.4933333333333 276.8C96.64 269.9733333333334 96 263.04 96 256S96.64 242.0266666666667 97.4933333333333 235.2000000000001L52.48 199.8933333333334C48.4266666666667 196.6933333333334 47.2533333333333 190.9333333333334 49.92 186.24L92.5866666666667 112.3200000000001C95.2533333333333 107.7333333333334 100.8 105.8133333333334 105.6 107.7333333333334L158.72 129.1733333333334C169.7066666666667 120.7466666666667 181.76 113.6 194.7733333333334 108.16L202.7733333333334 51.6266666666667C203.6266666666667 46.6133333333334 208 42.6666666666667 213.3333333333333 42.6666666666667H298.6666666666667C304 42.6666666666667 308.3733333333334 46.6133333333333 309.2266666666667 51.6266666666667L317.2266666666667 108.16C330.24 113.6 342.2933333333333 120.6400000000001 353.28 129.1733333333334L406.3999999999999 107.7333333333334C411.2 105.92 416.7466666666666 107.7333333333334 419.4133333333333 112.3200000000001L462.0799999999999 186.24C464.7466666666666 190.8266666666667 463.5733333333333 196.5866666666667 459.5199999999999 199.8933333333334L414.5066666666666 235.2000000000001zM256 181.3333333333334C214.72 181.3333333333334 181.3333333333333 214.72 181.3333333333333 256S214.72 330.6666666666667 256 330.6666666666667S330.6666666666667 297.2800000000001 330.6666666666667 256S297.28 181.3333333333334 256 181.3333333333334z" />
+      horiz-adv-x="1792" d=" M1450.7733333333333 823.1999999999999C1453.76 847.0933333333334 1456 871.3599999999999 1456 896S1453.76 944.9066666666666 1450.7733333333333 968.8L1608.6933333333336 1092.3733333333332C1622.8800000000003 1103.5733333333333 1626.986666666667 1123.7333333333331 1617.6533333333336 1140.1599999999999L1468.3200000000004 1398.8799999999999C1458.986666666667 1414.9333333333334 1439.5733333333335 1421.6533333333332 1422.7733333333338 1414.9333333333334L1236.8533333333337 1339.8933333333332C1198.4000000000003 1369.3866666666668 1156.2133333333338 1394.3999999999999 1110.6666666666672 1413.44L1082.6666666666667 1611.3066666666666C1079.3066666666668 1628.8533333333332 1064 1642.6666666666667 1045.3333333333335 1642.6666666666667H746.6666666666667C728 1642.6666666666667 712.6933333333334 1628.8533333333332 709.7066666666668 1611.3066666666666L681.7066666666668 1413.44C636.1600000000002 1394.4 593.9733333333335 1369.76 555.5200000000001 1339.8933333333332L369.6 1414.9333333333334C352.8000000000001 1421.28 333.3866666666667 1414.9333333333334 324.0533333333334 1398.88L174.72 1140.1599999999999C165.3866666666667 1124.1066666666666 169.4933333333334 1103.9466666666667 183.68 1092.3733333333332L341.2266666666667 968.8C338.2400000000001 944.9066666666666 336 920.64 336 896S338.2400000000001 847.0933333333334 341.2266666666667 823.1999999999999L183.68 699.6266666666668C169.4933333333334 688.4266666666667 165.3866666666667 668.2666666666667 174.72 651.8399999999999L324.0533333333334 393.1199999999999C333.3866666666667 377.0666666666666 352.8 370.3466666666666 369.6 377.0666666666666L555.5200000000001 452.1066666666666C593.9733333333334 422.6133333333333 636.16 397.5999999999999 681.7066666666668 378.56L709.7066666666668 180.6933333333334C712.6933333333334 163.1466666666668 728 149.3333333333333 746.6666666666667 149.3333333333333H1045.3333333333335C1064 149.3333333333333 1079.3066666666668 163.1466666666665 1082.2933333333333 180.6933333333334L1110.2933333333333 378.56C1155.84 397.5999999999999 1198.0266666666666 422.24 1236.48 452.1066666666666L1422.3999999999999 377.0666666666666C1439.2 370.7199999999998 1458.6133333333332 377.0666666666666 1467.9466666666665 393.1199999999999L1617.2799999999997 651.8399999999999C1626.6133333333332 667.8933333333332 1622.5066666666664 688.0533333333333 1608.3199999999997 699.6266666666668L1450.773333333333 823.1999999999999zM896 634.6666666666665C751.52 634.6666666666665 634.6666666666667 751.52 634.6666666666667 896S751.52 1157.3333333333333 896 1157.3333333333333S1157.3333333333335 1040.48 1157.3333333333335 896S1040.48 634.6666666666665 896 634.6666666666665z" />
     <glyph glyph-name="circle"
       unicode="&#xF111;"
-      horiz-adv-x="512" d=" M42.6666666666667 256C42.6666666666667 138.1792533694308 138.1792533694307 42.6666666666667 256 42.6666666666667C373.8207466305693 42.6666666666667 469.3333333333333 138.1792533694308 469.3333333333333 256C469.3333333333333 373.8207466305693 373.8207466305693 469.3333333333333 256 469.3333333333333C138.1792533694307 469.3333333333333 42.6666666666667 373.8207466305693 42.6666666666667 256z" />
+      horiz-adv-x="1792" d=" M149.3333333333334 896C149.3333333333334 483.6273867930074 483.6273867930075 149.3333333333333 896 149.3333333333333C1308.3726132069926 149.3333333333333 1642.6666666666667 483.6273867930074 1642.6666666666667 896C1642.6666666666667 1308.3726132069926 1308.3726132069926 1642.6666666666667 896 1642.6666666666667C483.6273867930075 1642.6666666666667 149.3333333333334 1308.3726132069926 149.3333333333334 896z" />
     <glyph glyph-name="circle-outline"
       unicode="&#xF112;"
-      horiz-adv-x="512" d=" M256 469.3333333333333C138.1333333333333 469.3333333333333 42.6666666666667 373.8666666666667 42.6666666666667 256S138.1333333333333 42.6666666666667 256 42.6666666666667S469.3333333333333 138.1333333333334 469.3333333333333 256S373.8666666666666 469.3333333333333 256 469.3333333333333zM256 85.3333333333334C161.92 85.3333333333334 85.3333333333333 161.92 85.3333333333333 256S161.92 426.6666666666667 256 426.6666666666667S426.6666666666667 350.0800000000001 426.6666666666667 256S350.08 85.3333333333334 256 85.3333333333334z" />
+      horiz-adv-x="1792" d=" M896 1642.6666666666667C483.4666666666667 1642.6666666666667 149.3333333333334 1308.5333333333333 149.3333333333334 896S483.4666666666667 149.3333333333333 896 149.3333333333333S1642.6666666666667 483.4666666666667 1642.6666666666667 896S1308.5333333333333 1642.6666666666667 896 1642.6666666666667zM896 298.6666666666665C566.72 298.6666666666665 298.6666666666667 566.7199999999998 298.6666666666667 896S566.72 1493.3333333333333 896 1493.3333333333333S1493.3333333333335 1225.28 1493.3333333333335 896S1225.2800000000002 298.6666666666665 896 298.6666666666665z" />
     <glyph glyph-name="circle-inner-circle"
       unicode="&#xF113;"
-      horiz-adv-x="512" d=" M256 469.3333333333333C138.3466666666667 469.3333333333333 42.6666666666667 373.6533333333333 42.6666666666667 256S138.3466666666667 42.6666666666667 256 42.6666666666667S469.3333333333333 138.3466666666667 469.3333333333333 256S373.6533333333333 469.3333333333333 256 469.3333333333333zM256 85.3333333333334C161.92 85.3333333333334 85.3333333333333 161.92 85.3333333333333 256S161.92 426.6666666666667 256 426.6666666666667S426.6666666666667 350.0800000000001 426.6666666666667 256S350.08 85.3333333333334 256 85.3333333333334zM320 256C320 220.6933333333334 291.3066666666666 192 256 192S192 220.6933333333334 192 256S220.6933333333333 320 256 320S320 291.3066666666667 320 256z" />
-    <glyph glyph-name="audio-description"
+      horiz-adv-x="1792" d=" M896 1642.6666666666667C484.2133333333334 1642.6666666666667 149.3333333333334 1307.7866666666666 149.3333333333334 896S484.2133333333334 149.3333333333333 896 149.3333333333333S1642.6666666666667 484.2133333333331 1642.6666666666667 896S1307.7866666666669 1642.6666666666667 896 1642.6666666666667zM896 298.6666666666665C566.72 298.6666666666665 298.6666666666667 566.7199999999998 298.6666666666667 896S566.72 1493.3333333333333 896 1493.3333333333333S1493.3333333333335 1225.28 1493.3333333333335 896S1225.2800000000002 298.6666666666665 896 298.6666666666665zM1120 896C1120 772.4266666666666 1019.5733333333334 672 896 672S672 772.4266666666666 672 896S772.4266666666667 1120 896 1120S1120 1019.5733333333332 1120 896z" />
+    <glyph glyph-name="hd"
       unicode="&#xF114;"
-      horiz-adv-x="512" d=" M227.289682989 130.648838L227.289682989 349.0070938950001C277.6702185 350.0243205440001 316.3980869 352.03531578 344.921102 331.8810063C372.295426 312.5387722000001 393.654923 274.9158875 389.810661 226.556463C385.743598 175.400839 348.475879 132.417149 300.0353987 128.081247C275.9502648 125.925665 228.0625443 128.081247 228.0625443 128.081247C228.0625443 128.081247 227.222611733 129.433284 227.289682989 130.648838M276.0447042 185.453256C307.4745261 184.193345 329.253026 202.086298 332.540288 230.838625C336.942707 269.3482243000001 311.3515531 294.3911928 274.4985961 291.6350844L274.4985961 188.02298C274.4627477 186.556638 275.0744838 185.803848 276.0447042 185.453256 M383.779991 130.671935C397.1159924 126.962576 401.166865 141.7313420000001 406.9951259 152.079757C419.716693 174.6511000000001 429.2886092 203.673834 429.4404832 236.853763C429.6613558 284.4480278 411.0972656 319.3706768 393.839523 343.0355910887L385.32918283 343.0355910887C384.74288754 339.1624526400001 387.55564016 335.7213689500001 389.19541674 332.7596826C402.3614272 308.9983771000001 414.5618429 276.2065726 414.7356885 238.566201C414.9345895 195.3901550000001 400.5732459 159.287779 383.779991 130.671935 M425.153705 130.671935C438.4897064 126.962576 442.5378808 141.733475 448.3688399 152.079757C461.090407 174.6511000000001 470.6603959 203.673834 470.8141972 236.853763C471.0350698 284.4480278 452.4709796 319.3706768 435.213237 343.0355910887L426.70289683 343.0355910887C426.11660154 339.1624526400001 428.92858323 335.7205159300001 430.56913074 332.7596826C443.7351412 308.9983771000001 455.9359424 276.2065726 456.1094025 238.566201C456.3083035 195.3901550000001 441.9469599 159.287779 425.153705 130.671935 M466.260868 130.671935C479.5968694 126.962576 483.6450438 141.733475 489.4760029 152.079757C502.19757 174.6511000000001 511.7675589 203.673834 511.9213602 236.853763C512.1422328 284.4480278 493.5781426 319.3706768 476.3204 343.0355910887L467.81005983 343.0355910887C467.22376454 339.1624526400001 470.03574623 335.7209424400001 471.67629374 332.7596826C484.8423042 308.9983771000001 497.0427199 276.2065726 497.2165655 238.566201C497.4154665 195.3901550000001 483.0541229 159.287779 466.260868 130.671935 M4.4765625 128.994842L72.5800993 128.994842L91.1530552 157.478514L155.321745 157.613942C155.321745 157.613942 155.386889 138.200917 155.386889 128.994842L204.142681 128.994842L204.142681 351.691737L145.326586 351.691737C139.673713 342.1546170000001 4.4765625 128.994842 4.4765625 128.994842L4.4765625 128.994842zM157.144233 274.277389L157.144233 203.118942L116.6914 203.389797L157.144233 274.277389L157.144233 274.277389z" />
+      horiz-adv-x="1792" d=" M1418.6666666666667 1568H373.3333333333334C290.4533333333333 1568 224 1500.8 224 1418.6666666666665V373.3333333333333C224 291.1999999999998 290.4533333333334 224 373.3333333333334 224H1418.6666666666667C1500.8000000000002 224 1568 291.1999999999998 1568 373.3333333333333V1418.6666666666665C1568 1500.8 1500.8000000000002 1568 1418.6666666666667 1568zM821.3333333333334 672H709.3333333333334V821.3333333333333H560V672H448V1120H560V933.3333333333331H709.3333333333334V1120H821.3333333333334V672zM970.6666666666669 1120H1269.3333333333335C1310.4 1120 1344 1086.4 1344 1045.3333333333333V746.6666666666665C1344 705.5999999999999 1310.4 672 1269.3333333333335 672H970.6666666666669V1120zM1082.6666666666667 783.9999999999999H1232V1008H1082.6666666666667V783.9999999999999z" />
+    <glyph glyph-name="cancel"
+      unicode="&#xF115;"
+      horiz-adv-x="1792" d=" M896 1642.6666666666667C483.4666666666667 1642.6666666666667 149.3333333333334 1308.5333333333333 149.3333333333334 896S483.4666666666667 149.3333333333333 896 149.3333333333333S1642.6666666666667 483.4666666666667 1642.6666666666667 896S1308.5333333333333 1642.6666666666667 896 1642.6666666666667zM1269.3333333333335 628.3199999999999L1163.68 522.6666666666665L896 790.3466666666667L628.3199999999999 522.6666666666665L522.6666666666667 628.3199999999999L790.3466666666668 896L522.6666666666667 1163.68L628.3199999999999 1269.3333333333333L896 1001.6533333333332L1163.68 1269.3333333333333L1269.3333333333335 1163.68L1001.6533333333334 896L1269.3333333333335 628.3199999999999z" />
+    <glyph glyph-name="replay"
+      unicode="&#xF116;"
+      horiz-adv-x="1792" d=" M896 1418.6666666666665V1717.3333333333333L522.6666666666667 1344L896 970.6666666666666V1269.3333333333333C1143.52 1269.3333333333333 1344 1068.8533333333332 1344 821.3333333333333S1143.52 373.3333333333333 896 373.3333333333333S448 573.813333333333 448 821.3333333333333H298.6666666666667C298.6666666666667 491.3066666666664 565.9733333333334 224 896 224S1493.3333333333335 491.3066666666664 1493.3333333333335 821.3333333333333S1226.0266666666669 1418.6666666666665 896 1418.6666666666665z" />
+    <glyph glyph-name="facebook"
+      unicode="&#xF117;"
+      horiz-adv-x="1792" d=" M1343 1780V1516H1186Q1100 1516 1070 1480T1040 1372V1183H1333L1294 887H1040V128H734V887H479V1183H734V1401Q734 1587 838 1689.5T1115 1792Q1262 1792 1343 1780z" />
+    <glyph glyph-name="gplus"
+      unicode="&#xF118;"
+      horiz-adv-x="1792" d=" M799 996Q799 960 831 925.5T908.5 857.5T999 784T1076 680T1108 538Q1108 448 1060 365Q988 243 849 185.5T551 128Q419 128 304.5 169.5T133 307Q96 367 96 438Q96 519 140.5 588T259 703Q390 785 663 803Q631 845 615.5 877T600 950Q600 986 621 1035Q575 1031 553 1031Q405 1031 303.5 1127.5T202 1372Q202 1454 238 1531T337 1662Q414 1728 519.5 1760T737 1792H1155L1017 1704H886Q960 1641 998 1571T1036 1411Q1036 1339 1011.5 1281.5T952.5 1188.5T883 1123.5T823.5 1062T799 996zM653 1092Q691 1092 731 1108.5T797 1152Q850 1209 850 1311Q850 1369 833 1436T784.5 1565.5T700 1669T583 1710Q541 1710 500.5 1690.5T435 1638Q388 1579 388 1478Q388 1432 398 1380.5T429.5 1277.5T481.5 1185T556.5 1118T653 1092zM655 219Q713 219 766.5 232T865.5 271T938.5 344T966 453Q966 478 959 502T944.5 544T917.5 585.5T888 620.5T849.5 655T813 684T771.5 714T735 740Q719 742 687 742Q634 742 582 735T474.5 710T377.5 664T309 589.5T282 484Q282 414 317 360.5T408.5 277.5T527.5 233.5T655 219zM1465 1095H1678V987H1465V768H1360V987H1148V1095H1360V1312H1465V1095z" />
+    <glyph glyph-name="linkedin"
+      unicode="&#xF119;"
+      horiz-adv-x="1792" d=" M477 1167V176H147V1167H477zM498 1473Q499 1400 447.5 1351T312 1302H310Q228 1302 178 1351T128 1473Q128 1547 179.5 1595.5T314 1644T447 1595.5T498 1473zM1664 744V176H1335V706Q1335 811 1294.5 870.5T1168 930Q1105 930 1062.5 895.5T999 810Q988 780 988 729V176H659Q661 575 661 823T660 1119L659 1167H988V1023H986Q1006 1055 1027 1079T1083.5 1131T1170.5 1174.5T1285 1190Q1456 1190 1560 1076.5T1664 744z" />
+    <glyph glyph-name="twitter"
+      unicode="&#xF11A;"
+      horiz-adv-x="1792" d=" M1684 1384Q1617 1286 1522 1217Q1523 1203 1523 1175Q1523 1045 1485 915.5T1369.5 667T1185 456.5T927 310.5T604 256Q333 256 108 401Q143 397 186 397Q411 397 587 535Q482 537 399 599.5T285 759Q318 754 346 754Q389 754 431 765Q319 788 245.5 876.5T172 1082V1086Q240 1048 318 1045Q252 1089 213 1160T174 1314Q174 1402 218 1477Q339 1328 512.5 1238.5T884 1139Q876 1177 876 1213Q876 1347 970.5 1441.5T1199 1536Q1339 1536 1435 1434Q1544 1455 1640 1512Q1603 1397 1498 1334Q1591 1344 1684 1384z" />
+    <glyph glyph-name="tumblr"
+      unicode="&#xF11B;"
+      horiz-adv-x="1792" d=" M1328 463L1408 226Q1385 191 1297 160T1120 128Q1016 126 929.5 154T787 228T692 334T636.5 454T620 572V1116H452V1331Q524 1357 581 1400.5T672 1490.5T730 1592.5T764 1691.5T779 1780Q780 1785 783.5 1788.5T791 1792H1035V1368H1368V1116H1034V598Q1034 568 1040.5 542T1063 489.5T1112.5 448T1194 434Q1272 436 1328 463z" />
+    <glyph glyph-name="pinterest"
+      unicode="&#xF11C;"
+      horiz-adv-x="1792" d=" M1664 896Q1664 687 1561 510.5T1281.5 231T896 128Q785 128 678 160Q737 253 756 324Q765 358 810 535Q830 496 883 467.5T997 439Q1118 439 1213 507.5T1360 696T1412 966Q1412 1080 1352.5 1180T1180 1343T925 1406Q820 1406 729 1377T574.5 1300T465.5 1189.5T398.5 1060T377 926Q377 822 417 743T534 632Q564 620 572 652Q574 659 580 683T588 713Q594 736 577 756Q526 817 526 907Q526 1058 630.5 1166.5T904 1275Q1055 1275 1139.5 1193T1224 980Q1224 810 1155.5 691T980 572Q919 572 882 615.5T859 720Q867 755 885.5 813.5T915.5 916.5T927 992Q927 1042 900 1075T823 1108Q761 1108 718 1051T675 909Q675 836 700 787L601 369Q584 299 588 192Q382 283 255 473T128 896Q128 1105 231 1281.5T510.5 1561T896 1664T1281.5 1561T1561 1281.5T1664 896z" />
+    <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" />
   </font>
 </defs>
 </svg>

dist/lang/nb.js

@@ -0,0 +1,26 @@
+videojs.addLanguage("nb",{
+ "Play": "Spill",
+ "Pause": "Pause",
+ "Current Time": "Aktuell tid",
+ "Duration Time": "Varighet",
+ "Remaining Time": "Gjenstående tid",
+ "Stream Type": "Type strøm",
+ "LIVE": "DIREKTE",
+ "Loaded": "Lastet inn",
+ "Progress": "Status",
+ "Fullscreen": "Fullskjerm",
+ "Non-Fullscreen": "Lukk fullskjerm",
+ "Mute": "Lyd av",
+ "Unmuted": "Lyd på",
+ "Playback Rate": "Avspillingsrate",
+ "Subtitles": "Undertekst på",
+ "subtitles off": "Undertekst av",
+ "Captions": "Undertekst for hørselshemmede på",
+ "captions off": "Undertekst for hørselshemmede av",
+ "Chapters": "Kapitler",
+ "You aborted the media playback": "Du avbrøt avspillingen.",
+ "A network error caused the media download to fail part-way.": "En nettverksfeil avbrøt nedlasting av videoen.",
+ "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikke lastes ned, på grunn av nettverksfeil eller serverfeil, eller fordi formatet ikke er støttet.",
+ "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspillingen ble avbrudt på grunn av ødelagte data eller fordi videoen ville gjøre noe som nettleseren din ikke har støtte for.",
+ "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet."
+});

dist/lang/nl.js

@@ -1,26 +1,26 @@
 videojs.addLanguage("nl",{
  "Play": "Afspelen",
  "Pause": "Pauze",
- "Current Time": "Huidige Tijd",
+ "Current Time": "Huidige tijd",
  "Duration Time": "Looptijd",
- "Remaining Time": "Resterende Tijd",
- "Stream Type": "Stream Type",
+ "Remaining Time": "Resterende tijd",
+ "Stream Type": "Streamtype",
  "LIVE": "LIVE",
  "Loaded": "Geladen",
  "Progress": "Status",
  "Fullscreen": "Volledig scherm",
  "Non-Fullscreen": "Geen volledig scherm",
- "Mute": "Geluid Uit",
- "Unmuted": "Geluid Aan",
- "Playback Rate": "Weergave Rate",
+ "Mute": "Geluid uit",
+ "Unmuted": "Geluid aan",
+ "Playback Rate": "Weergavesnelheid",
  "Subtitles": "Ondertiteling",
  "subtitles off": "Ondertiteling uit",
- "Captions": "Onderschriften",
- "captions off": "Onderschriften uit",
+ "Captions": "Ondertiteling",
+ "captions off": "Ondertiteling uit",
  "Chapters": "Hoofdstukken",
- "You aborted the media playback": "Je hebt de media weergave afgebroken.",
- "A network error caused the media download to fail part-way.": "De media download 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, veroorzaakt door een server of netwerkfout of het formaat word niet ondersteund.",
- "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "De media weergave is afgebroken omdat deze beschadigd is of de media gebruikt functionaliteit die niet door je browser word ondersteund.",
+ "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."
 });

dist/lang/nn.js

@@ -0,0 +1,26 @@
+videojs.addLanguage("nn",{
+ "Play": "Spel",
+ "Pause": "Pause",
+ "Current Time": "Aktuell tid",
+ "Duration Time": "Varigheit",
+ "Remaining Time": "Tid attende",
+ "Stream Type": "Type straum",
+ "LIVE": "DIREKTE",
+ "Loaded": "Lasta inn",
+ "Progress": "Status",
+ "Fullscreen": "Fullskjerm",
+ "Non-Fullscreen": "Stenga fullskjerm",
+ "Mute": "Ljod av",
+ "Unmuted": "Ljod på",
+ "Playback Rate": "Avspelingsrate",
+ "Subtitles": "Teksting på",
+ "subtitles off": "Teksting av",
+ "Captions": "Teksting for høyrselshemma på",
+ "captions off": "Teksting for høyrselshemma av",
+ "Chapters": "Kapitel",
+ "You aborted the media playback": "Du avbraut avspelinga.",
+ "A network error caused the media download to fail part-way.": "Ein nettverksfeil avbraut nedlasting av videoen.",
+ "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikkje lastas ned, på grunn av ein nettverksfeil eller serverfeil, eller av di formatet ikkje er stoda.",
+ "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspelinga blei broten på grunn av øydelagde data eller av di videoen ville gjera noe som nettlesaren din ikkje stodar.",
+ "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet."
+});

docs/examples/simple-embed/index.html

@@ -1,37 +1,30 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-  <title>Video.js | HTML5 Video Player</title>
 
-  <!-- Chang URLs to wherever Video.js files will be hosted -->
-  <!-- Default URLs assume the examples folder is included alongside video.js -->
-  <link href="../../video-js.min.css" rel="stylesheet" type="text/css">
+  <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>
 
-  <!-- Include ES5 shim, sham and html5 shiv for ie8 support  -->
-  <!-- Exclude this if you don't need ie8 support -->
-  <script src="../../ie8/videojs-ie8.min.js"></script>
-
-  <!-- video.js must be in the <head> for older IEs to work. -->
-  <script src="../../video.min.js"></script>
-
-  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
-  <script>
-    videojs.options.flash.swf = "../../video-js.swf";
-  </script>
+  </head>
 
 </head>
+
 <body>
 
-  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
-      poster="http://video-js.zencoder.com/oceans-clip.png"
-      data-setup="{}">
-    <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="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
-    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
+  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
+    <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="../shared/example-captions.vtt" srclang="en" label="English"></track>
+    <!-- Tracks need an ending tag thanks to IE9 -->
+    <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track>
+    <!-- Tracks need an ending tag thanks to IE9 -->
     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
   </video>
-
 </body>
+
 </html>

docs/guides/api.md

@@ -17,7 +17,7 @@ Wait Until the Player is Ready
 ------------------------------
 The time it takes Video.js to set up the video and API will vary depending on the playback technology being used (HTML5 will often be much faster to load than Flash). For that reason we want to use the player's 'ready' function to trigger any code that requires the player's API.
 
-```javascript
+```js
 videojs("example_video_1").ready(function(){
   var myPlayer = this;
 
@@ -41,4 +41,4 @@ myPlayer.currentTime(120);
 
 ```
 
-The full list of player API methods and events can be found in the [player API docs](../api/vjs.Player.md).
+The full list of player API methods and events can be found in the [player API docs](http://docs.videojs.com/docs/api/index.html).

docs/guides/languages.md

@@ -89,12 +89,12 @@ NOTE: These need to be added after the core Video.js script.
 3. During a Video.js player instantiation. Adding the languages to the configuration object provided in the `data-setup` attribute.
 
 ```html
-<video id="example_video_1" class="video-js vjs-default-skin"  
-  controls preload="auto" width="640" height="264"  
-  data-setup='{"languages":{"es":{"Play":"Juego"}}}'>  
- <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' />  
+<video id="example_video_1" class="video-js vjs-default-skin"
+  controls preload="auto" width="640" height="264"
+  data-setup='{"languages":{"es":{"Play":"Juego"}}}'>
+ <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>
 
@@ -110,12 +110,12 @@ Setting Default Language in a Video.js Player
 During a Video.js player instantiation you can force it to localize to a specific language by including the locale value into the configuration object via the `data-setup` attribute. Valid options listed at the bottom of the page for reference.
 
 ```html
-<video id="example_video_1" class="video-js vjs-default-skin"  
-  controls preload="auto" width="640" height="264"  
-  data-setup='{"language":"es"}'>  
- <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' />  
+<video id="example_video_1" class="video-js vjs-default-skin"
+  controls preload="auto" width="640" height="264"
+  data-setup='{"language":"es"}'>
+ <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>
 
@@ -145,7 +145,7 @@ Localization in Plugins
 
 When you're developing a plugin, you can also introduce new localized strings. Simply wrap the string with the player's `localize` function:
 
-```javascript
+```js
 var details = '<div class="vjs-errors-details">' + player.localize('Technical details') + '</div>';
 ```
 
@@ -153,7 +153,7 @@ Language Codes
 --------------
 The following is a list of official language codes.
 
-**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](../../lang) folder located in the project root.
+**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the project root.
 
 <table border="0" cellspacing="5" cellpadding="5">
   <tr>

docs/guides/options.md

@@ -119,7 +119,7 @@ Component Options
 You can set the options for any single player component. For instance, if you wanted to remove the `muteToggle` button, which
 is a child of `controlBar`, you can just set that component to false:
 
-```javascript
+```js
 var player = videojs('video-id', {
   controlBar: {
     muteToggle: false
@@ -134,5 +134,5 @@ notation.
 <video ... data-setup='{ "controlBar": { "muteToggle": false } }'></video>
 ```
 
-The [components guide](components.md) has an excellent breakdown of the structure of a player, you
-just need to remember to nest child components in a `children` object for each level.
+The [components guide](./components.md) has an excellent breakdown of the structure of a player, you
+just need to remember to nest child components in a `children` array for each level.

docs/guides/plugins.md

@@ -11,19 +11,23 @@ Step 1: Write Some Javascript
 -----------------------------
 You may have already done this step. Code up something interesting and then wrap it in a function. At the most basic level, that's all a video.js plugin is. By convention, plugins take a hash of options as their first argument:
 
+```js
     function examplePlugin(options) {
       this.on('play', function(e) {
         console.log('playback has started!');
       });
     };
+```
 
-When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
+When it's activated, `this` will be the Video.js player your plugin is attached to. You can use anything you'd like in the [Video.js API](./api.md) when you're writing a plugin: change the `src`, mess up the DOM, or listen for and emit your own events.
 
 Step 2: Registering A Plugin
 -------------------------------
 It's time to give the rest of the world the opportunity to be awed by your genius. When your plugin is loaded, it needs to let Video.js know this amazing new functionality is now available:
 
+```js
     videojs.plugin('examplePlugin', examplePlugin);
+```
 
 From this point on, your plugin will be added to the Video.js prototype and will show up as a property on every instance created. Make sure you choose a unique name that doesn't clash with any of the properties already in Video.js. Which leads us to...
 
@@ -31,6 +35,7 @@ Step 3: Using A Plugin
 ----------------------
 There are two ways to initialize a plugin. If you're creating your video tag dynamically, you can specify the plugins you'd like to initialize with it and any options you want to pass to them:
 
+```js
     videojs('vidId', {
       plugins: {
         examplePlugin: {
@@ -38,10 +43,17 @@ There are two ways to initialize a plugin. If you're creating your video tag dyn
         }
       }
     });
+```
 
 If you've already initialized your video tag, you can activate a plugin at any time by calling its setup function directly:
 
+```js
     var video = videojs('cool-vid');
     video.examplePlugin({ exampleOption: true });
+```
 
 That's it. Head on over to the [Video.js wiki](https://github.com/videojs/video.js/wiki/Plugins) and add your plugin to the list so everyone else can check it out.
+
+## How should I use the Video.js icons in my plugin?
+
+If you'd like to use any of the icons available in the [Video.js icon set](http://videojs.github.io/font/), please target them via the CSS class names instead of codepoints. The codepoints *may* change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.

docs/guides/removing-players.md

@@ -6,11 +6,11 @@ Sometimes, you want to remove players after page load (in single page apps or mo
 Call `.dispose()`
 -----------------
 
-To remove the html associated with your videojs player from the page always call the player's [`dispose()`](https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#dispose) method:
+To remove the html associated with your videojs player from the page always call the player's [`dispose()`](http://docs.videojs.com/docs/api/player.html#Methodsdispose) method:
 
-```javascript```
+```js
 var oldPlayer = document.getElementById('my-player');
-videojs(oldPlayer).dispose(); 
+videojs(oldPlayer).dispose();
 ```
 
 This method will:

docs/guides/setup.md

@@ -9,15 +9,17 @@ Step 1: Include the Video.js Javascript and CSS files in the head of your page.
 You can download the Video.js source and host it on your own servers, or use the free CDN hosted version. As of Video.js 5.0, the source is [transpiled from ES2015](http://babeljs.io/) (formerly known as ES6) to [ES5](https://es5.github.io/), but IE8 only supports ES3. In order to continue to support IE8, we've bundled an [ES5 shim and sham](https://github.com/es-shims/es5-shim) together and hosted it on the CDN.
 
 ```html
-<script src="//vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>
+<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>
 ```
 
 ### CDN Version ###
 ```html
-<link href="//vjs.zencdn.net/4.12/video-js.min.css" rel="stylesheet">
-<script src="//vjs.zencdn.net/4.12/video.min.js"></script>
+<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
+<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
 ```
 
+Alternatively you can always [go here](http://videojs.com/getting-started/) to get the latest URL for videojs CDN.
+
 We include a stripped down Google Analytics pixel that tracks a random percentage (currently 1%) of players loaded from the CDN. This allows us to see (roughly) what browsers are in use in the wild, along with other useful metrics such as OS and device. If you'd like to disable analytics, you can simply include the following global **before** including Video.js:
 
 ```js
@@ -56,7 +58,7 @@ With Video.js you just use an HTML5 video tag to embed a video. Video.js will th
 
 > Note: The `data-setup` attribute described here should not be used if you use the alternative setup described in the next section.
 
-  1. The 'data-setup' Attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](options.md)). There are other methods for initializing the player, but this is the easiest.
+  1. The 'data-setup' Attribute tells Video.js to automatically set up the video when the page is ready, and read any options (in JSON format) from the attribute (see [options](./options.md)). There are other methods for initializing the player, but this is the easiest.
 
   2. The 'id' Attribute: Should be used and unique for every video on the same page.
 
@@ -70,9 +72,9 @@ Otherwise include/exclude attributes, settings, sources, and tracks exactly as y
   controls preload="auto" width="640" height="264"
   poster="http://video-js.zencoder.com/oceans-clip.png"
   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' />
+ <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" />
  <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
 </video>
 ```

docs/guides/skins.md

@@ -9,7 +9,7 @@ enabled, you'll need to manually include them.
 
 ## Icons
 
-You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](../../sandbox/icons.html.example) in the sandbox directory.
+You can view all of the icons available in the base theme by renaming and viewing [`icons.html.example`](https://github.com/videojs/video.js/blob/master/sandbox/icons.html.example) in the sandbox directory.
 
 ## Customization
 

docs/guides/tech.md

@@ -49,6 +49,40 @@ When adding additional Tech to a video player, make sure to add the supported te
       techOrder: ["html5", "flash", "other supported tech"]
     });
 
+Technology Ordering
+==================
+By default Video.js performs "Tech-first" ordering when it searches for a source/tech combination to play videos. This means that if you have two sources and two techs, video.js will try to play each video with the first tech in the `techOrder` option property before moving on to try the next playback technology.
+
+Tech-first ordering can present a problem if you have a `sourceHandler` that supports both `Html5` and `Flash` techs such as videojs-contrib-hls.
+
+For example, given the following video element:
+
+  <video data-setup='{"techOrder": ["html5", "flash"]}'>
+    <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
+    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+  </video>
+
+There is a good chance that the mp4 source will be selected on platforms that do not have media source extensions. Video.js will try all sources against the first playback technology, in this case `Html5`, and select the first source that can play - in this case MP4.
+
+In "Tech-first" mode, the tests run something like this:
+  Can video.m3u8 play with Html5? No...
+  Can video.mp4 play with Html5? Yes! Use the second source.
+
+Video.js now provides another method of selecting the source - "Source-first" ordering. In this mode, Video.js tries the first source against every tech in `techOrder` before moving onto the next source.
+
+With a player setup as follows:
+
+  <video data-setup='{"techOrder": ["html5", "flash"], "sourceOrder": true}'>
+    <source src="http://your.static.provider.net/path/to/video.m3u8" type="application/x-mpegURL">
+    <source src="http://your.static.provider.net/path/to/video.mp4" type="video/mp4">
+  </video>
+
+The Flash-based HLS support will be tried before falling back to the MP4 source.
+
+In "Source-first" mode, the tests run something like this:
+  Can video.m3u8 play with Html5? No...
+  Can video.m3u8 play with Flash? Yes! Use the first source.
+
 Flash Technology
 ==================
 The Flash playback tech is a part of the default `techOrder`. You may notice undesirable playback behavior in browsers that are subject to using this playback tech, in particular when scrubbing and seeking within a video. This behavior is a result of Flash's progressive video playback.

docs/guides/tracks.md

@@ -11,7 +11,7 @@ Text Tracks are a function of HTML5 video for providing time triggered text to t
 
 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.
+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.
 
@@ -20,12 +20,12 @@ 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' />  
+<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>
 
@@ -56,8 +56,6 @@ The two-letter code (valid BCP 47 language tag) for the language of the text tra
 
 <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>
@@ -96,12 +94,6 @@ The two-letter code (valid BCP 47 language tag) for the language of the text tra
         <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>
@@ -139,12 +131,6 @@ The two-letter code (valid BCP 47 language tag) for the language of the text tra
         <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>
@@ -182,12 +168,6 @@ The two-letter code (valid BCP 47 language tag) for the language of the text tra
         <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>
@@ -224,7 +204,5 @@ The two-letter code (valid BCP 47 language tag) for the language of the text tra
         <tr><th>yo<th><td>Yoruba</td></tr>
         <tr><th>zu<th><td>Zulu</td></tr>
       </table>
-
-    </td>
   </tr>
 </table>

lang/nb.json

@@ -0,0 +1,26 @@
+{
+  "Play": "Spill",
+  "Pause": "Pause",
+  "Current Time": "Aktuell tid",
+  "Duration Time": "Varighet",
+  "Remaining Time": "Gjenstående tid",
+  "Stream Type": "Type strøm",
+  "LIVE": "DIREKTE",
+  "Loaded": "Lastet inn",
+  "Progress": "Status",
+  "Fullscreen": "Fullskjerm",
+  "Non-Fullscreen": "Lukk fullskjerm",
+  "Mute": "Lyd av",
+  "Unmuted": "Lyd på",
+  "Playback Rate": "Avspillingsrate",
+  "Subtitles": "Undertekst på",
+  "subtitles off": "Undertekst av",
+  "Captions": "Undertekst for hørselshemmede på",
+  "captions off": "Undertekst for hørselshemmede av",
+  "Chapters": "Kapitler",
+  "You aborted the media playback": "Du avbrøt avspillingen.",
+  "A network error caused the media download to fail part-way.": "En nettverksfeil avbrøt nedlasting av videoen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikke lastes ned, på grunn av nettverksfeil eller serverfeil, eller fordi formatet ikke er støttet.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspillingen ble avbrudt på grunn av ødelagte data eller fordi videoen ville gjøre noe som nettleseren din ikke har støtte for.",
+  "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet."
+}

lang/nl.json

@@ -1,26 +1,26 @@
 {
   "Play": "Afspelen",
   "Pause": "Pauze",
-  "Current Time": "Huidige Tijd",
+  "Current Time": "Huidige tijd",
   "Duration Time": "Looptijd",
-  "Remaining Time": "Resterende Tijd",
-  "Stream Type": "Stream Type",
+  "Remaining Time": "Resterende tijd",
+  "Stream Type": "Streamtype",
   "LIVE": "LIVE",
   "Loaded": "Geladen",
   "Progress": "Status",
   "Fullscreen": "Volledig scherm",
   "Non-Fullscreen": "Geen volledig scherm",
-  "Mute": "Geluid Uit",
-  "Unmuted": "Geluid Aan",
-  "Playback Rate": "Weergave Rate",
+  "Mute": "Geluid uit",
+  "Unmuted": "Geluid aan",
+  "Playback Rate": "Weergavesnelheid",
   "Subtitles": "Ondertiteling",
   "subtitles off": "Ondertiteling uit",
-  "Captions": "Onderschriften",
-  "captions off": "Onderschriften uit",
+  "Captions": "Ondertiteling",
+  "captions off": "Ondertiteling uit",
   "Chapters": "Hoofdstukken",
-  "You aborted the media playback": "Je hebt de media weergave afgebroken.",
-  "A network error caused the media download to fail part-way.": "De media download 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, veroorzaakt door een server of netwerkfout of het formaat word niet ondersteund.",
-  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "De media weergave is afgebroken omdat deze beschadigd is of de media gebruikt functionaliteit die niet door je browser word ondersteund.",
+  "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."
 }

lang/nn.json

@@ -0,0 +1,26 @@
+{
+  "Play": "Spel",
+  "Pause": "Pause",
+  "Current Time": "Aktuell tid",
+  "Duration Time": "Varigheit",
+  "Remaining Time": "Tid attende",
+  "Stream Type": "Type straum",
+  "LIVE": "DIREKTE",
+  "Loaded": "Lasta inn",
+  "Progress": "Status",
+  "Fullscreen": "Fullskjerm",
+  "Non-Fullscreen": "Stenga fullskjerm",
+  "Mute": "Ljod av",
+  "Unmuted": "Ljod på",
+  "Playback Rate": "Avspelingsrate",
+  "Subtitles": "Teksting på",
+  "subtitles off": "Teksting av",
+  "Captions": "Teksting for høyrselshemma på",
+  "captions off": "Teksting for høyrselshemma av",
+  "Chapters": "Kapitel",
+  "You aborted the media playback": "Du avbraut avspelinga.",
+  "A network error caused the media download to fail part-way.": "Ein nettverksfeil avbraut nedlasting av videoen.",
+  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "Videoen kunne ikkje lastas ned, på grunn av ein nettverksfeil eller serverfeil, eller av di formatet ikkje er stoda.",
+  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "Videoavspelinga blei broten på grunn av øydelagde data eller av di videoen ville gjera noe som nettlesaren din ikkje stodar.",
+  "No compatible source was found for this media.": "Fant ikke en kompatibel kilde for dette mediainnholdet."
+}

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.0.2",
+  "version": "5.6.0",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
   "keywords": [
@@ -28,11 +28,11 @@
     "object.assign": "^4.0.1",
     "safe-json-parse": "^4.0.0",
     "tsml": "1.0.1",
-    "videojs-font": "1.3.0",
-    "videojs-ie8": "1.1.0",
-    "videojs-swf": "5.0.0-rc1",
-    "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#vjs-v0.12.1",
-    "xhr": "2.1.0"
+    "videojs-font": "1.5.1",
+    "videojs-ie8": "1.1.2",
+    "videojs-swf": "5.0.1",
+    "videojs-vtt.js": "^0.12.1",
+    "xhr": "~2.2.0"
   },
   "devDependencies": {
     "babel": "^5.2.2",
@@ -48,14 +48,14 @@
     "grunt-aws-s3": "^0.12.1",
     "grunt-banner": "^0.4.0",
     "grunt-browserify": "3.5.1",
-    "grunt-cli": "~0.1.0",
+    "grunt-cli": "~0.1.13",
     "grunt-concurrent": "^1.0.0",
     "grunt-contrib-clean": "~0.4.0a",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-connect": "~0.7.1",
     "grunt-contrib-copy": "^0.8.0",
     "grunt-contrib-cssmin": "~0.6.0",
-    "grunt-contrib-jshint": "^0.11.0",
+    "grunt-contrib-jshint": "~0.11.3",
     "grunt-contrib-less": "~0.6.4",
     "grunt-contrib-uglify": "^0.8.0",
     "grunt-contrib-watch": "~0.1.4",
@@ -64,7 +64,7 @@
     "grunt-fastly": "^0.1.3",
     "grunt-github-releaser": "^0.1.17",
     "grunt-karma": "^0.8.3",
-    "grunt-sass": "^0.18.1",
+    "grunt-sass": "^1.0.0",
     "grunt-version": "~0.3.0",
     "grunt-videojs-languages": "0.0.4",
     "grunt-zip": "0.10.2",
@@ -73,6 +73,7 @@
     "karma-browserstack-launcher": "^0.1.4",
     "karma-chrome-launcher": "^0.1.3",
     "karma-coverage": "^0.4.0",
+    "karma-detect-browsers": "^2.0.2",
     "karma-firefox-launcher": "^0.1.3",
     "karma-ie-launcher": "^0.1.5",
     "karma-opera-launcher": "~0.1.0",

sandbox/index.html.example

@@ -27,11 +27,11 @@
   </div>
 
   <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
-      poster="http://video-js.zencoder.com/oceans-clip.png"
+      poster="http://vjs.zencdn.net/v/oceans.png"
       data-setup='{}'>
-    <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'>
+    <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="../docs/examples/shared/example-captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
     <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
   </video>

sandbox/plugin.html.example

@@ -20,10 +20,10 @@
 <body>
   <p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page shows you how to create, register and initialize a Video.js plugin.</p>
 
-  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
-    <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'>
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png">
+    <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">
     <p>Video Playback Not Supported</p>
   </video>
 
@@ -41,10 +41,10 @@
       };
 
       // register the plugin
-      vjs.plugin('progressed', progressed);
+      videojs.plugin('progressed', progressed);
 
       // initialize it
-      vid1 = vjs('vid1');
+      vid1 = videojs('vid1');
       vid1.progressed();
     })();
   </script>

src/css/_private-variables.scss

@@ -1,5 +1,5 @@
 // Text, icons, hover states
-$primary-foreground-color: #fff;
+$primary-foreground-color: #fff !default;
 
 // Control backgrounds (control bar, big play, menus)
 $primary-background-color: #2B333F !default;

src/css/_utilities.scss

@@ -1,8 +1,18 @@
+@import "utilities/linear-gradient";
+
 @mixin background-color-with-alpha($color, $alpha) {
   background-color: $color;
   background-color: rgba($color, $alpha);
 }
 
+@mixin transform($transform) {
+  -moz-transform: $transform;
+  -ms-transform: $transform;
+  -o-transform: $transform;
+  -webkit-transform: $transform;
+  transform: $transform;
+}
+
 @mixin transition($string: $transition--default) {
   -webkit-transition: $string;
   -moz-transition: $string;
@@ -94,11 +104,15 @@
   order: $value;
 }
 
-%icon-default {
+%fill-parent {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+}
+
+%icon-default {
+  @extend %fill-parent;
   text-align: center;
 }

src/css/_variables.scss

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

src/css/components/_big-play.scss

@@ -4,7 +4,6 @@
   height: $big-play-button--height;
   width: $big-play-button--width; // Firefox bug: For some reason without width the icon wouldn't show up. Switched to using width and removed padding.
   display: block;
-  z-index: 2;
   position: absolute;
   top: 10px;
   left: 10px;
@@ -13,7 +12,7 @@
   opacity: 1;
   border: 0.06666em solid $primary-foreground-color;
 
-  /* Need a slightly gray bg so it can be seen on black backgrounds */
+  // Need a slightly gray bg so it can be seen on black backgrounds
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
   @include border-radius(0.3em);
   @include transition(all 0.4s);

src/css/components/_chapters.scss

@@ -3,7 +3,7 @@
 }
 
 .vjs-chapters-button .vjs-menu {
-  left: -10em; /* (Width of vjs-menu - width of vjs-control) / 2 */
+  left: -10em; // (Width of vjs-menu - width of vjs-control) / 2
   width: 0;
 }
 

src/css/components/_close-button.scss

@@ -0,0 +1,9 @@
+.video-js .vjs-control.vjs-close-button {
+  @extend .vjs-icon-cancel;
+  cursor: pointer;
+  height: 3em;
+  position: absolute;
+  right: 0;
+  top: 0.5em;
+  z-index: 2;
+}

src/css/components/_control-bar.scss

@@ -32,7 +32,7 @@
 .vjs-controls-disabled .vjs-control-bar,
 .vjs-using-native-controls .vjs-control-bar,
 .vjs-error .vjs-control-bar {
-  /* !important is ok in this context. */
+  // !important is ok in this context.
   display: none !important;
 }
 
@@ -42,17 +42,16 @@
   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
-*/
+// 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: ""; }
 }
 
-/* IE 8 + 9 Support */
+// IE 8 + 9 Support
 .vjs-has-started.vjs-no-flex .vjs-control-bar {
   display: table;
 }

src/css/components/_control.scss

@@ -19,19 +19,19 @@
   }
 }
 
-/* Replacement for focus outline */
+// Replacement for focus outline
 .video-js .vjs-control:focus:before,
 .video-js .vjs-control:hover:before,
 .video-js .vjs-control:focus {
   text-shadow: 0em 0em 1em rgba($primary-foreground-color, 1);
 }
 
-/* Hide control text visually, but have it available for screenreaders */
+// Hide control text visually, but have it available for screenreaders
 .video-js .vjs-control-text {
   @include hide-visually;
 }
 
-/* IE 8 + 9 Support */
+// IE 8 + 9 Support
 .vjs-no-flex .vjs-control {
   display: table-cell;
   vertical-align: middle;

src/css/components/_error.scss

@@ -1,48 +1,23 @@
-.vjs-error-display {
-  display: none;
-}
-
-.vjs-error .vjs-error-display {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
+.vjs-error .vjs-error-display .vjs-modal-dialog-content {
+  font-size: 1.4em;
+  text-align: center;
 }
 
 .vjs-error .vjs-error-display:before {
+  color: #fff;
   content: 'X';
   font-family: $text-font-family;
   font-size: 4em;
-  color: #fff;
-  /* In order to center the play icon vertically we need to set the line height
-  to the same as the button height */
-  line-height: 1;
-  text-shadow: 0.05em 0.05em 0.1em #000;
-  text-align: center /* Needed for IE8 */;
-  vertical-align: middle;
-
-  position: absolute;
   left: 0;
-  top: 50%;
+
+  // In order to center the play icon vertically we need to set the line height
+  // to the same as the button height
+  line-height: 1;
   margin-top: -0.5em;
+  position: absolute;
+  text-shadow: 0.05em 0.05em 0.1em #000;
+  text-align: center; // Needed for IE8
+  top: 50%;
+  vertical-align: middle;
   width: 100%;
 }
-
-.vjs-error-display div {
-  position: absolute;
-  bottom: 1em;
-  right: 0;
-  left: 0;
-  font-size: 1.4em;
-  text-align: center;
-  padding: 3px;
-
-  @include background-color-with-alpha(#000, 0.5);
-}
-
-.vjs-error-display a,
-.vjs-error-display a:visited {
-  color: #66A8CC;
-}

src/css/components/_fullscreen.scss

@@ -6,7 +6,7 @@
 .video-js .vjs-fullscreen-control {
   @extend .vjs-icon-fullscreen-enter;
 }
-/* Switch to the exit icon when the player is in fullscreen */
+// Switch to the exit icon when the player is in fullscreen
 .video-js.vjs-fullscreen .vjs-fullscreen-control {
   @extend .vjs-icon-fullscreen-exit;
 }

src/css/components/_layout.scss

@@ -1,9 +1,8 @@
 .video-js {
-  /* display:inline-block would be closer to the video el's display:inline
-   * but it results in flash reloading when going into fullscreen [#2205]
-   */
+  // display:inline-block would be closer to the video el's display:inline
+  // but it results in flash reloading when going into fullscreen [#2205]
   display: block;
-  /* Make video.js videos align top when next to video elements */
+  // Make video.js videos align top when next to video elements
   vertical-align: top;
   box-sizing: border-box;
 
@@ -11,21 +10,21 @@
   background-color: #000;
   position: relative;
   padding: 0;
-  /* Start with 10px for base font size so other dimensions can be em based and
-  easily calculable. */
+  // Start with 10px for base font size so other dimensions can be em based and
+  // easily calculable.
   font-size: 10px;
   line-height: 1;
 
-  /* Provide some basic defaults for fonts */
+  // Provide some basic defaults for fonts
   font-weight: normal;
   font-style: normal;
-  /* Avoiding helvetica: issue #376 */
+  // Avoiding helvetica: issue #376
   font-family: $text-font-family;
 
   @include user-select(none);
 
-  /* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
-  checking fullScreenEnabled. */
+  // Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
+  // checking fullScreenEnabled.
   &:-moz-full-screen { position: absolute; }
 
   &:-webkit-full-screen {
@@ -34,35 +33,35 @@
   }
 }
 
-/* All elements inherit border-box sizing */
+// All elements inherit border-box sizing
 .video-js *,
 .video-js *:before,
 .video-js *:after {
   box-sizing: inherit;
 }
 
-/* List style reset */
+// List style reset
 .video-js ul {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
   list-style-position: outside;
 
-  /* Important to specify each */
+  // Important to specify each
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
 
-/* Fill the width of the containing element and use padding to create the
-   desired aspect ratio. Default to 16x9 unless another ratio is given. */
+// Fill the width of the containing element and use padding to create the
+// desired aspect ratio. Default to 16x9 unless another ratio is given.
 @mixin apply-aspect-ratio($width, $height) {
   padding-top: 100% * ($height/$width);
 }
 
-/* Not including a default AR in vjs-fluid because it would override
-   the user set AR injected into the header. */
+// Not including a default AR in vjs-fluid because it would override
+// the user set AR injected into the header.
 .video-js.vjs-fluid,
 .video-js.vjs-16-9,
 .video-js.vjs-4-3 {
@@ -84,8 +83,8 @@
   height: 100%;
 }
 
-/* Playback technology elements expand to the width/height of the containing div
-<video> or <object> */
+// Playback technology elements expand to the width/height of the containing div
+// <video> or <object>
 .video-js .vjs-tech {
   position: absolute;
   top: 0;
@@ -94,12 +93,12 @@
   height: 100%;
 }
 
-/* Fullscreen Styles */
+// Fullscreen Styles
 body.vjs-full-window {
   padding: 0;
   margin: 0;
   height: 100%;
-  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */
+  // Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html
   overflow-y: auto;
 }
 .vjs-full-window .video-js.vjs-fullscreen {
@@ -114,7 +113,7 @@ body.vjs-full-window {
 .video-js.vjs-fullscreen {
   width: 100% !important;
   height: 100% !important;
-  /* Undo any aspect ratio padding for fluid layouts */
+  // Undo any aspect ratio padding for fluid layouts
   padding-top: 0 !important;
 }
 .video-js.vjs-fullscreen.vjs-user-inactive {
@@ -122,19 +121,28 @@ body.vjs-full-window {
 }
 
 
-/* Hide disabled or unsupported controls. */
+// Hide disabled or unsupported controls.
 .vjs-hidden { display: none !important; }
 
+// Visually hidden offscreen, but accessible to screen readers.
+.video-js .vjs-offscreen {
+  height: 1px;
+  left: -9999px;
+  position: absolute;
+  top: 0;
+  width: 1px;
+}
+
 .vjs-lock-showing {
   display: block !important;
   opacity: 1;
   visibility: visible;
 }
 
-/*  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
-The .video-js classname on the video tag also isn't considered.
-This optional paragraph inside the video tag can provide a message to users
-about what's required to play video. */
+//  In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
+// The .video-js classname on the video tag also isn't considered.
+// This optional paragraph inside the video tag can provide a message to users
+// about what's required to play video.
 .vjs-no-js {
   padding: 20px;
   color: #fff;

src/css/components/_loading.scss

@@ -6,7 +6,7 @@
   margin: -25px 0 0 -25px;
   opacity: 0.85;
 
-  /* Need to fix centered page layouts */
+  // Need to fix centered page layouts
   text-align: left;
 
   border: 6px solid rgba($primary-background-color, $primary-background-transparency);
@@ -33,14 +33,14 @@
   width: inherit;
   height: inherit;
   border-radius: inherit;
-  /* Keep 100% opacity so they don't show through each other */
+  // Keep 100% opacity so they don't show through each other
   opacity: 1;
   border: inherit;
   border-color: transparent;
   border-top-color: white;
 }
 
-/* only animate when showing because it can be processor heavy */
+// only animate when showing because it can be processor heavy
 .vjs-seeking .vjs-loading-spinner:before,
 .vjs-seeking .vjs-loading-spinner:after,
 .vjs-waiting .vjs-loading-spinner:before,

src/css/components/_modal-dialog.scss

@@ -0,0 +1,13 @@
+.video-js .vjs-modal-dialog {
+  @extend %fill-parent;
+  @include linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
+}
+
+.vjs-modal-dialog .vjs-modal-dialog-content {
+  @extend %fill-parent;
+
+  font-size: 1.2em; // 12px
+  line-height: 1.5; // 18px
+  padding: 20px 24px;
+  z-index: 1;
+}

src/css/components/_poster.scss

@@ -15,7 +15,7 @@
   height: 100%;
 }
 
-/* Used for IE8 fallback */
+// Used for IE8 fallback
 .vjs-poster img {
   display: block;
   vertical-align: middle;
@@ -25,23 +25,23 @@
   width: 100%;
 }
 
-/* Hide the poster after the video has started playing */
+// Hide the poster after the video has started playing
 .vjs-has-started .vjs-poster {
   display: none;
 }
 
-/* Don't hide the poster if we're playing audio */
+// Don't hide the poster if we're playing audio
 .vjs-audio.vjs-has-started .vjs-poster {
   display: block;
 }
 
-/* Hide the poster when controls are disabled because it's clickable
-and the native poster can take over */
+// Hide the poster when controls are disabled because it's clickable
+// and the native poster can take over
 .vjs-controls-disabled .vjs-poster {
   display: none;
 }
 
-/* Hide the poster when native controls are used otherwise it covers them */
+// Hide the poster when native controls are used otherwise it covers them
 .vjs-using-native-controls .vjs-poster {
   display: none;
 }

src/css/components/_progress.scss

@@ -1,16 +1,16 @@
-/**
- * Let's talk pixel math!
- * Start with a base font size of 10px (assuming that hasn't changed)
- * No Hover:
- * - Progress holder is 3px
- * - Progress handle is 9px
- * - Progress handle is pulled up 3px to center it.
- *
- * Hover:
- * - Progress holder becomes 5px
- * - Progress handle becomes 15px
- * - Progress handle is pulled up 5px to center it
- */
+//
+// Let's talk pixel math!
+// Start with a base font size of 10px (assuming that hasn't changed)
+// No Hover:
+// - Progress holder is 3px
+// - Progress handle is 9px
+// - Progress handle is pulled up 3px to center it.
+//
+// Hover:
+// - Progress holder becomes 5px
+// - Progress handle becomes 15px
+// - Progress handle is pulled up 5px to center it
+//
 
 .video-js .vjs-progress-control {
   @include flex(auto);
@@ -21,30 +21,30 @@
   display: none;
 }
 
-/* Box containing play and load progresses. Also acts as seek scrubber. */
+// Box containing play and load progresses. Also acts as seek scrubber.
 .video-js .vjs-progress-holder {
   @include flex(auto);
   @include transition(all 0.2s);
   height: 0.3em;
 }
 
-/* We need an increased hit area on hover */
+// We need an increased hit area on hover
 .video-js .vjs-progress-control:hover .vjs-progress-holder {
   font-size: 1.666666666666666666em
 }
 
-/* Also show the current time tooltip */
+/* If we let the font size grow as much as everything else, the current time tooltip ends up
+ ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
+ to avoid a weird hitch when you roll off the hover. */
+
+// Also show the current time tooltip
 .video-js .vjs-progress-control:hover .vjs-mouse-display:after,
 .video-js .vjs-progress-control:hover .vjs-play-progress:after {
   display: block;
-
-  /* If we let the font size grow as much as everything else, the current time tooltip ends up
-     ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled
-     to avoid a weird hitch when you roll off the hover. */
   font-size: 0.6em;
 }
 
-/* Progress Bars */
+// Progress Bars
 .video-js .vjs-progress-holder .vjs-play-progress,
 .video-js .vjs-progress-holder .vjs-load-progress,
 .video-js .vjs-progress-holder .vjs-load-progress div {
@@ -53,9 +53,9 @@
   height: 0.3em;
   margin: 0;
   padding: 0;
-  /* updated by javascript during playback */
+  // updated by javascript during playback
   width: 0;
-  /* Needed for IE6 *///
+  // Needed for IE6
   left: 0;
   top: 0;
 }
@@ -81,9 +81,9 @@
 }
 
 // Current Time "tooltip"
+// By default this is hidden and only shown when hovering over the progress control
 .video-js .vjs-mouse-display:after,
 .video-js .vjs-play-progress:after {
-  /* By default this is hidden and only shown when hovering over the progress control */
   display: none;
   position: absolute;
   top: -2.4em;
@@ -101,18 +101,18 @@
 }
 
 .video-js .vjs-load-progress {
-  /* For IE8 we'll lighten the color */
-  background: ligthen($secondary-background-color, 25%);
-  /* Otherwise we'll rely on stacked opacities */
+  // For IE8 we'll lighten the color
+  background: lighten($secondary-background-color, 25%);
+  // Otherwise we'll rely on stacked opacities
   background: rgba($secondary-background-color, $secondary-background-transparency);
 }
 
-/* there are child elements of the load progress bar that represent the
-specific time ranges that have been buffered */
+// there are child elements of the load progress bar that represent the
+// specific time ranges that have been buffered
 .video-js .vjs-load-progress div {
-  /* For IE8 we'll lighten the color */
-  background: ligthen($secondary-background-color, 50%);
-  /* Otherwise we'll rely on stacked opacities */
+  // For IE8 we'll lighten the color
+  background: lighten($secondary-background-color, 50%);
+  // Otherwise we'll rely on stacked opacities
   background: rgba($secondary-background-color, 0.75);
 }
 

src/css/components/_text-track.scss

@@ -1,3 +1,4 @@
+// Emulated tracks
 .vjs-text-track-display {
   position: absolute;
   bottom: 3em;
@@ -7,20 +8,30 @@
   pointer-events: none;
 }
 
-/* Move captions down when controls aren't being shown */
+// Move captions down when controls aren't being shown
 .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
   bottom: 1em;
 }
 
-/* Individual tracks */
+// Individual tracks
 .video-js .vjs-text-track {
   font-size: 1.4em;
   text-align: center;
   margin-bottom: 0.1em;
-  /* Transparent black background, or fallback to all black (oldIE) */
+  // Transparent black background, or fallback to all black (oldIE)
   @include background-color-with-alpha(#000, 0.5);
 }
 
-.vjs-subtitles { color: #fff /* Subtitles are white */; }
-.vjs-captions { color: #fc6 /* Captions are yellow */; }
+.vjs-subtitles { color: #fff; } // Subtitles are white
+.vjs-captions { color: #fc6; } // Captions are yellow
 .vjs-tt-cue { display: block; }
+
+// Native tracks
+video::-webkit-media-text-track-display {
+  @include transform(translateY(-3em));
+}
+
+// Move captions down when controls aren't being shown
+.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
+  @include transform(translateY(-1.5em));
+}

src/css/components/_time.scss

@@ -8,7 +8,7 @@
   display: none;
 }
 
-/* We need the extra specificity that referencing .vjs-no-flex provides. */
+// We need the extra specificity that referencing .vjs-no-flex provides.
 .video-js .vjs-current-time,
 .vjs-no-flex .vjs-current-time {
   display: none;

src/css/components/_volume.scss

@@ -25,7 +25,7 @@
 }
 
 .video-js .vjs-volume-bar {
-  margin: 1.35em;
+  margin: 1.35em 0.45em;
 }
 
 .vjs-volume-bar.vjs-slider-horizontal {
@@ -36,6 +36,7 @@
 .vjs-volume-bar.vjs-slider-vertical {
   width: 0.3em;
   height: 5em;
+  margin: 1.35em auto;
 }
 
 .video-js .vjs-volume-level {
@@ -73,7 +74,7 @@
   }
 }
 
-/* Assumes volume starts at 1.0. */
+// Assumes volume starts at 1.0.
 .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
   height: 100%;
 }
@@ -82,11 +83,11 @@
   width: 100%;
 }
 
-/* The volume menu button is like menu buttons (captions/subtitles) but works
-a little differently. It needs to be possible to tab to the volume slider
-without hitting space bar on the menu button. To do this we're not using
-display:none to hide the slider menu by default, and instead setting the
-width and height to zero. */
+// The volume menu button is like menu buttons (captions/subtitles) but works
+// a little differently. It needs to be possible to tab to the volume slider
+// without hitting space bar on the menu button. To do this we're not using
+// display:none to hide the slider menu by default, and instead setting the
+// width and height to zero.
 .vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
   display: block;
   width: 0;
@@ -96,6 +97,7 @@ width and height to zero. */
 
 .vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
   left: 0.5em;
+  height: 8em;
 }
 .vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
   left: -2em;
@@ -111,19 +113,23 @@ width and height to zero. */
 }
 
 .vjs-volume-menu-button-vertical:hover .vjs-menu-content,
+.vjs-volume-menu-button-vertical:focus .vjs-menu-content,
+.vjs-volume-menu-button-vertical.vjs-slider-active .vjs-menu-content,
 .vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content {
   height: 8em;
   width: 2.9em;
 }
 
 .vjs-volume-menu-button-horizontal:hover .vjs-menu-content,
+.vjs-volume-menu-button-horizontal:focus .vjs-menu-content,
+.vjs-volume-menu-button-horizontal .vjs-slider-active .vjs-menu-content,
 .vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content {
   height: 2.9em;
   width: 8em;
 }
 
 .vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
-  /* An inline volume should never have a menu background color.
-     This protects it from external changes to background colors. */
+  // An inline volume should never have a menu background color.
+  //  This protects it from external changes to background colors.
   background-color: transparent !important;
 }

src/css/components/menu/_menu-inline.scss

@@ -30,7 +30,7 @@
   width: auto;
 
   position: absolute;
-  left: 2.2222222em;
+  left: 4em;
   top: 0;
 
   padding: 0;

src/css/components/menu/_menu-popup.scss

@@ -3,19 +3,19 @@
   position: absolute;
   bottom: 0;
   width: 10em;
-  left: -3em; /* (Width of vjs-menu - width of button) / 2 */
+  left: -3em; // (Width of vjs-menu - width of button) / 2
   height: 0em;
   margin-bottom: 1.5em;
-  border-top-color: rgba($primary-background-color, $primary-background-transparency); /* Same as ul background */
+  border-top-color: rgba($primary-background-color, $primary-background-transparency); // Same as ul background
 }
 
-/* Button Pop-up Menu */
-.vjs-menu-button-popup .vjs-menu ul {
+// Button Pop-up Menu
+.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
   @include background-color-with-alpha($primary-background-color, $primary-background-transparency);
 
   position: absolute;
   width: 100%;
-  bottom: 1.5em; /* Same bottom as vjs-menu border-top */
+  bottom: 1.5em; // Same bottom as vjs-menu border-top
   max-height: 15em;
 }
 

src/css/components/menu/_menu.scss

@@ -8,7 +8,7 @@
   overflow: auto;
 }
 
-/* prevent menus from opening while scrubbing (FF, IE) */
+// prevent menus from opening while scrubbing (FF, IE)
 .vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
   display: none;
 }

src/css/utilities/_linear-gradient.scss

@@ -0,0 +1,94 @@
+// These functions and mixins taken from:
+//
+// "Building a linear-gradient Mixin in Sass" by Hugo Giraudel
+//    http://www.sitepoint.com/building-linear-gradient-mixin-sass/
+//    http://sassmeister.com/gist/b58f6e2cc3160007c880
+//
+
+/// Convert angle
+/// @author Chris Eppstein
+/// @param {Number} $value - Value to convert
+/// @param {String} $unit - Unit to convert to
+/// @return {Number} Converted angle
+@function convert-angle($value, $unit) {
+  $convertable-units: deg grad turn rad;
+  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
+  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
+    @return $value
+             / nth($conversion-factors, index($convertable-units, unit($value)))
+             * nth($conversion-factors, index($convertable-units, $unit));
+  }
+
+  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
+}
+
+/// Test if `$value` is an angle
+/// @param {*} $value - Value to test
+/// @return {Bool}
+@function is-direction($value) {
+  $is-direction: index((
+    'to top',
+    'to top right',
+    'to right top',
+    'to right',
+    'to bottom right',
+    'to right bottom',
+    'to bottom',
+    'to bottom left',
+    'to left bottom',
+    'to left',
+    'to left top',
+    'to top left'
+  ), $value);
+  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));
+
+  @return $is-direction or $is-angle;
+}
+
+/// Convert a direction to legacy syntax
+/// @param {Keyword | Angle} $value - Value to convert
+/// @require {function} is-direction
+/// @require {function} convert-angle
+@function legacy-direction($value) {
+  @if is-direction($value) == false {
+    @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
+  }
+
+  $conversion-map: (
+    'to top'          : 'bottom',
+    'to top right'    : 'bottom left',
+    'to right top'    : 'left bottom',
+    'to right'        : 'left',
+    'to bottom right' : 'top left',
+    'to right bottom' : 'left top',
+    'to bottom'       : 'top',
+    'to bottom left'  : 'top right',
+    'to left bottom'  : 'right top',
+    'to left'         : 'right',
+    'to left top'     : 'right bottom',
+    'to top left'     : 'bottom right'
+  );
+
+  @if map-has-key($conversion-map, $value) {
+    @return map-get($conversion-map, $value);
+  }
+
+  @return 90deg - convert-angle($value, 'deg');
+}
+
+/// Mixin printing a linear-gradient
+/// as well as a plain color fallback
+/// and the `-webkit-` prefixed declaration
+/// @access public
+/// @param {String | List | Angle} $direction - Linear gradient direction
+/// @param {Arglist} $color-stops - List of color-stops composing the gradient
+@mixin linear-gradient($direction, $color-stops...) {
+  @if is-direction($direction) == false {
+    $color-stops: ($direction, $color-stops);
+    $direction: 180deg;
+  }
+
+  background: nth(nth($color-stops, 1), 1);
+  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
+  background: linear-gradient($direction, $color-stops);
+}

src/css/video-js.scss

@@ -2,11 +2,16 @@
 @import "private-variables";
 @import "utilities";
 
-@import "../../node_modules/videojs-font/scss/icons";
+@if $icon-codepoints {
+  @import "../../node_modules/videojs-font/scss/icons-codepoints";
+} @else {
+  @import "../../node_modules/videojs-font/scss/icons";
+}
 
 @import "components/layout";
 @import "components/big-play";
 @import "components/button";
+@import "components/close-button";
 
 @import "components/menu/menu";
 @import "components/menu/menu-popup";
@@ -35,3 +40,4 @@
 @import "components/subtitles";
 @import "components/adaptive";
 @import "components/captions-settings";
+@import "components/modal-dialog";

src/css/vjs.scss

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

src/js/button.js

@@ -1,10 +1,11 @@
 /**
  * @file button.js
  */
+import ClickableComponent from './clickable-component.js';
 import Component from './component';
-import * as Dom from './utils/dom.js';
 import * as Events from './utils/events.js';
 import * as Fn from './utils/fn.js';
+import log from './utils/log.js';
 import document from 'global/document';
 import assign from 'object.assign';
 
@@ -13,122 +14,77 @@ import assign from 'object.assign';
  *
  * @param {Object} player  Main Player
  * @param {Object=} options Object of option names and values
- * @extends Component
+ * @extends ClickableComponent
  * @class Button
  */
-class Button extends Component {
+class Button extends ClickableComponent {
 
   constructor(player, options) {
     super(player, options);
-
-    this.emitTapEvents();
-
-    this.on('tap', this.handleClick);
-    this.on('click', this.handleClick);
-    this.on('focus', this.handleFocus);
-    this.on('blur', this.handleBlur);
   }
 
   /**
    * Create the component's DOM element
    *
    * @param {String=} type Element's node type. e.g. 'div'
-   * @param {Object=} props An object of element attributes that should be set on the element Tag name
+   * @param {Object=} props An object of properties that should be set on the element
+   * @param {Object=} attributes An object of attributes that should be set on the element
    * @return {Element}
    * @method createEl
    */
   createEl(tag='button', props={}, attributes={}) {
     props = assign({
-      className: this.buildCSSClass(),
-      tabIndex: 0
+      className: this.buildCSSClass()
     }, props);
 
-    // Add standard Aria info
+    if (tag !== 'button') {
+      log.warn(`Creating a Button with an HTML element of ${tag} is deprecated; use ClickableComponent instead.`);
+    }
+
+    // Add attributes for button element
     attributes = assign({
-      role: 'button',
       type: 'button', // Necessary since the default button type is "submit"
       'aria-live': 'polite' // let the screen reader user know that the text of the button may change
     }, attributes);
 
-    let el = super.createEl(tag, props, attributes);
+    let el = Component.prototype.createEl.call(this, tag, props, attributes);
 
-    this.controlTextEl_ = Dom.createEl('span', {
-      className: 'vjs-control-text'
-    });
-
-    el.appendChild(this.controlTextEl_);
-
-    this.controlText(this.controlText_);
+    this.createControlTextEl(el);
 
     return el;
   }
 
   /**
-   * Controls text - both request and localize
+   * Adds a child component inside this button
    *
-   * @param {String} text Text for button
-   * @return {String}
-   * @method controlText
+   * @param {String|Component} child The class name or instance of a child to add
+   * @param {Object=} options Options, including options to be passed to children of the child.
+   * @return {Component} The child component (created by this process if a string was used)
+   * @deprecated
+   * @method addChild
    */
-  controlText(text) {
-    if (!text) return this.controlText_ || 'Need Text';
+  addChild(child, options={}) {
+    let className = this.constructor.name;
+    log.warn(`Adding an actionable (user controllable) child to a Button (${className}) is not supported; use a ClickableComponent instead.`);
 
-    this.controlText_ = text;
-    this.controlTextEl_.innerHTML = this.localize(this.controlText_);
-
-    return this;
+    // Avoid the error message generated by ClickableComponent's addChild method
+    return Component.prototype.addChild.call(this, child, options);
   }
 
   /**
-   * Allows sub components to stack CSS class names
-   *
-   * @return {String}
-   * @method buildCSSClass
-   */
-  buildCSSClass() {
-    return `vjs-control vjs-button ${super.buildCSSClass()}`;
-  }
-
-  /**
-   * Handle Click - Override with specific functionality for button
-   *
-   * @method handleClick
-   */
-  handleClick() {}
-
-  /**
-   * Handle Focus - Add keyboard functionality to element
-   *
-   * @method handleFocus
-   */
-  handleFocus() {
-    Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
-  }
-
-  /**
-   * Handle KeyPress (document level) - Trigger click when keys are pressed
+   * Handle KeyPress (document level) - Extend with specific functionality for button
    *
    * @method handleKeyPress
    */
   handleKeyPress(event) {
-    // Check for space bar (32) or enter (13) keys
+    // Ignore Space (32) or Enter (13) key operation, which is handled by the browser for a button.
     if (event.which === 32 || event.which === 13) {
-      event.preventDefault();
-      this.handleClick(event);
+    } else {
+      super.handleKeyPress(event); // Pass keypress handling up for unsupported keys
     }
   }
 
-  /**
-   * Handle Blur - Remove keyboard triggers
-   *
-   * @method handleBlur
-   */
-  handleBlur() {
-    Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
-  }
-
 }
 
-
 Component.registerComponent('Button', Button);
 export default Button;

src/js/clickable-component.js

@@ -0,0 +1,174 @@
+/**
+ * @file button.js
+ */
+import Component from './component';
+import * as Dom from './utils/dom.js';
+import * as Events from './utils/events.js';
+import * as Fn from './utils/fn.js';
+import log from './utils/log.js';
+import document from 'global/document';
+import assign from 'object.assign';
+
+/**
+ * Clickable Component which is clickable or keyboard actionable, but is not a native HTML button
+ *
+ * @param {Object} player  Main Player
+ * @param {Object=} options Object of option names and values
+ * @extends Component
+ * @class ClickableComponent
+ */
+class ClickableComponent extends Component {
+
+  constructor(player, options) {
+    super(player, options);
+
+    this.emitTapEvents();
+
+    this.on('tap', this.handleClick);
+    this.on('click', this.handleClick);
+    this.on('focus', this.handleFocus);
+    this.on('blur', this.handleBlur);
+  }
+
+  /**
+   * Create the component's DOM element
+   *
+   * @param {String=} type Element's node type. e.g. 'div'
+   * @param {Object=} props An object of properties that should be set on the element
+   * @param {Object=} attributes An object of attributes that should be set on the element
+   * @return {Element}
+   * @method createEl
+   */
+  createEl(tag='div', props={}, attributes={}) {
+    props = assign({
+      className: this.buildCSSClass(),
+      tabIndex: 0
+    }, props);
+
+    if (tag === 'button') {
+      log.error(`Creating a ClickableComponent with an HTML element of ${tag} is not supported; use a Button instead.`);
+    }
+
+    // Add ARIA attributes for clickable element which is not a native HTML button
+    attributes = assign({
+      role: 'button',
+      'aria-live': 'polite' // let the screen reader user know that the text of the element may change
+    }, attributes);
+
+    let el = super.createEl(tag, props, attributes);
+
+    this.createControlTextEl(el);
+
+    return el;
+  }
+
+  /**
+   * create control text
+   *
+   * @param {Element} el Parent element for the control text
+   * @return {Element}
+   * @method controlText
+   */
+  createControlTextEl(el) {
+    this.controlTextEl_ = Dom.createEl('span', {
+      className: 'vjs-control-text'
+    });
+
+    if (el) {
+      el.appendChild(this.controlTextEl_);
+    }
+
+    this.controlText(this.controlText_);
+
+    return this.controlTextEl_;
+  }
+
+  /**
+   * Controls text - both request and localize
+   *
+   * @param {String} text Text for element
+   * @return {String}
+   * @method controlText
+   */
+  controlText(text) {
+    if (!text) return this.controlText_ || 'Need Text';
+
+    this.controlText_ = text;
+    this.controlTextEl_.innerHTML = this.localize(this.controlText_);
+
+    return this;
+  }
+
+  /**
+   * Allows sub components to stack CSS class names
+   *
+   * @return {String}
+   * @method buildCSSClass
+   */
+  buildCSSClass() {
+    return `vjs-control vjs-button ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Adds a child component inside this clickable-component
+   *
+   * @param {String|Component} child The class name or instance of a child to add
+   * @param {Object=} options Options, including options to be passed to children of the child.
+   * @return {Component} The child component (created by this process if a string was used)
+   * @method addChild
+   */
+  addChild(child, options={}) {
+    // TODO: Fix adding an actionable child to a ClickableComponent; currently
+    // it will cause issues with assistive technology (e.g. screen readers)
+    // which support ARIA, since an element with role="button" cannot have
+    // actionable child elements.
+
+    //let className = this.constructor.name;
+    //log.warn(`Adding a child to a ClickableComponent (${className}) can cause issues with assistive technology which supports ARIA, since an element with role="button" cannot have actionable child elements.`);
+
+    return super.addChild(child, options);
+  }
+
+  /**
+   * Handle Click - Override with specific functionality for component
+   *
+   * @method handleClick
+   */
+  handleClick() {}
+
+  /**
+   * Handle Focus - Add keyboard functionality to element
+   *
+   * @method handleFocus
+   */
+  handleFocus() {
+    Events.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+  }
+
+  /**
+   * Handle KeyPress (document level) - Trigger click when Space or Enter key is pressed
+   *
+   * @method handleKeyPress
+   */
+  handleKeyPress(event) {
+    // Support Space (32) or Enter (13) key operation to fire a click event
+    if (event.which === 32 || event.which === 13) {
+      event.preventDefault();
+      this.handleClick(event);
+    } else if (super.handleKeyPress) {
+      super.handleKeyPress(event); // Pass keypress handling up for unsupported keys
+    }
+  }
+
+  /**
+   * Handle Blur - Remove keyboard triggers
+   *
+   * @method handleBlur
+   */
+  handleBlur() {
+    Events.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+  }
+}
+
+Component.registerComponent('ClickableComponent', ClickableComponent);
+export default ClickableComponent;

src/js/close-button.js

@@ -0,0 +1,28 @@
+import Button from './button';
+import Component from './component';
+
+/**
+ * The `CloseButton` component is a button which fires a "close" event
+ * when it is activated.
+ *
+ * @extends Button
+ * @class CloseButton
+ */
+class CloseButton extends Button {
+
+  constructor(player, options) {
+    super(player, options);
+    this.controlText(options && options.controlText || this.localize('Close'));
+  }
+
+  buildCSSClass() {
+    return `vjs-close-button ${super.buildCSSClass()}`;
+  }
+
+  handleClick() {
+    this.trigger({type: 'close', bubbles: false});
+  }
+}
+
+Component.registerComponent('CloseButton', CloseButton);
+export default CloseButton;

src/js/component.js

@@ -369,6 +369,18 @@ class Component {
       // If there's no .player_, this is a player
       let ComponentClass = Component.getComponent(componentClassName);
 
+      if (!ComponentClass) {
+        throw new Error(`Component ${componentClassName} does not exist`);
+      }
+
+      // data stored directly on the videojs object may be
+      // misidentified as a component to retain
+      // backwards-compatibility with 4.x. check to make sure the
+      // component class can be instantiated.
+      if (typeof ComponentClass !== 'function') {
+        return null;
+      }
+
       component = new ComponentClass(this.player_ || this, options);
 
     // child is a component instance
@@ -493,7 +505,10 @@ class Component {
       // `this` is `parent`
       let parentOptions = this.options_;
 
-      let handleAdd = (name, opts) => {
+      let handleAdd = (child) => {
+        let name = child.name;
+        let opts = child.opts;
+
         // Allow options for children to be set at the parent options
         // e.g. videojs(id, { controlBar: false });
         // instead of videojs(id, { children: { controlBar: false });
@@ -521,33 +536,57 @@ class Component {
         // Add a direct reference to the child by name on the parent instance.
         // If two of the same component are used, different names should be supplied
         // for each
-        this[name] = this.addChild(name, opts);
+        let newChild = this.addChild(name, opts);
+        if (newChild) {
+          this[name] = newChild;
+        }
       };
 
       // Allow for an array of children details to passed in the options
+      let workingChildren;
+      let Tech = Component.getComponent('Tech');
+
       if (Array.isArray(children)) {
-        for (let i = 0; i < children.length; i++) {
-          let child = children[i];
-          let name;
-          let opts;
-
-          if (typeof child === 'string') {
-            // ['myComponent']
-            name = child;
-            opts = {};
-          } else {
-            // [{ name: 'myComponent', otherOption: true }]
-            name = child.name;
-            opts = child;
-          }
-
-          handleAdd(name, opts);
-        }
+        workingChildren = children;
       } else {
-        Object.getOwnPropertyNames(children).forEach(function(name){
-          handleAdd(name, children[name]);
-        });
+        workingChildren = Object.keys(children);
       }
+
+      workingChildren
+      // children that are in this.options_ but also in workingChildren  would
+      // give us extra children we do not want. So, we want to filter them out.
+      .concat(Object.keys(this.options_)
+              .filter(function(child) {
+                return !workingChildren.some(function(wchild) {
+                  if (typeof wchild === 'string') {
+                    return child === wchild;
+                  } else {
+                    return child === wchild.name;
+                  }
+                });
+              }))
+      .map((child) => {
+        let name, opts;
+
+        if (typeof child === 'string') {
+          name = child;
+          opts = children[name] || this.options_[name] || {};
+        } else {
+          name = child.name;
+          opts = child;
+        }
+
+        return {name, opts};
+      })
+      .filter((child) => {
+        // we have to make sure that child.name isn't in the techOrder since
+        // techs are registerd as Components but can't aren't compatible
+        // See https://github.com/videojs/video.js/issues/2772
+        let c = Component.getComponent(child.opts.componentClass ||
+                                       toTitleCase(child.name));
+        return c && !Tech.isTech(c);
+      })
+      .forEach(handleAdd);
     }
   }
 
@@ -799,6 +838,46 @@ class Component {
     }, 1);
   }
 
+  /**
+   * Finds a single DOM element matching `selector` within the component's
+   * `contentEl` or another custom context.
+   *
+   * @method $
+   * @param  {String} selector
+   *         A valid CSS selector, which will be passed to `querySelector`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {Element|null}
+   */
+  $(selector, context) {
+    return Dom.$(selector, context || this.contentEl());
+  }
+
+  /**
+   * Finds a all DOM elements matching `selector` within the component's
+   * `contentEl` or another custom context.
+   *
+   * @method $$
+   * @param  {String} selector
+   *         A valid CSS selector, which will be passed to `querySelectorAll`.
+   *
+   * @param  {Element|String} [context=document]
+   *         A DOM element within which to query. Can also be a selector
+   *         string in which case the first matching element will be used
+   *         as context. If missing (or no element matches selector), falls
+   *         back to `document`.
+   *
+   * @return {NodeList}
+   */
+  $$(selector, context) {
+    return Dom.$$(selector, context || this.contentEl());
+  }
+
   /**
    * Check if a component's element has a CSS class name
    *
@@ -823,7 +902,7 @@ class Component {
   }
 
   /**
-   * Remove and return a CSS class name from the component's element
+   * Remove a CSS class name from the component's element
    *
    * @param {String} classToRemove Classname to remove
    * @return {Component}
@@ -834,6 +913,23 @@ class Component {
     return this;
   }
 
+  /**
+   * Add or remove a CSS class name from the component's element
+   *
+   * @param  {String} classToToggle
+   * @param  {Boolean|Function} [predicate]
+   *         Can be a function that returns a Boolean. If `true`, the class
+   *         will be added; if `false`, the class will be removed. If not
+   *         given, the class will be added if not present and vice versa.
+   *
+   * @return {Component}
+   * @method toggleClass
+   */
+  toggleClass(classToToggle, predicate) {
+    Dom.toggleElClass(this.el_, classToToggle, predicate);
+    return this;
+  }
+
   /**
    * Show the component element if hidden
    *

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

@@ -38,6 +38,8 @@ class ControlBar extends Component {
   createEl() {
     return super.createEl('div', {
       className: 'vjs-control-bar'
+    }, {
+      'role': 'group' // The control bar is a group, so it can contain menuitems
     });
   }
 }

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

@@ -76,9 +76,8 @@ class MuteToggle extends Button {
     // This causes unnecessary and confusing information for screen reader users.
     // This check is needed because this function gets called every time the volume level is changed.
     let toMute = this.player_.muted() ? 'Unmute' : 'Mute';
-    let localizedMute = this.localize(toMute);
-    if (this.controlText() !== localizedMute) {
-      this.controlText(localizedMute);
+    if (this.controlText() !== toMute) {
+      this.controlText(toMute);
     }
 
     /* TODO improve muted icon classes */

src/js/control-bar/text-track-controls/caption-settings-menu-item.js

@@ -19,12 +19,17 @@ import Component from '../../component.js';
       'kind': options['kind'],
       'player': player,
       'label': options['kind'] + ' settings',
+      'selectable': false,
       'default': false,
       mode: 'disabled'
     };
 
+    // CaptionSettingsMenuItem has no concept of 'selected'
+    options['selectable'] = false;
+
     super(player, options);
     this.addClass('vjs-texttrack-settings');
+    this.controlText(', opens ' + options['kind'] + ' settings dialog');
   }
 
   /**
@@ -34,6 +39,7 @@ import Component from '../../component.js';
    */
   handleClick() {
     this.player().getChild('textTrackSettings').show();
+    this.player().getChild('textTrackSettings').el_.focus();
   }
 
 }

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

@@ -77,21 +77,13 @@ class ChaptersButton extends TextTrackButton {
     let chaptersTrack;
     let items = this.items = [];
 
-    for (let i = 0, l = tracks.length; i < l; i++) {
+    for (let i = 0, length = tracks.length; i < length; i++) {
       let track = tracks[i];
+
       if (track['kind'] === this.kind_) {
-        if (!track.cues) {
-          track['mode'] = 'hidden';
-          /* jshint loopfunc:true */
-          // TODO see if we can figure out a better way of doing this https://github.com/videojs/video.js/issues/1864
-          window.setTimeout(Fn.bind(this, function() {
-            this.createMenu();
-          }), 100);
-          /* jshint loopfunc:false */
-        } else {
-          chaptersTrack = track;
-          break;
-        }
+        chaptersTrack = track;
+
+        break;
       }
     }
 
@@ -105,7 +97,17 @@ class ChaptersButton extends TextTrackButton {
       }));
     }
 
-    if (chaptersTrack) {
+    if (chaptersTrack && chaptersTrack.cues == null) {
+      chaptersTrack['mode'] = 'hidden';
+
+      let remoteTextTrackEl = this.player_.remoteTextTrackEls().getTrackElementByTrack_(chaptersTrack);
+
+      if (remoteTextTrackEl) {
+        remoteTextTrackEl.addEventListener('load', (event) => this.update());
+      }
+    }
+
+    if (chaptersTrack && chaptersTrack.cues && chaptersTrack.cues.length > 0) {
       let cues = chaptersTrack['cues'], cue;
 
       for (let i = 0, l = cues.length; i < l; i++) {
@@ -120,6 +122,7 @@ class ChaptersButton extends TextTrackButton {
 
         menu.addChild(mi);
       }
+
       this.addChild(menu);
     }
 

src/js/control-bar/text-track-controls/off-text-track-menu-item.js

@@ -25,6 +25,9 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
       'mode': 'disabled'
     };
 
+    // MenuItem is selectable
+    options['selectable'] = true;
+
     super(player, options);
     this.selected(true);
   }

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

@@ -57,6 +57,8 @@ class TextTrackButton extends MenuButton {
       // only add tracks that are of the appropriate kind and have a label
       if (track['kind'] === this.kind_) {
         items.push(new TextTrackMenuItem(this.player_, {
+          // MenuItem is selectable
+          'selectable': true,
           'track': track
         }));
       }

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

@@ -24,6 +24,7 @@ class TextTrackMenuItem extends MenuItem {
     // Modify options for parent MenuItem class's init.
     options['label'] = track['label'] || track['language'] || 'Unknown';
     options['selected'] = track['default'] || track['mode'] === 'showing';
+
     super(player, options);
 
     this.track = track;

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

@@ -44,11 +44,14 @@ class VolumeBar extends Slider {
    * @method handleMouseMove
    */
   handleMouseMove(event) {
+    this.checkMuted();
+    this.player_.volume(this.calculateDistance(event));
+  }
+
+  checkMuted() {
     if (this.player_.muted()) {
       this.player_.muted(false);
     }
-
-    this.player_.volume(this.calculateDistance(event));
   }
 
   /**
@@ -71,6 +74,7 @@ class VolumeBar extends Slider {
    * @method stepForward
    */
   stepForward() {
+    this.checkMuted();
     this.player_.volume(this.player_.volume() + 0.1);
   }
 
@@ -80,6 +84,7 @@ class VolumeBar extends Slider {
    * @method stepBack
    */
   stepBack() {
+    this.checkMuted();
     this.player_.volume(this.player_.volume() - 0.1);
   }
 

src/js/control-bar/volume-menu-button.js

@@ -1,22 +1,23 @@
 /**
  * @file volume-menu-button.js
  */
-import Button from '../button.js';
+import * as Fn from '../utils/fn.js';
 import Component from '../component.js';
-import Menu from '../menu/menu.js';
-import MenuButton from '../menu/menu-button.js';
+import Popup from '../popup/popup.js';
+import PopupButton from '../popup/popup-button.js';
 import MuteToggle from './mute-toggle.js';
 import VolumeBar from './volume-control/volume-bar.js';
+import document from 'global/document';
 
 /**
- * Button for volume menu
+ * Button for volume popup
  *
  * @param {Player|Object} player
  * @param {Object=} options
- * @extends MenuButton
+ * @extends PopupButton
  * @class VolumeMenuButton
  */
-class VolumeMenuButton extends MenuButton {
+class VolumeMenuButton extends PopupButton {
 
   constructor(player, options={}){
     // Default to inline
@@ -65,6 +66,14 @@ class VolumeMenuButton extends MenuButton {
     this.on(this.volumeBar, ['sliderinactive', 'blur'], function(){
       this.removeClass('vjs-slider-active');
     });
+
+    this.on(this.volumeBar, ['focus'], function(){
+      this.addClass('vjs-lock-showing');
+    });
+
+    this.on(this.volumeBar, ['blur'], function(){
+      this.removeClass('vjs-lock-showing');
+    });
   }
 
   /**
@@ -87,24 +96,27 @@ class VolumeMenuButton extends MenuButton {
   /**
    * Allow sub components to stack CSS class names
    *
-   * @return {Menu} The volume menu button
-   * @method createMenu
+   * @return {Popup} The volume popup button
+   * @method createPopup
    */
-  createMenu() {
-    let menu = new Menu(this.player_, {
+  createPopup() {
+    let popup = new Popup(this.player_, {
       contentElType: 'div'
     });
 
     let vb = new VolumeBar(this.player_, this.options_.volumeBar);
 
-    menu.addChild(vb);
+    popup.addChild(vb);
 
     this.volumeBar = vb;
-    return menu;
+
+    this.attachVolumeBarEvents();
+
+    return popup;
   }
 
   /**
-   * Handle click on volume menu and calls super
+   * Handle click on volume popup and calls super
    *
    * @method handleClick
    */
@@ -113,6 +125,18 @@ class VolumeMenuButton extends MenuButton {
     super.handleClick();
   }
 
+  attachVolumeBarEvents() {
+    this.on(['mousedown', 'touchdown'], this.handleMouseDown);
+  }
+
+  handleMouseDown(event) {
+    this.on(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+    this.on(document, ['mouseup', 'touchend'], this.handleMouseUp);
+  }
+
+  handleMouseUp(event) {
+    this.off(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+  }
 }
 
 VolumeMenuButton.prototype.volumeUpdate = MuteToggle.prototype.update;

src/js/error-display.js

@@ -2,53 +2,59 @@
  * @file error-display.js
  */
 import Component from './component';
-import  * as Dom from './utils/dom.js';
+import ModalDialog from './modal-dialog';
+
+import * as Dom from './utils/dom';
+import mergeOptions from './utils/merge-options';
 
 /**
- * Display that an error has occurred making the video unplayable
+ * Display that an error has occurred making the video unplayable.
  *
- * @param {Object} player  Main Player
- * @param {Object=} options Object of option names and values
- * @extends Component
+ * @extends ModalDialog
  * @class ErrorDisplay
  */
-class ErrorDisplay extends Component {
+class ErrorDisplay extends ModalDialog {
 
+  /**
+   * Constructor for error display modal.
+   *
+   * @param  {Player} player
+   * @param  {Object} [options]
+   */
   constructor(player, options) {
     super(player, options);
-
-    this.update();
-    this.on(player, 'error', this.update);
+    this.on(player, 'error', this.open);
   }
 
   /**
-   * Create the component's DOM element
+   * Include the old class for backward-compatibility.
    *
-   * @return {Element}
-   * @method createEl
+   * This can be removed in 6.0.
+   *
+   * @method buildCSSClass
+   * @deprecated
+   * @return {String}
    */
-  createEl() {
-    var el = super.createEl('div', {
-      className: 'vjs-error-display'
-    });
-
-    this.contentEl_ = Dom.createEl('div');
-    el.appendChild(this.contentEl_);
-
-    return el;
+  buildCSSClass() {
+    return `vjs-error-display ${super.buildCSSClass()}`;
   }
 
   /**
-   * Update the error message in localized language
+   * Generates the modal content based on the player error.
    *
-   * @method update
+   * @return {String|Null}
    */
-  update() {
-    if (this.player().error()) {
-      this.contentEl_.innerHTML = this.localize(this.player().error().message);
-    }
+  content() {
+    let error = this.player().error();
+    return error ? this.localize(error.message) : '';
   }
 }
 
+ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
+  fillAlways: true,
+  temporary: false,
+  uncloseable: true
+});
+
 Component.registerComponent('ErrorDisplay', ErrorDisplay);
 export default ErrorDisplay;

src/js/menu/menu-button.js

@@ -1,7 +1,7 @@
 /**
  * @file menu-button.js
  */
-import Button from '../button.js';
+import ClickableComponent from '../clickable-component.js';
 import Component from '../component.js';
 import Menu from './menu.js';
 import * as Dom from '../utils/dom.js';
@@ -16,16 +16,16 @@ import toTitleCase from '../utils/to-title-case.js';
  * @extends Button
  * @class MenuButton
  */
-class MenuButton extends Button {
+class MenuButton extends ClickableComponent {
 
   constructor(player, options={}){
     super(player, options);
 
     this.update();
 
-    this.on('keydown', this.handleKeyPress);
     this.el_.setAttribute('aria-haspopup', true);
-    this.el_.setAttribute('role', 'button');
+    this.el_.setAttribute('role', 'menuitem');
+    this.on('keydown', this.handleSubmenuKeyPress);
   }
 
   /**
@@ -50,6 +50,7 @@ class MenuButton extends Button {
      * @private
      */
     this.buttonPressed_ = false;
+    this.el_.setAttribute('aria-expanded', false);
 
     if (this.items && this.items.length === 0) {
       this.hide();
@@ -126,27 +127,6 @@ class MenuButton extends Button {
     return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
   }
 
-  /**
-   * Focus - Add keyboard functionality to element
-   * This function is not needed anymore. Instead, the
-   * keyboard functionality is handled by
-   * treating the button as triggering a submenu.
-   * When the button is pressed, the submenu
-   * appears. Pressing the button again makes
-   * the submenu disappear.
-   *
-   * @method handleFocus
-   */
-  handleFocus() {}
-
-  /**
-   * Can't turn off list display that we turned
-   * on with focus, because list would go away.
-   *
-   * @method handleBlur
-   */
-  handleBlur() {}
-
   /**
    * When you click the button it adds focus, which
    * will show the menu indefinitely.
@@ -171,25 +151,48 @@ class MenuButton extends Button {
   /**
    * Handle key press on menu
    *
-   * @param {Object} Key press event
+   * @param {Object} event Key press event
    * @method handleKeyPress
    */
   handleKeyPress(event) {
 
-    // Check for space bar (32) or enter (13) keys
-    if (event.which === 32 || event.which === 13) {
-      if (this.buttonPressed_){
+    // Escape (27) key or Tab (9) key unpress the 'button'
+    if (event.which === 27 || event.which === 9) {
+      if (this.buttonPressed_) {
         this.unpressButton();
-      } else {
+      }
+      // Don't preventDefault for Tab key - we still want to lose focus
+      if (event.which !== 9) {
+        event.preventDefault();
+      }
+    // Up (38) key or Down (40) key press the 'button'
+    } else if (event.which === 38 || event.which === 40) {
+      if (!this.buttonPressed_) {
         this.pressButton();
+        event.preventDefault();
       }
-      event.preventDefault();
-    // Check for escape (27) key
-    } else if (event.which === 27){
+    } else {
+      super.handleKeyPress(event);
+    }
+  }
+
+  /**
+   * Handle key press on submenu
+   *
+   * @param {Object} event Key press event
+   * @method handleSubmenuKeyPress
+   */
+  handleSubmenuKeyPress(event) {
+
+    // Escape (27) key or Tab (9) key unpress the 'button'
+    if (event.which === 27 || event.which === 9){
       if (this.buttonPressed_){
         this.unpressButton();
       }
-      event.preventDefault();
+      // Don't preventDefault for Tab key - we still want to lose focus
+      if (event.which !== 9) {
+        event.preventDefault();
+      }
     }
   }
 
@@ -201,10 +204,8 @@ class MenuButton extends Button {
   pressButton() {
     this.buttonPressed_ = true;
     this.menu.lockShowing();
-    this.el_.setAttribute('aria-pressed', true);
-    if (this.items && this.items.length > 0) {
-      this.items[0].el().focus(); // set the focus to the title of the submenu
-    }
+    this.el_.setAttribute('aria-expanded', true);
+    this.menu.focus(); // set the focus into the submenu
   }
 
   /**
@@ -215,7 +216,8 @@ class MenuButton extends Button {
   unpressButton() {
     this.buttonPressed_ = false;
     this.menu.unlockShowing();
-    this.el_.setAttribute('aria-pressed', false);
+    this.el_.setAttribute('aria-expanded', false);
+    this.el_.focus(); // Set focus back to this menu button
   }
 }
 

src/js/menu/menu-item.js

@@ -1,7 +1,7 @@
 /**
  * @file menu-item.js
  */
-import Button from '../button.js';
+import ClickableComponent from '../clickable-component.js';
 import Component from '../component.js';
 import assign from 'object.assign';
 
@@ -13,11 +13,22 @@ import assign from 'object.assign';
  * @extends Button
  * @class MenuItem
  */
-class MenuItem extends Button {
+class MenuItem extends ClickableComponent {
 
   constructor(player, options) {
     super(player, options);
+
+    this.selectable = options['selectable'];
+
     this.selected(options['selected']);
+
+    if (this.selectable) {
+      // TODO: May need to be either menuitemcheckbox or menuitemradio,
+      //       and may need logical grouping of menu items.
+      this.el_.setAttribute('role', 'menuitemcheckbox');
+    } else {
+      this.el_.setAttribute('role', 'menuitem');
+    }
   }
 
   /**
@@ -31,7 +42,8 @@ class MenuItem extends Button {
   createEl(type, props, attrs) {
     return super.createEl('li', assign({
       className: 'vjs-menu-item',
-      innerHTML: this.localize(this.options_['label'])
+      innerHTML: this.localize(this.options_['label']),
+      tabIndex: -1
     }, props), attrs);
   }
 
@@ -51,15 +63,22 @@ class MenuItem extends Button {
    * @method selected
    */
   selected(selected) {
-    if (selected) {
-      this.addClass('vjs-selected');
-      this.el_.setAttribute('aria-selected',true);
-    } else {
-      this.removeClass('vjs-selected');
-      this.el_.setAttribute('aria-selected',false);
+    if (this.selectable) {
+      if (selected) {
+        this.addClass('vjs-selected');
+        this.el_.setAttribute('aria-checked',true);
+        // aria-checked isn't fully supported by browsers/screen readers,
+        // so indicate selected state to screen reader in the control text.
+        this.controlText(', selected');
+      } else {
+        this.removeClass('vjs-selected');
+        this.el_.setAttribute('aria-checked',false);
+        // Indicate un-selected state to screen reader
+        // Note that a space clears out the selected state text
+        this.controlText(' ');
+      }
     }
   }
-
 }
 
 Component.registerComponent('MenuItem', MenuItem);

src/js/menu/menu.js

@@ -15,6 +15,14 @@ import * as Events from '../utils/events.js';
  */
 class Menu extends Component {
 
+  constructor (player, options) {
+    super(player, options);
+
+    this.focusedChild_ = -1;
+
+    this.on('keydown', this.handleKeyPress);
+  }
+
   /**
    * Add a menu item to the menu
    *
@@ -25,6 +33,7 @@ class Menu extends Component {
     this.addChild(component);
     component.on('click', Fn.bind(this, function(){
       this.unlockShowing();
+      //TODO: Need to set keyboard focus back to the menuButton
     }));
   }
 
@@ -39,10 +48,12 @@ class Menu extends Component {
     this.contentEl_ = Dom.createEl(contentElType, {
       className: 'vjs-menu-content'
     });
+    this.contentEl_.setAttribute('role', 'menu');
     var el = super.createEl('div', {
       append: this.contentEl_,
       className: 'vjs-menu'
     });
+    el.setAttribute('role', 'presentation');
     el.appendChild(this.contentEl_);
 
     // Prevent clicks from bubbling up. Needed for Menu Buttons,
@@ -54,6 +65,72 @@ class Menu extends Component {
 
     return el;
   }
+
+  /**
+   * Handle key press for menu
+   *
+   * @param {Object} event Event object
+   * @method handleKeyPress
+   */
+  handleKeyPress (event) {
+    if (event.which === 37 || event.which === 40) { // Left and Down Arrows
+      event.preventDefault();
+      this.stepForward();
+    } else if (event.which === 38 || event.which === 39) { // Up and Right Arrows
+      event.preventDefault();
+      this.stepBack();
+    }
+  }
+
+  /**
+   * Move to next (lower) menu item for keyboard users
+   *
+   * @method stepForward
+   */
+   stepForward () {
+     let stepChild = 0;
+
+     if (this.focusedChild_ !== undefined) {
+       stepChild = this.focusedChild_ + 1;
+     }
+     this.focus(stepChild);
+   }
+
+   /**
+    * Move to previous (higher) menu item for keyboard users
+    *
+    * @method stepBack
+    */
+  stepBack () {
+    let stepChild = 0;
+
+    if (this.focusedChild_ !== undefined) {
+      stepChild = this.focusedChild_ - 1;
+    }
+    this.focus(stepChild);
+  }
+
+  /**
+   * Set focus on a menu item in the menu
+   *
+   * @param {Object|String} item Index of child item set focus on
+   * @method focus
+   */
+  focus (item = 0) {
+    let children = this.children();
+
+    if (children.length > 0) {
+      if (item < 0) {
+        item = 0;
+      } else if (item >= children.length) {
+        item = children.length - 1;
+      }
+
+      this.focusedChild_ = item;
+
+      children[item].el_.focus();
+    }
+  }
 }
 
 Component.registerComponent('Menu', Menu);

src/js/modal-dialog.js

@@ -0,0 +1,372 @@
+/**
+ * @file modal-dialog.js
+ */
+import document from 'global/document';
+
+import * as Dom from './utils/dom';
+import * as Fn from './utils/fn';
+import log from './utils/log';
+
+import Component from './component';
+import CloseButton from './close-button';
+
+const MODAL_CLASS_NAME = 'vjs-modal-dialog';
+const ESC = 27;
+
+/**
+ * The `ModalDialog` displays over the video and its controls, which blocks
+ * interaction with the player until it is closed.
+ *
+ * Modal dialogs include a "Close" button and will close when that button
+ * is activated - or when ESC is pressed anywhere.
+ *
+ * @extends Component
+ * @class ModalDialog
+ */
+class ModalDialog extends Component {
+
+  /**
+   * Constructor for modals.
+   *
+   * @param  {Player} player
+   * @param  {Object} [options]
+   * @param  {Mixed} [options.content=undefined]
+   *         Provide customized content for this modal.
+   *
+   * @param  {String} [options.description]
+   *         A text description for the modal, primarily for accessibility.
+   *
+   * @param  {Boolean} [options.fillAlways=false]
+   *         Normally, modals are automatically filled only the first time
+   *         they open. This tells the modal to refresh its content
+   *         every time it opens.
+   *
+   * @param  {String} [options.label]
+   *         A text label for the modal, primarily for accessibility.
+   *
+   * @param  {Boolean} [options.temporary=true]
+   *         If `true`, the modal can only be opened once; it will be
+   *         disposed as soon as it's closed.
+   *
+   * @param  {Boolean} [options.uncloseable=false]
+   *         If `true`, the user will not be able to close the modal
+   *         through the UI in the normal ways. Programmatic closing is
+   *         still possible.
+   *
+   */
+  constructor(player, options) {
+    super(player, options);
+    this.opened_ = this.hasBeenOpened_ = this.hasBeenFilled_ = false;
+
+    this.closeable(!this.options_.uncloseable);
+    this.content(this.options_.content);
+
+    // Make sure the contentEl is defined AFTER any children are initialized
+    // because we only want the contents of the modal in the contentEl
+    // (not the UI elements like the close button).
+    this.contentEl_ = Dom.createEl('div', {
+      className: `${MODAL_CLASS_NAME}-content`
+    }, {
+      role: 'document'
+    });
+
+    this.descEl_ = Dom.createEl('p', {
+      className: `${MODAL_CLASS_NAME}-description vjs-offscreen`,
+      id: this.el().getAttribute('aria-describedby')
+    });
+
+    Dom.textContent(this.descEl_, this.description());
+    this.el_.appendChild(this.descEl_);
+    this.el_.appendChild(this.contentEl_);
+  }
+
+  /**
+   * Create the modal's DOM element
+   *
+   * @method createEl
+   * @return {Element}
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildCSSClass(),
+      tabIndex: -1
+    }, {
+      'aria-describedby': `${this.id()}_description`,
+      'aria-hidden': 'true',
+      'aria-label': this.label(),
+      role: 'dialog'
+    });
+  }
+
+  /**
+   * Build the modal's CSS class.
+   *
+   * @method buildCSSClass
+   * @return {String}
+   */
+  buildCSSClass() {
+    return `${MODAL_CLASS_NAME} vjs-hidden ${super.buildCSSClass()}`;
+  }
+
+  /**
+   * Handles key presses on the document, looking for ESC, which closes
+   * the modal.
+   *
+   * @method handleKeyPress
+   * @param  {Event} e
+   */
+  handleKeyPress(e) {
+    if (e.which === ESC && this.closeable()) {
+      this.close();
+    }
+  }
+
+  /**
+   * Returns the label string for this modal. Primarily used for accessibility.
+   *
+   * @return {String}
+   */
+  label() {
+    return this.options_.label || this.localize('Modal Window');
+  }
+
+  /**
+   * Returns the description string for this modal. Primarily used for
+   * accessibility.
+   *
+   * @return {String}
+   */
+  description() {
+    let desc = this.options_.description || this.localize('This is a modal window.');
+
+    // Append a universal closeability message if the modal is closeable.
+    if (this.closeable()) {
+      desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');
+    }
+
+    return desc;
+  }
+
+  /**
+   * Opens the modal.
+   *
+   * @method open
+   * @return {ModalDialog}
+   */
+  open() {
+    if (!this.opened_) {
+      let player = this.player();
+
+      this.trigger('beforemodalopen');
+      this.opened_ = true;
+
+      // Fill content if the modal has never opened before and
+      // never been filled.
+      if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {
+        this.fill();
+      }
+
+      // If the player was playing, pause it and take note of its previously
+      // playing state.
+      this.wasPlaying_ = !player.paused();
+
+      if (this.wasPlaying_) {
+        player.pause();
+      }
+
+      if (this.closeable()) {
+        this.on(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+      }
+
+      player.controls(false);
+      this.show();
+      this.el().setAttribute('aria-hidden', 'false');
+      this.trigger('modalopen');
+      this.hasBeenOpened_ = true;
+    }
+    return this;
+  }
+
+  /**
+   * Whether or not the modal is opened currently.
+   *
+   * @method opened
+   * @param  {Boolean} [value]
+   *         If given, it will open (`true`) or close (`false`) the modal.
+   *
+   * @return {Boolean}
+   */
+  opened(value) {
+    if (typeof value === 'boolean') {
+      this[value ? 'open' : 'close']();
+    }
+    return this.opened_;
+  }
+
+  /**
+   * Closes the modal.
+   *
+   * @method close
+   * @return {ModalDialog}
+   */
+  close() {
+    if (this.opened_) {
+      let player = this.player();
+
+      this.trigger('beforemodalclose');
+      this.opened_ = false;
+
+      if (this.wasPlaying_) {
+        player.play();
+      }
+
+      if (this.closeable()) {
+        this.off(document, 'keydown', Fn.bind(this, this.handleKeyPress));
+      }
+
+      player.controls(true);
+      this.hide();
+      this.el().setAttribute('aria-hidden', 'true');
+      this.trigger('modalclose');
+
+      if (this.options_.temporary) {
+        this.dispose();
+      }
+    }
+    return this;
+  }
+
+  /**
+   * Whether or not the modal is closeable via the UI.
+   *
+   * @method closeable
+   * @param  {Boolean} [value]
+   *         If given as a Boolean, it will set the `closeable` option.
+   *
+   * @return {Boolean}
+   */
+  closeable(value) {
+    if (typeof value === 'boolean') {
+      let closeable = this.closeable_ = !!value;
+      let close = this.getChild('closeButton');
+
+      // If this is being made closeable and has no close button, add one.
+      if (closeable && !close) {
+
+        // The close button should be a child of the modal - not its
+        // content element, so temporarily change the content element.
+        let temp = this.contentEl_;
+        this.contentEl_ = this.el_;
+        close = this.addChild('closeButton');
+        this.contentEl_ = temp;
+        this.on(close, 'close', this.close);
+      }
+
+      // If this is being made uncloseable and has a close button, remove it.
+      if (!closeable && close) {
+        this.off(close, 'close', this.close);
+        this.removeChild(close);
+        close.dispose();
+      }
+    }
+    return this.closeable_;
+  }
+
+  /**
+   * Fill the modal's content element with the modal's "content" option.
+   *
+   * The content element will be emptied before this change takes place.
+   *
+   * @method fill
+   * @return {ModalDialog}
+   */
+  fill() {
+    return this.fillWith(this.content());
+  }
+
+  /**
+   * Fill the modal's content element with arbitrary content.
+   *
+   * The content element will be emptied before this change takes place.
+   *
+   * @method fillWith
+   * @param  {Mixed} [content]
+   *         The same rules apply to this as apply to the `content` option.
+   *
+   * @return {ModalDialog}
+   */
+  fillWith(content) {
+    let contentEl = this.contentEl();
+    let parentEl = contentEl.parentNode;
+    let nextSiblingEl = contentEl.nextSibling;
+
+    this.trigger('beforemodalfill');
+    this.hasBeenFilled_ = true;
+
+    // Detach the content element from the DOM before performing
+    // manipulation to avoid modifying the live DOM multiple times.
+    parentEl.removeChild(contentEl);
+    this.empty();
+    Dom.insertContent(contentEl, content);
+    this.trigger('modalfill');
+
+    // Re-inject the re-filled content element.
+    if (nextSiblingEl) {
+      parentEl.insertBefore(contentEl, nextSiblingEl);
+    } else {
+      parentEl.appendChild(contentEl);
+    }
+
+    return this;
+  }
+
+  /**
+   * Empties the content element.
+   *
+   * This happens automatically anytime the modal is filled.
+   *
+   * @method empty
+   * @return {ModalDialog}
+   */
+  empty() {
+    this.trigger('beforemodalempty');
+    Dom.emptyEl(this.contentEl());
+    this.trigger('modalempty');
+    return this;
+  }
+
+  /**
+   * Gets or sets the modal content, which gets normalized before being
+   * rendered into the DOM.
+   *
+   * This does not update the DOM or fill the modal, but it is called during
+   * that process.
+   *
+   * @method content
+   * @param  {Mixed} [value]
+   *         If defined, sets the internal content value to be used on the
+   *         next call(s) to `fill`. This value is normalized before being
+   *         inserted. To "clear" the internal content value, pass `null`.
+   *
+   * @return {Mixed}
+   */
+  content(value) {
+    if (typeof value !== 'undefined') {
+      this.content_ = value;
+    }
+    return this.content_;
+  }
+}
+
+/*
+ * Modal dialog default options.
+ *
+ * @type {Object}
+ * @private
+ */
+ModalDialog.prototype.options_ = {
+  temporary: true
+};
+
+Component.registerComponent('ModalDialog', ModalDialog);
+export default ModalDialog;

src/js/player.js

@@ -32,8 +32,10 @@ import BigPlayButton from './big-play-button.js';
 import ControlBar from './control-bar/control-bar.js';
 import ErrorDisplay from './error-display.js';
 import TextTrackSettings from './tracks/text-track-settings.js';
+import ModalDialog from './modal-dialog';
 
 // Require html5 tech, at least for disposing the original video tag
+import Tech from './tech/tech.js';
 import Html5 from './tech/html5.js';
 
 /**
@@ -222,7 +224,7 @@ class Player extends Component {
     // prevent dispose from being called twice
     this.off('dispose');
 
-    if (this.styleEl_) {
+    if (this.styleEl_ && this.styleEl_.parentNode) {
       this.styleEl_.parentNode.removeChild(this.styleEl_);
     }
 
@@ -267,6 +269,7 @@ class Player extends Component {
     // Update tag id/class for use as HTML5 playback tech
     // Might think we should do this after embedding in container so .vjs-tech class
     // doesn't flash 100% width/height, but class only applies with .video-js parent
+    tag.playerId = tag.id;
     tag.id += '_html5_api';
     tag.className = 'vjs-tech';
 
@@ -279,8 +282,8 @@ class Player extends Component {
     // of the player in a way that's still overrideable by CSS, just like the
     // video element
     this.styleEl_ = stylesheet.createStyleElement('vjs-styles-dimensions');
-    let defaultsStyleEl = document.querySelector('.vjs-styles-defaults');
-    let head = document.querySelector('head');
+    let defaultsStyleEl = Dom.$('.vjs-styles-defaults');
+    let head = Dom.$('head');
     head.insertBefore(this.styleEl_, defaultsStyleEl ? defaultsStyleEl.nextSibling : head.firstChild);
 
     // Pass in the width/height/aspectRatio options which will update the style el
@@ -413,6 +416,7 @@ class Player extends Component {
     let width;
     let height;
     let aspectRatio;
+    let idClass;
 
     // The aspect ratio is either used directly or to calculate width and height.
     if (this.aspectRatio_ !== undefined && this.aspectRatio_ !== 'auto') {
@@ -449,7 +453,12 @@ class Player extends Component {
       height = width  * ratioMultiplier;
     }
 
-    let idClass = this.id()+'-dimensions';
+    // Ensure the CSS class is valid by starting with an alpha character
+    if (/^[^a-zA-Z]/.test(this.id())) {
+      idClass = 'dimensions-'+this.id();
+    } else {
+      idClass = this.id()+'-dimensions';
+    }
 
     // Ensure the right class is still on the player for the style element
     this.addClass(idClass);
@@ -485,7 +494,7 @@ class Player extends Component {
 
     // get rid of the HTML5 video tag as soon as we are using another tech
     if (techName !== 'Html5' && this.tag) {
-      Component.getComponent('Html5').disposeMediaElement(this.tag);
+      Tech.getTech('Html5').disposeMediaElement(this.tag);
       this.tag.player = null;
       this.tag = null;
     }
@@ -525,7 +534,12 @@ class Player extends Component {
     }
 
     // Initialize tech instance
-    let techComponent = Component.getComponent(techName);
+    let techComponent = Tech.getTech(techName);
+    // Support old behavior of techs being registered as components.
+    // Remove once that deprecated behavior is removed.
+    if (!techComponent) {
+      techComponent = Component.getComponent(techName);
+    }
     this.tech_ = new techComponent(techOptions);
 
     // player.triggerReady is always async, so don't need this to be async
@@ -590,7 +604,7 @@ class Player extends Component {
   unloadTech_() {
     // Save the current text tracks so that we can reuse the same text tracks with the next tech
     this.textTracks_ = this.textTracks();
-    this.textTracksJson_ = textTrackConverter.textTracksToJson(this);
+    this.textTracksJson_ = textTrackConverter.textTracksToJson(this.tech_);
 
     this.isReady_ = false;
 
@@ -599,6 +613,30 @@ class Player extends Component {
     this.tech_ = false;
   }
 
+  /**
+   * Return a reference to the current tech.
+   * It will only return a reference to the tech if given an object with the
+   * `IWillNotUseThisInPlugins` property on it. This is try and prevent misuse
+   * of techs by plugins.
+   *
+   * @param {Object}
+   * @return {Object} The Tech
+   * @method tech
+   */
+  tech(safety) {
+    if (safety && safety.IWillNotUseThisInPlugins) {
+      return this.tech_;
+    }
+    let errorText = `
+      Please make sure that you are not using this inside of a plugin.
+      To disable this alert and error, please pass in an object with
+      \`IWillNotUseThisInPlugins\` to the \`tech\` method. See
+      https://github.com/videojs/video.js/issues/2617 for more info.
+    `;
+    window.alert(errorText);
+    throw new Error(errorText);
+  }
+
   /**
    * Set up click and touch listeners for the playback element
    *
@@ -683,7 +721,7 @@ 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.tag && this.options_.autoplay && this.paused()) {
+    if (this.src() && this.tag && this.options_.autoplay && this.paused()) {
       delete this.tag.poster; // Chrome Fix. Fixed in Chrome v16.
       this.play();
     }
@@ -1640,17 +1678,25 @@ class Player extends Component {
   }
 
   /**
-   * Select source based on tech order
+   * Check whether the player can play a given mimetype
    *
-   * @param {Array} sources The sources for a media asset
-   * @return {Object|Boolean} Object of source and tech order, otherwise false
-   * @method selectSource
+   * @param {String} type The mimetype to check
+   * @return {String} 'probably', 'maybe', or '' (empty string)
+   * @method canPlayType
    */
-  selectSource(sources) {
+  canPlayType(type) {
+    let can;
+
     // Loop through each playback technology in the options order
-    for (var i=0,j=this.options_.techOrder;i<j.length;i++) {
+    for (let i = 0, j = this.options_.techOrder; i < j.length; i++) {
       let techName = toTitleCase(j[i]);
-      let tech = Component.getComponent(techName);
+      let tech = Tech.getTech(techName);
+
+      // Support old behavior of techs being registered as components.
+      // Remove once that deprecated behavior is removed.
+      if (!tech) {
+        tech = Component.getComponent(techName);
+      }
 
       // Check if the current tech is defined before continuing
       if (!tech) {
@@ -1660,19 +1706,87 @@ class Player extends Component {
 
       // Check if the browser supports this technology
       if (tech.isSupported()) {
-        // Loop through each source object
-        for (var a=0,b=sources;a<b.length;a++) {
-          var source = b[a];
+        can = tech.canPlayType(type);
 
-          // Check if source can be played with this technology
-          if (tech.canPlaySource(source)) {
-            return { source: source, tech: techName };
-          }
+        if (can) {
+          return can;
         }
       }
     }
 
-    return false;
+    return '';
+  }
+
+  /**
+   * Select source based on tech-order or source-order
+   * Uses source-order selection if `options.sourceOrder` is truthy. Otherwise,
+   * defaults to tech-order selection
+   *
+   * @param {Array} sources The sources for a media asset
+   * @return {Object|Boolean} Object of source and tech order, otherwise false
+   * @method selectSource
+   */
+  selectSource(sources) {
+    // Get only the techs specified in `techOrder` that exist and are supported by the
+    // current platform
+    let techs =
+      this.options_.techOrder
+        .map(toTitleCase)
+        .map((techName) => {
+          // `Component.getComponent(...)` is for support of old behavior of techs
+          // being registered as components.
+          // Remove once that deprecated behavior is removed.
+          return [techName, Tech.getTech(techName) || Component.getComponent(techName)];
+        })
+        .filter(([techName, tech]) => {
+          // Check if the current tech is defined before continuing
+          if (tech) {
+            // Check if the browser supports this technology
+            return tech.isSupported();
+          }
+
+          log.error(`The "${techName}" tech is undefined. Skipped browser support check for that tech.`);
+          return false;
+        });
+
+    // Iterate over each `innerArray` element once per `outerArray` element and execute
+    // `tester` with both. If `tester` returns a non-falsy value, exit early and return
+    // that value.
+    let findFirstPassingTechSourcePair = function (outerArray, innerArray, tester) {
+      let found;
+
+      outerArray.some((outerChoice) => {
+        return innerArray.some((innerChoice) => {
+          found = tester(outerChoice, innerChoice);
+
+          if (found) {
+            return true;
+          }
+        });
+      });
+
+      return found;
+    };
+
+    let foundSourceAndTech;
+    let flip = (fn) => (a, b) => fn(b, a);
+    let finder = ([techName, tech], source) => {
+      if (tech.canPlaySource(source)) {
+        return {source: source, tech: techName};
+      }
+    };
+
+    // Depending on the truthiness of `options.sourceOrder`, we swap the order of techs and sources
+    // to select from them based on their priority.
+    if (this.options_.sourceOrder) {
+      // Source-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(sources, techs, flip(finder));
+    } else {
+      // Tech-first ordering
+      foundSourceAndTech = findFirstPassingTechSourcePair(techs, sources, finder);
+    }
+
+    return foundSourceAndTech || false;
   }
 
   /**
@@ -1712,7 +1826,12 @@ class Player extends Component {
       return this.techGet_('src');
     }
 
-    let currentTech = Component.getComponent(this.techName_);
+    let currentTech = Tech.getTech(this.techName_);
+    // Support old behavior of techs being registered as components.
+    // Remove once that deprecated behavior is removed.
+    if (!currentTech) {
+      currentTech = Component.getComponent(this.techName_);
+    }
 
     // case: Array of source objects to choose from and pick the best to play
     if (Array.isArray(source)) {
@@ -1805,6 +1924,19 @@ class Player extends Component {
     return this;
   }
 
+  /**
+   * Reset the player. Loads the first tech in the techOrder,
+   * and calls `reset` on the tech`.
+   *
+   * @return {Player} Returns the player
+   * @method reset
+   */
+  reset() {
+    this.loadTech_(toTitleCase(this.options_.techOrder[0]), null);
+    this.techCall_('reset');
+    return this;
+  }
+
   /**
    * Returns the fully qualified URL of the current source value e.g. http://mysite.com/video.mp4
    * Can be used in conjuction with `currentType` to assist in rebuilding the current source object.
@@ -1848,7 +1980,7 @@ class Player extends Component {
   /**
    * Get or set the autoplay attribute.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should autoplay
    * @return {String} The autoplay attribute value when getting
    * @return {Player} Returns the player when setting
    * @method autoplay
@@ -1865,7 +1997,7 @@ class Player extends Component {
   /**
    * Get or set the loop attribute on the video element.
    *
-   * @param {Boolean} value Boolean to determine if preload should be used
+   * @param {Boolean} value Boolean to determine if video should loop
    * @return {String} The loop attribute value when getting
    * @return {Player} Returns the player when setting
    * @method loop
@@ -2045,6 +2177,7 @@ class Player extends Component {
     if (err === null) {
       this.error_ = err;
       this.removeClass('vjs-error');
+      this.errorDisplay.close();
       return this;
     }
 
@@ -2055,9 +2188,6 @@ class Player extends Component {
       this.error_ = new MediaError(err);
     }
 
-    // fire an error event on the player
-    this.trigger('error');
-
     // add the vjs-error classname to the player
     this.addClass('vjs-error');
 
@@ -2065,6 +2195,9 @@ class Player extends Component {
     // ie8 just logs "[object object]" if you just log the error object
     log.error(`(CODE:${this.error_.code} ${MediaError.errorTypes[this.error_.code]})`, this.error_.message, this.error_);
 
+    // fire an error event on the player
+    this.trigger('error');
+
     return this;
   }
 
@@ -2360,6 +2493,16 @@ class Player extends Component {
     return this.tech_ && this.tech_['remoteTextTracks']();
   }
 
+  /**
+   * Get an array of remote html track elements
+   *
+   * @return {HTMLTrackElement[]}
+   * @method remoteTextTrackEls
+   */
+  remoteTextTrackEls() {
+    return this.tech_ && this.tech_['remoteTextTrackEls']();
+  }
+
   /**
    * Add a text track
    * In addition to the W3C settings we allow adding additional info through options.
@@ -2479,6 +2622,38 @@ class Player extends Component {
     return options;
   }
 
+  /**
+   * Creates a simple modal dialog (an instance of the `ModalDialog`
+   * component) that immediately overlays the player with arbitrary
+   * content and removes itself when closed.
+   *
+   * @param {String|Function|Element|Array|Null} content
+   *        Same as `ModalDialog#content`'s param of the same name.
+   *
+   *        The most straight-forward usage is to provide a string or DOM
+   *        element.
+   *
+   * @param {Object} [options]
+   *        Extra options which will be passed on to the `ModalDialog`.
+   *
+   * @return {ModalDialog}
+   */
+  createModal(content, options) {
+    let player = this;
+
+    options = options || {};
+    options.content = content || '';
+
+    let modal = new ModalDialog(player, options);
+
+    player.addChild(modal);
+    modal.on('dispose', function() {
+      player.removeChild(modal);
+    });
+
+    return modal.open();
+  }
+
   /**
    * Gets tag settings
    *
@@ -2623,6 +2798,13 @@ Player.prototype.handleUserInactive_;
  */
 Player.prototype.handleTimeUpdate_;
 
+/**
+ * Fired when video playback ends
+ *
+ * @event ended
+ */
+Player.prototype.handleTechEnded_;
+
 /**
  * Fired when the volume changes
  *

src/js/popup/popup-button.js

@@ -0,0 +1,91 @@
+/**
+ * @file popup-button.js
+ */
+import ClickableComponent from '../clickable-component.js';
+import Component from '../component.js';
+import Popup from './popup.js';
+import * as Dom from '../utils/dom.js';
+import * as Fn from '../utils/fn.js';
+import toTitleCase from '../utils/to-title-case.js';
+
+/**
+ * A button class with a popup control
+ *
+ * @param {Player|Object} player
+ * @param {Object=} options
+ * @extends ClickableComponent
+ * @class PopupButton
+ */
+class PopupButton extends ClickableComponent {
+
+  constructor(player, options={}){
+    super(player, options);
+
+    this.update();
+  }
+
+  /**
+   * Update popup
+   *
+   * @method update
+   */
+  update() {
+    let popup = this.createPopup();
+
+    if (this.popup) {
+      this.removeChild(this.popup);
+    }
+
+    this.popup = popup;
+    this.addChild(popup);
+
+    if (this.items && this.items.length === 0) {
+      this.hide();
+    } else if (this.items && this.items.length > 1) {
+      this.show();
+    }
+  }
+
+  /**
+   * Create popup - Override with specific functionality for component
+   *
+   * @return {Popup} The constructed popup
+   * @method createPopup
+   */
+  createPopup() {}
+
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   * @method createEl
+   */
+  createEl() {
+    return super.createEl('div', {
+      className: this.buildCSSClass()
+    });
+  }
+
+  /**
+   * Allow sub components to stack CSS class names
+   *
+   * @return {String} The constructed class name
+   * @method buildCSSClass
+   */
+  buildCSSClass() {
+    var menuButtonClass = 'vjs-menu-button';
+
+    // If the inline option is passed, we want to use different styles altogether.
+    if (this.options_.inline === true) {
+      menuButtonClass += '-inline';
+    } else {
+      menuButtonClass += '-popup';
+    }
+
+    return `vjs-menu-button ${menuButtonClass} ${super.buildCSSClass()}`;
+  }
+
+}
+
+Component.registerComponent('PopupButton', PopupButton);
+export default PopupButton;

src/js/popup/popup.js

@@ -0,0 +1,59 @@
+/**
+ * @file popup.js
+ */
+import Component from '../component.js';
+import * as Dom from '../utils/dom.js';
+import * as Fn from '../utils/fn.js';
+import * as Events from '../utils/events.js';
+
+/**
+ * The Popup component is used to build pop up controls.
+ *
+ * @extends Component
+ * @class Popup
+ */
+class Popup extends Component {
+
+  /**
+   * Add a popup item to the popup
+   *
+   * @param {Object|String} component Component or component type to add
+   * @method addItem
+   */
+  addItem(component) {
+    this.addChild(component);
+    component.on('click', Fn.bind(this, function(){
+      this.unlockShowing();
+    }));
+  }
+
+  /**
+   * Create the component's DOM element
+   *
+   * @return {Element}
+   * @method createEl
+   */
+  createEl() {
+    let contentElType = this.options_.contentElType || 'ul';
+    this.contentEl_ = Dom.createEl(contentElType, {
+      className: 'vjs-menu-content'
+    });
+    var el = super.createEl('div', {
+      append: this.contentEl_,
+      className: 'vjs-menu'
+    });
+    el.appendChild(this.contentEl_);
+
+    // Prevent clicks from bubbling up. Needed for Popup Buttons,
+    // where a click on the parent is significant
+    Events.on(el, 'click', function(event){
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    });
+
+    return el;
+  }
+}
+
+Component.registerComponent('Popup', Popup);
+export default Popup;

src/js/poster-image.js

@@ -1,7 +1,7 @@
 /**
  * @file poster-image.js
  */
-import Button from './button.js';
+import ClickableComponent from './clickable-component.js';
 import Component from './component.js';
 import * as Fn from './utils/fn.js';
 import * as Dom from './utils/dom.js';
@@ -15,7 +15,7 @@ import * as browser from './utils/browser.js';
  * @extends Button
  * @class PosterImage
  */
-class PosterImage extends Button {
+class PosterImage extends ClickableComponent {
 
   constructor(player, options){
     super(player, options);

src/js/tech/flash-rtmp.js

@@ -22,7 +22,7 @@ function FlashRtmpDecorator(Flash) {
     // Look for the normal URL separator we expect, '&'.
     // If found, we split the URL into two pieces around the
     // first '&'.
-    let connEnd = src.indexOf('&');
+    let connEnd = src.search(/&(?!\w+=)/);
     let streamBegin;
     if (connEnd !== -1) {
       streamBegin = connEnd + 1;
@@ -60,12 +60,31 @@ function FlashRtmpDecorator(Flash) {
   Flash.rtmpSourceHandler = {};
 
   /**
-   * Check Flash can handle the source natively
+   * Check if Flash can play the given videotype
+   * @param  {String} type    The mimetype to check
+   * @return {String}         'probably', 'maybe', or '' (empty string)
+   */
+  Flash.rtmpSourceHandler.canPlayType = function(type){
+    if (Flash.isStreamingType(type)) {
+      return 'maybe';
+    }
+
+    return '';
+  };
+
+  /**
+   * Check if Flash can handle the source natively
    * @param  {Object} source  The source object
    * @return {String}         'probably', 'maybe', or '' (empty string)
    */
   Flash.rtmpSourceHandler.canHandleSource = function(source){
-    if (Flash.isStreamingType(source.type) || Flash.isStreamingSrc(source.src)) {
+    let can = Flash.rtmpSourceHandler.canPlayType(source.type);
+
+    if (can) {
+      return can;
+    }
+
+    if (Flash.isStreamingSrc(source.src)) {
       return 'maybe';
     }
 

src/js/tech/flash.js

@@ -352,6 +352,19 @@ Tech.withSourceHandlers(Flash);
  */
 Flash.nativeSourceHandler = {};
 
+/**
+ * Check if Flash can play the given videotype
+ * @param  {String} type    The mimetype to check
+ * @return {String}         'probably', 'maybe', or '' (empty string)
+ */
+Flash.nativeSourceHandler.canPlayType = function(type){
+  if (type in Flash.formats) {
+    return 'maybe';
+  }
+
+  return '';
+};
+
 /*
  * Check Flash can handle the source natively
  *
@@ -376,11 +389,7 @@ Flash.nativeSourceHandler.canHandleSource = function(source){
     type = source.type.replace(/;.*/, '').toLowerCase();
   }
 
-  if (type in Flash.formats) {
-    return 'maybe';
-  }
-
-  return '';
+  return Flash.nativeSourceHandler.canPlayType(type);
 };
 
 /*
@@ -539,4 +548,5 @@ Flash.getEmbedCode = function(swf, flashVars, params, attributes){
 FlashRtmpDecorator(Flash);
 
 Component.registerComponent('Flash', Flash);
+Tech.registerTech('Flash', Flash);
 export default Flash;

src/js/tech/html5.js

@@ -49,6 +49,7 @@ class Html5 extends Tech {
       while (nodesLength--) {
         let node = nodes[nodesLength];
         let nodeName = node.nodeName.toLowerCase();
+
         if (nodeName === 'track') {
           if (!this.featuresNativeTextTracks) {
             // Empty video tag tracks so the built-in player doesn't use them also.
@@ -57,6 +58,8 @@ class Html5 extends Tech {
             // captions and subtitles. videoElement.textTracks
             removeNodes.push(node);
           } else {
+            // store HTMLTrackElement and TextTrack to remote list
+            this.remoteTextTrackEls().addTrackElement_(node);
             this.remoteTextTracks().addTrack_(node.track);
           }
         }
@@ -486,13 +489,28 @@ class Html5 extends Tech {
     this.el_.load();
   }
 
+  /**
+   * Reset the tech. Removes all sources and calls `load`.
+   *
+   * @method reset
+   */
+  reset() {
+    Html5.resetMediaElement(this.el_);
+  }
+
   /**
    * Get current source
    *
    * @return {Object}
    * @method currentSrc
    */
-  currentSrc() { return this.el_.currentSrc; }
+  currentSrc() { 
+    if (this.currentSource_) {
+      return this.currentSource_.src;
+    } else {
+      return this.el_.currentSrc;
+    }
+  }
 
   /**
    * Get poster
@@ -716,11 +734,11 @@ class Html5 extends Tech {
   }
 
   /**
-   * Creates and returns a remote text track object
+   * Creates a remote text track object and returns a html track element
    *
    * @param {Object} options The object should contain values for
    * kind, language, label and src (location of the WebVTT file)
-   * @return {TextTrackObject}
+   * @return {HTMLTrackElement}
    * @method addRemoteTextTrack
    */
   addRemoteTextTrack(options={}) {
@@ -728,32 +746,34 @@ class Html5 extends Tech {
       return super.addRemoteTextTrack(options);
     }
 
-    var track = document.createElement('track');
+    let htmlTrackElement = document.createElement('track');
 
-    if (options['kind']) {
-      track['kind'] = options['kind'];
+    if (options.kind) {
+      htmlTrackElement.kind = options.kind;
     }
-    if (options['label']) {
-      track['label'] = options['label'];
+    if (options.label) {
+      htmlTrackElement.label = options.label;
     }
-    if (options['language'] || options['srclang']) {
-      track['srclang'] = options['language'] || options['srclang'];
+    if (options.language || options.srclang) {
+      htmlTrackElement.srclang = options.language || options.srclang;
     }
-    if (options['default']) {
-      track['default'] = options['default'];
+    if (options.default) {
+      htmlTrackElement.default = options.default;
     }
-    if (options['id']) {
-      track['id'] = options['id'];
+    if (options.id) {
+      htmlTrackElement.id = options.id;
     }
-    if (options['src']) {
-      track['src'] = options['src'];
+    if (options.src) {
+      htmlTrackElement.src = options.src;
     }
 
-    this.el().appendChild(track);
+    this.el().appendChild(htmlTrackElement);
 
-    this.remoteTextTracks().addTrack_(track.track);
+    // store HTMLTrackElement and TextTrack to remote list
+    this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+    this.remoteTextTracks().addTrack_(htmlTrackElement.track);
 
-    return track;
+    return htmlTrackElement;
   }
 
   /**
@@ -767,11 +787,15 @@ class Html5 extends Tech {
       return super.removeRemoteTextTrack(track);
     }
 
-    var tracks, i;
+    let tracks, i;
 
+    let trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+    // remove HTMLTrackElement and TextTrack from remote list
+    this.remoteTextTrackEls().removeTrackElement_(trackElement);
     this.remoteTextTracks().removeTrack_(track);
 
-    tracks = this.el().querySelectorAll('track');
+    tracks = this.$$('track');
 
     i = tracks.length;
     while (i--) {
@@ -828,6 +852,22 @@ Tech.withSourceHandlers(Html5);
  */
 Html5.nativeSourceHandler = {};
 
+/*
+ * Check if the video element can play the given videotype
+ *
+ * @param  {String} type    The mimetype to check
+ * @return {String}         'probably', 'maybe', or '' (empty string)
+ */
+Html5.nativeSourceHandler.canPlayType = function(type){
+  // IE9 on Windows 7 without MediaPlayer throws an error here
+  // https://github.com/videojs/video.js/issues/519
+  try {
+    return Html5.TEST_VID.canPlayType(type);
+  } catch(e) {
+    return '';
+  }
+};
+
 /*
  * Check if the video element can handle the source natively
  *
@@ -837,24 +877,14 @@ Html5.nativeSourceHandler = {};
 Html5.nativeSourceHandler.canHandleSource = function(source){
   var match, ext;
 
-  function canPlayType(type){
-    // IE9 on Windows 7 without MediaPlayer throws an error here
-    // https://github.com/videojs/video.js/issues/519
-    try {
-      return Html5.TEST_VID.canPlayType(type);
-    } catch(e) {
-      return '';
-    }
-  }
-
   // If a type was provided we should rely on that
   if (source.type) {
-    return canPlayType(source.type);
+    return Html5.nativeSourceHandler.canPlayType(source.type);
   } else if (source.src) {
     // If no type, fall back to checking 'video/[EXTENSION]'
     ext = Url.getFileExtension(source.src);
 
-    return canPlayType(`video/${ext}`);
+    return Html5.nativeSourceHandler.canPlayType(`video/${ext}`);
   }
 
   return '';
@@ -1080,5 +1110,29 @@ Html5.disposeMediaElement = function(el){
   }
 };
 
+Html5.resetMediaElement = function(el){
+  if (!el) { return; }
+
+  let sources = el.querySelectorAll('source');
+  let i = sources.length;
+  while (i--) {
+    el.removeChild(sources[i]);
+  }
+
+  // remove any src reference.
+  // not setting `src=''` because that throws an error
+  el.removeAttribute('src');
+
+  if (typeof el.load === 'function') {
+    // wrapping in an iife so it's not deoptimized (#1060#discussion_r10324473)
+    (function() {
+      try {
+        el.load();
+      } catch (e) {}
+    })();
+  }
+};
+
 Component.registerComponent('Html5', Html5);
+Tech.registerTech('Html5', Html5);
 export default Html5;

src/js/tech/loader.js

@@ -1,7 +1,8 @@
 /**
  * @file loader.js
  */
-import Component from '../component';
+import Component from '../component.js';
+import Tech from './tech.js';
 import window from 'global/window';
 import toTitleCase from '../utils/to-title-case.js';
 
@@ -26,7 +27,12 @@ class MediaLoader extends Component {
     if (!options.playerOptions['sources'] || options.playerOptions['sources'].length === 0) {
       for (let i=0, j=options.playerOptions['techOrder']; i<j.length; i++) {
         let techName = toTitleCase(j[i]);
-        let tech = Component.getComponent(techName);
+        let tech = Tech.getTech(techName);
+        // Support old behavior of techs being registered as components.
+        // Remove once that deprecated behavior is removed.
+        if (!techName) {
+          tech = Component.getComponent(techName);
+        }
 
         // Check if the browser supports this technology
         if (tech && tech.isSupported()) {

src/js/tech/tech.js

@@ -5,6 +5,9 @@
  */
 
 import Component from '../component';
+import HTMLTrackElement from '../tracks/html-track-element';
+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 * as Fn from '../utils/fn.js';
@@ -233,6 +236,13 @@ class Tech extends Component {
     super.dispose();
   }
 
+  /**
+   * Reset the tech. Removes all sources and resets readyState.
+   *
+   * @method reset
+   */
+  reset() {}
+
   /**
    * When invoked without an argument, returns a MediaError object
    * representing the current error state of the player or null if
@@ -309,21 +319,20 @@ class Tech extends Component {
    * @method emulateTextTracks
    */
   emulateTextTracks() {
-    if (!window['WebVTT'] && this.el().parentNode != null) {
-      let script = document.createElement('script');
-      script.src = this.options_['vtt.js'] || '../node_modules/vtt.js/dist/vtt.js';
-      this.el().parentNode.appendChild(script);
-      window['WebVTT'] = true;
-    }
-
     let tracks = this.textTracks();
     if (!tracks) {
       return;
     }
 
-    let textTracksChanges = Fn.bind(this, function() {
-      let updateDisplay = () => this.trigger('texttrackchange');
+    if (!window['WebVTT'] && this.el().parentNode != null) {
+      let script = document.createElement('script');
+      script.src = this.options_['vtt.js'] || '../node_modules/videojs-vtt.js/dist/vtt.js';
+      this.el().parentNode.appendChild(script);
+      window['WebVTT'] = true;
+    }
 
+    let updateDisplay = () => this.trigger('texttrackchange');
+    let textTracksChanges = () => {
       updateDisplay();
 
       for (let i = 0; i < tracks.length; i++) {
@@ -333,8 +342,9 @@ class Tech extends Component {
           track.addEventListener('cuechange', updateDisplay);
         }
       }
-    });
+    };
 
+    textTracksChanges();
     tracks.addEventListener('change', textTracksChanges);
 
     this.on('dispose', function() {
@@ -370,6 +380,17 @@ class Tech extends Component {
     return this.remoteTextTracks_;
   }
 
+  /**
+   * Get remote htmltrackelements
+   *
+   * @returns {HTMLTrackElementList}
+   * @method remoteTextTrackEls
+   */
+  remoteTextTrackEls() {
+    this.remoteTextTrackEls_ = this.remoteTextTrackEls_ || new HTMLTrackElementList();
+    return this.remoteTextTrackEls_;
+  }
+
   /**
    * Creates and returns a remote text track object
    *
@@ -389,19 +410,28 @@ class Tech extends Component {
   }
 
   /**
-   * Creates and returns a remote text track object
+   * Creates a remote text track object and returns a emulated html track element
    *
    * @param {Object} options The object should contain values for
    * kind, language, label and src (location of the WebVTT file)
-   * @return {TextTrackObject}
+   * @return {HTMLTrackElement}
    * @method addRemoteTextTrack
    */
   addRemoteTextTrack(options) {
-    let track = createTrackHelper(this, options.kind, options.label, options.language, options);
-    this.remoteTextTracks().addTrack_(track);
-    return {
-      track: track
-    };
+    let track = mergeOptions(options, {
+      tech: this
+    });
+
+    let htmlTrackElement = new HTMLTrackElement(track);
+
+    // store HTMLTrackElement and TextTrack to remote list
+    this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);
+    this.remoteTextTracks().addTrack_(htmlTrackElement.track);
+
+    // must come after remoteTextTracks()
+    this.textTracks().addTrack_(htmlTrackElement.track);
+
+    return htmlTrackElement;
   }
 
   /**
@@ -412,6 +442,11 @@ class Tech extends Component {
    */
   removeRemoteTextTrack(track) {
     this.textTracks().removeTrack_(track);
+
+    let trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track);
+
+    // remove HTMLTrackElement and TextTrack from remote list
+    this.remoteTextTrackEls().removeTrackElement_(trackElement);
     this.remoteTextTracks().removeTrack_(track);
   }
 
@@ -424,6 +459,71 @@ class Tech extends Component {
    */
   setPoster() {}
 
+  /*
+   * Check if the tech can support the given type
+   *
+   * The base tech does not support any type, but source handlers might
+   * overwrite this.
+   *
+   * @param  {String} type    The mimetype to check
+   * @return {String}         'probably', 'maybe', or '' (empty string)
+   */
+  canPlayType() {
+    return '';
+  }
+
+  /*
+   * Return whether the argument is a Tech or not.
+   * Can be passed either a Class like `Html5` or a instance like `player.tech_`
+   *
+   * @param {Object} component An item to check
+   * @return {Boolean}         Whether it is a tech or not
+   */
+  static isTech(component) {
+    return component.prototype instanceof Tech ||
+           component instanceof Tech ||
+           component === Tech;
+  }
+
+  /**
+   * Registers a Tech
+   *
+   * @param {String} name Name of the Tech to register
+   * @param {Object} tech The tech to register
+   * @static
+   * @method registerComponent
+   */
+  static registerTech(name, tech) {
+    if (!Tech.techs_) {
+      Tech.techs_ = {};
+    }
+
+    if (!Tech.isTech(tech)) {
+      throw new Error(`Tech ${name} must be a Tech`);
+    }
+
+    Tech.techs_[name] = tech;
+    return tech;
+  }
+
+  /**
+   * Gets a component by name
+   *
+   * @param {String} name Name of the component to get
+   * @return {Component}
+   * @static
+   * @method getComponent
+   */
+  static getTech(name) {
+    if (Tech.techs_ && Tech.techs_[name]) {
+      return Tech.techs_[name];
+    }
+
+    if (window && window.videojs && window.videojs[name]) {
+      log.warn(`The ${name} tech was added to the videojs object when it should be registered using videojs.registerTech(name, tech)`);
+      return window.videojs[name];
+    }
+  }
 }
 
 /*
@@ -498,6 +598,26 @@ Tech.withSourceHandlers = function(_Tech){
     handlers.splice(index, 0, handler);
   };
 
+  /*
+   * Check if the tech can support the given type
+   * @param  {String} type    The mimetype to check
+   * @return {String}         'probably', 'maybe', or '' (empty string)
+   */
+  _Tech.canPlayType = function(type){
+    let handlers = _Tech.sourceHandlers || [];
+    let can;
+
+    for (let i = 0; i < handlers.length; i++) {
+      can = handlers[i].canPlayType(type);
+
+      if (can) {
+        return can;
+      }
+    }
+
+    return '';
+  };
+
    /*
     * Return the first source handler that supports the source
     * TODO: Answer question: should 'probably' be prioritized over 'maybe'
@@ -535,16 +655,29 @@ Tech.withSourceHandlers = function(_Tech){
     return '';
   };
 
-  let originalSeekable = _Tech.prototype.seekable;
+  /*
+   * When using a source handler, prefer its implementation of
+   * any function normally provided by the tech.
+   */
+  let deferrable = [
+      'seekable',
+      'duration'
+    ];
 
-  // when a source handler is registered, prefer its implementation of
-  // seekable when present.
-  _Tech.prototype.seekable = function() {
-    if (this.sourceHandler_ && this.sourceHandler_.seekable) {
-      return this.sourceHandler_.seekable();
+  deferrable.forEach(function (fnName) {
+    let originalFn = this[fnName];
+
+    if (typeof originalFn !== 'function') {
+      return;
     }
-    return originalSeekable.call(this);
-  };
+
+    this[fnName] = function() {
+      if (this.sourceHandler_ && this.sourceHandler_[fnName]) {
+        return this.sourceHandler_[fnName].apply(this.sourceHandler_, arguments);
+      }
+      return originalFn.apply(this, arguments);
+    };
+  }, _Tech.prototype);
 
    /*
     * Create a function for setting the source using a source object
@@ -591,4 +724,5 @@ Tech.withSourceHandlers = function(_Tech){
 Component.registerComponent('Tech', Tech);
 // Old name for Tech
 Component.registerComponent('MediaTechController', Tech);
+Tech.registerTech('Tech', Tech);
 export default Tech;

src/js/tracks/html-track-element-list.js

@@ -0,0 +1,68 @@
+/**
+ * @file html-track-element-list.js
+ */
+
+import * as browser from '../utils/browser.js';
+import document from 'global/document';
+
+class HtmlTrackElementList {
+  constructor(trackElements = []) {
+    let list = this;
+
+    if (browser.IS_IE8) {
+      list = document.createElement('custom');
+
+      for (let prop in HtmlTrackElementList.prototype) {
+        if (prop !== 'constructor') {
+          list[prop] = HtmlTrackElementList.prototype[prop];
+        }
+      }
+    }
+
+    list.trackElements_ = [];
+
+    Object.defineProperty(list, 'length', {
+      get() {
+        return this.trackElements_.length;
+      }
+    });
+
+    for (let i = 0, length = trackElements.length; i < length; i++) {
+      list.addTrackElement_(trackElements[i]);
+    }
+
+    if (browser.IS_IE8) {
+      return list;
+    }
+  }
+
+  addTrackElement_(trackElement) {
+    this.trackElements_.push(trackElement);
+  }
+
+  getTrackElementByTrack_(track) {
+    let trackElement_;
+
+    for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+      if (track === this.trackElements_[i].track) {
+        trackElement_ = this.trackElements_[i];
+
+        break;
+      }
+    }
+
+    return trackElement_;
+  }
+
+  removeTrackElement_(trackElement) {
+    for (let i = 0, length = this.trackElements_.length; i < length; i++) {
+      if (trackElement === this.trackElements_[i]) {
+        this.trackElements_.splice(i, 1);
+
+        break;
+      }
+    }
+  }
+}
+
+export default HtmlTrackElementList;

src/js/tracks/html-track-element.js

@@ -0,0 +1,101 @@
+/**
+ * @file html-track-element.js
+ */
+
+import * as browser from '../utils/browser.js';
+import document from 'global/document';
+import EventTarget from '../event-target';
+import TextTrack from '../tracks/text-track';
+
+const NONE = 0;
+const LOADING = 1;
+const LOADED = 2;
+const ERROR = 3;
+
+/**
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement
+ *
+ * interface HTMLTrackElement : HTMLElement {
+ *   attribute DOMString kind;
+ *   attribute DOMString src;
+ *   attribute DOMString srclang;
+ *   attribute DOMString label;
+ *   attribute boolean default;
+ *
+ *   const unsigned short NONE = 0;
+ *   const unsigned short LOADING = 1;
+ *   const unsigned short LOADED = 2;
+ *   const unsigned short ERROR = 3;
+ *   readonly attribute unsigned short readyState;
+ *
+ *   readonly attribute TextTrack track;
+ * };
+ *
+ * @param {Object} options TextTrack configuration
+ * @class HTMLTrackElement
+ */
+
+class HTMLTrackElement extends EventTarget {
+  constructor(options = {}) {
+    super();
+
+    let readyState,
+        trackElement = this;
+
+    if (browser.IS_IE8) {
+      trackElement = document.createElement('custom');
+
+      for (let prop in HTMLTrackElement.prototype) {
+        if (prop !== 'constructor') {
+          trackElement[prop] = HTMLTrackElement.prototype[prop];
+        }
+      }
+    }
+
+    let track = new TextTrack(options);
+
+    trackElement.kind = track.kind;
+    trackElement.src = track.src;
+    trackElement.srclang = track.language;
+    trackElement.label = track.label;
+    trackElement.default = track.default;
+
+    Object.defineProperty(trackElement, 'readyState', {
+      get() {
+        return readyState;
+      }
+    });
+
+    Object.defineProperty(trackElement, 'track', {
+      get() {
+        return track;
+      }
+    });
+
+    readyState = NONE;
+
+    track.addEventListener('loadeddata', function() {
+      readyState = LOADED;
+
+      trackElement.trigger({
+        type: 'load',
+        target: trackElement
+      });
+    });
+
+    if (browser.IS_IE8) {
+      return trackElement;
+    }
+  }
+}
+
+HTMLTrackElement.prototype.allowedEvents_ = {
+  load: 'load'
+};
+
+HTMLTrackElement.NONE = NONE;
+HTMLTrackElement.LOADING = LOADING;
+HTMLTrackElement.LOADED = LOADED;
+HTMLTrackElement.ERROR = ERROR;
+
+export default HTMLTrackElement;