v5.6.0 dist

v5.6.0
@gkatsev updated to latest videojs-ie8 shim. closes #3042
2016-01-26 12:10:16 -05:00 · 2016-01-26 12:09:40 -05:00 · 2016-01-26 12:08:46 -05:00 · 2016-01-26 11:34:36 -05:00 · 2016-01-25 20:11:26 -05:00 · 2016-01-25 20:01:15 -05:00
@@ -6,6 +6,56 @@ _(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))

@@ -144,7 +144,7 @@ npm install
 Build a local copy of video.js and run tests

 ```bash
-grunt
+grunt dist
 grunt test
 ```

@@ -9,8 +9,8 @@ Thanks to the awesome folks over at [Fastly](http://www.fastly.com/), there's a
 `<head>`:

 ```html
-<link href="http://vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
-<script src="http://vjs.zencdn.net/5.0/video.min.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
@@ -20,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>
@@ -1,3 +1,4 @@
+import {gruntCustomizer, gruntOptionsMaker} from './options-customizer.js';
 module.exports = function(grunt) {
  require('time-grunt')(grunt);

@@ -41,6 +42,19 @@ module.exports = function(grunt) {
    ]
  };

+  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
@@ -52,11 +66,7 @@ module.exports = function(grunt) {
   * @param  {Mixed} sourceValue
   * @return {Object}
   */
-  function browserifyGruntCustomizer(objectValue, sourceValue) {
-    if (Array.isArray(objectValue)) {
-      return objectValue.concat(sourceValue);
-    }
-  }
+  const browserifyGruntCustomizer = gruntCustomizer;

  /**
   * Creates a unique object of Browserify Grunt task options.
@@ -70,9 +80,10 @@ module.exports = function(grunt) {
   *
   * @return {Object}
   */
-  function browserifyGruntOptions(options = null, customizer = browserifyGruntCustomizer) {
-    return _.merge({}, browserifyGruntDefaults, options, customizer);
-  }
+  const browserifyGruntOptions = gruntOptionsMaker(browserifyGruntDefaults, browserifyGruntCustomizer);
+
+  const githubReleaseCustomizer = gruntCustomizer;
+  const githubReleaseOptions = gruntOptionsMaker(githubReleaseDefaults, githubReleaseCustomizer);

  /**
   * Creates processor functions for license banners.
@@ -140,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'],
@@ -185,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'
        }
      }
    },
@@ -296,28 +307,14 @@ module.exports = function(grunt) {
          password: process.env.VJS_GITHUB_TOKEN
        }
      },
-      release: {
+      release: githubReleaseOptions(),
+      prerelease: githubReleaseOptions({
        options: {
          release: {
-            tag_name: 'v'+ version.full,
-            name: version.full,
-            body: require('chg').find(version.full).changesRaw
-          }
-        }
-      },
-      prerelease: {
-        options: {
-          release: {
-            tag_name: 'v'+ version.full,
-            name: version.full,
-            body: require('chg').find(version.full).changesRaw,
            prerelease: true
          }
        }
-      },
-      files: {
-        src: [`dist/video-js-${version.full}.zip`] // Files that you want to attach to Release
-      }
+      })
    },
    browserify: {
      options: browserifyGruntOptions(),
@@ -330,7 +327,7 @@ module.exports = function(grunt) {
        options: browserifyGruntOptions({
          transform: [
            ['browserify-versionify', {
-              placeholder: '../node_modules/vtt.js/dist/vtt.js',
+              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'
            }],
          ]
@@ -458,6 +455,7 @@ module.exports = function(grunt) {
    'uglify',

    'sass',
+    'wrapcodepoints',
    'version:css',
    'cssmin',

@@ -482,6 +480,17 @@ module.exports = function(grunt) {
    'zip:dist'
  ]);

+  // Sass turns unicode codepoints into utf8 characters.
+  // We don't want that so we unwrapped them in the templates/scss.hbs file.
+  // After sass has generated our css file, we need to wrap the codepoints
+  // in quotes for it to work.
+  grunt.registerTask('wrapcodepoints', function() {
+    const sassConfig = grunt.config.get('sass.build.files');
+    const cssPath = Object.keys(sassConfig)[0];
+    const css = grunt.file.read(cssPath);
+    grunt.file.write(cssPath, css.replace(/(\\f\w+);/g, "'$1';"));
+  });
+
  // Default task - build and test
  grunt.registerTask('default', ['test']);

@@ -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 };
@@ -1,7 +1,7 @@
 {
  "name": "video.js",
  "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.4.2",
+  "version": "5.6.0",
  "keywords": [
    "videojs",
    "html5",
@@ -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>
@@ -26,7 +26,7 @@ if (typeof window.HTMLVideoElement === 'undefined') {
 ;

 // UMD (Universal Module Definition)
-// see https://github.com/umdjs/umd/blob/master/returnExports.js
+// see https://github.com/umdjs/umd/blob/master/templates/returnExports.js
 (function (root, factory) {
    'use strict';

@@ -72,6 +72,7 @@ var array_push = ArrayPrototype.push;
 var array_unshift = ArrayPrototype.unshift;
 var array_concat = ArrayPrototype.concat;
 var call = FunctionPrototype.call;
+var apply = FunctionPrototype.apply;
 var max = Math.max;
 var min = Math.min;

@@ -84,19 +85,18 @@ var isRegex; /* inlined from https://npmjs.com/is-regex */ var regexExec = RegEx
 var isString; /* inlined from https://npmjs.com/is-string */ var strValue = String.prototype.valueOf, tryStringObject = function tryStringObject(value) { try { strValue.call(value); return true; } catch (e) { return false; } }, stringClass = '[object String]'; isString = function isString(value) { if (typeof value === 'string') { return true; } if (typeof value !== 'object') { return false; } return hasToStringTag ? tryStringObject(value) : to_string.call(value) === stringClass; };

 /* inlined from http://npmjs.com/define-properties */
+var supportsDescriptors = $Object.defineProperty && (function () {
+    try {
+        var obj = {};
+        $Object.defineProperty(obj, 'x', { enumerable: false, value: obj });
+        for (var _ in obj) { return false; }
+        return obj.x === obj;
+    } catch (e) { /* this is ES3 */
+        return false;
+    }
+}());
 var defineProperties = (function (has) {
-  var supportsDescriptors = $Object.defineProperty && (function () {
-      try {
-          var obj = {};
-          $Object.defineProperty(obj, 'x', { enumerable: false, value: obj });
-          for (var _ in obj) { return false; }
-          return obj.x === obj;
-      } catch (e) { /* this is ES3 */
-          return false;
-      }
-  }());
-
-  // Define configurable, writable and non-enumerable props
+  // Define configurable, writable, and non-enumerable props
  // if they don't exist.
  var defineProperty;
  if (supportsDescriptors) {
@@ -179,7 +179,6 @@ var ES = {
    // http://es5.github.com/#x9.9
    /* replaceable with https://npmjs.com/package/es-abstract ES5.ToObject */
    ToObject: function (o) {
-        /* jshint eqnull: true */
        if (o == null) { // this matches both null and undefined
            throw new TypeError("can't convert " + o + ' to object');
        }
@@ -337,13 +336,17 @@ defineProperties(FunctionPrototype, {
 });

 // _Please note: Shortcuts are defined after `Function.prototype.bind` as we
-// us it in defining shortcuts.
+// use it in defining shortcuts.
 var owns = call.bind(ObjectPrototype.hasOwnProperty);
 var toStr = call.bind(ObjectPrototype.toString);
+var arraySlice = call.bind(array_slice);
+var arraySliceApply = apply.bind(array_slice);
 var strSlice = call.bind(StringPrototype.slice);
 var strSplit = call.bind(StringPrototype.split);
 var strIndexOf = call.bind(StringPrototype.indexOf);
-var push = call.bind(array_push);
+var pushCall = call.bind(array_push);
+var isEnum = call.bind(ObjectPrototype.propertyIsEnumerable);
+var arraySort = call.bind(ArrayPrototype.sort);

 //
 // Array
@@ -397,18 +400,23 @@ var properlyBoxesContext = function properlyBoxed(method) {
    // Check node 0.6.21 bug where third parameter is not boxed
    var properlyBoxesNonStrict = true;
    var properlyBoxesStrict = true;
+    var threwException = false;
    if (method) {
-        method.call('foo', function (_, __, context) {
-            if (typeof context !== 'object') { properlyBoxesNonStrict = false; }
-        });
+        try {
+            method.call('foo', function (_, __, context) {
+                if (typeof context !== 'object') { properlyBoxesNonStrict = false; }
+            });

-        method.call([1], function () {
-            'use strict';
+            method.call([1], function () {
+                'use strict';

-            properlyBoxesStrict = typeof this === 'string';
-        }, 'x');
+                properlyBoxesStrict = typeof this === 'string';
+            }, 'x');
+        } catch (e) {
+            threwException = true;
+        }
    }
-    return !!method && properlyBoxesNonStrict && properlyBoxesStrict;
+    return !!method && !threwException && properlyBoxesNonStrict && properlyBoxesStrict;
 };

 defineProperties(ArrayPrototype, {
@@ -497,7 +505,7 @@ defineProperties(ArrayPrototype, {
            if (i in self) {
                value = self[i];
                if (typeof T === 'undefined' ? callbackfn(value, i, object) : callbackfn.call(T, value, i, object)) {
-                    push(result, value);
+                    pushCall(result, value);
                }
            }
        }
@@ -750,9 +758,9 @@ defineProperties(ArrayPrototype, {
        var args = arguments;
        this.length = max(ES.ToInteger(this.length), 0);
        if (arguments.length > 0 && typeof deleteCount !== 'number') {
-            args = array_slice.call(arguments);
+            args = arraySlice(arguments);
            if (args.length < 2) {
-                push(args, this.length - start);
+                pushCall(args, this.length - start);
            } else {
                args[1] = ES.ToInteger(deleteCount);
            }
@@ -799,7 +807,7 @@ defineProperties(ArrayPrototype, {
            k += 1;
        }

-        var items = array_slice.call(arguments, 2);
+        var items = arraySlice(arguments, 2);
        var itemCount = items.length;
        var to;
        if (itemCount < actualDeleteCount) {
@@ -843,13 +851,31 @@ defineProperties(ArrayPrototype, {
    }
 }, !spliceWorksWithLargeSparseArrays || !spliceWorksWithSmallSparseArrays);

-var hasJoinUndefinedBug = [1, 2].join(undefined) !== '1,2';
 var originalJoin = ArrayPrototype.join;
-defineProperties(ArrayPrototype, {
-    join: function join(separator) {
-        return originalJoin.call(this, typeof separator === 'undefined' ? ',' : separator);
-    }
-}, hasJoinUndefinedBug);
+var hasStringJoinBug;
+try {
+    hasStringJoinBug = Array.prototype.join.call('123', ',') !== '1,2,3';
+} catch (e) {
+    hasStringJoinBug = true;
+}
+if (hasStringJoinBug) {
+    defineProperties(ArrayPrototype, {
+        join: function join(separator) {
+            var sep = typeof separator === 'undefined' ? ',' : separator;
+            return originalJoin.call(isString(this) ? strSplit(this, '') : this, sep);
+        }
+    }, hasStringJoinBug);
+}
+
+var hasJoinUndefinedBug = [1, 2].join(undefined) !== '1,2';
+if (hasJoinUndefinedBug) {
+    defineProperties(ArrayPrototype, {
+        join: function join(separator) {
+            var sep = typeof separator === 'undefined' ? ',' : separator;
+            return originalJoin.call(this, sep);
+        }
+    }, hasJoinUndefinedBug);
+}

 var pushShim = function push(item) {
    var O = ES.ToObject(this);
@@ -885,6 +911,52 @@ var pushUndefinedIsWeird = (function () {
 }());
 defineProperties(ArrayPrototype, { push: pushShim }, pushUndefinedIsWeird);

+// ES5 15.2.3.14
+// http://es5.github.io/#x15.4.4.10
+// Fix boxed string bug
+defineProperties(ArrayPrototype, {
+    slice: function (start, end) {
+        var arr = isString(this) ? strSplit(this, '') : this;
+        return arraySliceApply(arr, arguments);
+    }
+}, splitString);
+
+var sortIgnoresNonFunctions = (function () {
+    try {
+        [1, 2].sort(null);
+        [1, 2].sort({});
+        return true;
+    } catch (e) { /**/ }
+    return false;
+}());
+var sortThrowsOnRegex = (function () {
+    // this is a problem in Firefox 4, in which `typeof /a/ === 'function'`
+    try {
+        [1, 2].sort(/a/);
+        return false;
+    } catch (e) { /**/ }
+    return true;
+}());
+var sortIgnoresUndefined = (function () {
+    // applies in IE 8, for one.
+    try {
+        [1, 2].sort(undefined);
+        return true;
+    } catch (e) { /**/ }
+    return false;
+}());
+defineProperties(ArrayPrototype, {
+    sort: function sort(compareFn) {
+        if (typeof compareFn === 'undefined') {
+            return arraySort(this);
+        }
+        if (!isCallable(compareFn)) {
+            throw new TypeError('Array.prototype.sort callback must be a function');
+        }
+        return arraySort(this, compareFn);
+    }
+}, sortIgnoresNonFunctions || !sortIgnoresUndefined || !sortThrowsOnRegex);
+
 //
 // Object
 // ======
@@ -910,7 +982,8 @@ var blacklistedKeys = {
    $frames: true,
    $frameElement: true,
    $webkitIndexedDB: true,
-    $webkitStorageInfo: true
+    $webkitStorageInfo: true,
+    $external: true
 };
 var hasAutomationEqualityBug = (function () {
    /* globals window */
@@ -975,14 +1048,14 @@ defineProperties($Object, {
        var skipProto = hasProtoEnumBug && isFn;
        if ((isStr && hasStringEnumBug) || isArgs) {
            for (var i = 0; i < object.length; ++i) {
-                push(theKeys, $String(i));
+                pushCall(theKeys, $String(i));
            }
        }

        if (!isArgs) {
            for (var name in object) {
                if (!(skipProto && name === 'prototype') && owns(object, name)) {
-                    push(theKeys, $String(name));
+                    pushCall(theKeys, $String(name));
                }
            }
        }
@@ -992,7 +1065,7 @@ defineProperties($Object, {
            for (var j = 0; j < dontEnumsLength; j++) {
                var dontEnum = dontEnums[j];
                if (!(skipConstructor && dontEnum === 'constructor') && owns(object, dontEnum)) {
-                    push(theKeys, dontEnum);
+                    pushCall(theKeys, dontEnum);
                }
            }
        }
@@ -1012,7 +1085,7 @@ var originalKeys = $Object.keys;
 defineProperties($Object, {
    keys: function keys(object) {
        if (isArguments(object)) {
-            return originalKeys(array_slice.call(object));
+            return originalKeys(arraySlice(object));
        } else {
            return originalKeys(object);
        }
@@ -1024,6 +1097,190 @@ defineProperties($Object, {
 // ====
 //

+var hasNegativeMonthYearBug = new Date(-3509827329600292).getUTCMonth() !== 0;
+var aNegativeTestDate = new Date(-1509842289600292);
+var aPositiveTestDate = new Date(1449662400000);
+var hasToUTCStringFormatBug = aNegativeTestDate.toUTCString() !== 'Mon, 01 Jan -45875 11:59:59 GMT';
+var hasToDateStringFormatBug;
+var hasToStringFormatBug;
+var timeZoneOffset = aNegativeTestDate.getTimezoneOffset();
+if (timeZoneOffset < -720) {
+    hasToDateStringFormatBug = aNegativeTestDate.toDateString() !== 'Tue Jan 02 -45875';
+    hasToStringFormatBug = !(/^Thu Dec 10 2015 \d\d:\d\d:\d\d GMT[-\+]\d\d\d\d(?: |$)/).test(aPositiveTestDate.toString());
+} else {
+    hasToDateStringFormatBug = aNegativeTestDate.toDateString() !== 'Mon Jan 01 -45875';
+    hasToStringFormatBug = !(/^Wed Dec 09 2015 \d\d:\d\d:\d\d GMT[-\+]\d\d\d\d(?: |$)/).test(aPositiveTestDate.toString());
+}
+
+var originalGetFullYear = call.bind(Date.prototype.getFullYear);
+var originalGetMonth = call.bind(Date.prototype.getMonth);
+var originalGetDate = call.bind(Date.prototype.getDate);
+var originalGetUTCFullYear = call.bind(Date.prototype.getUTCFullYear);
+var originalGetUTCMonth = call.bind(Date.prototype.getUTCMonth);
+var originalGetUTCDate = call.bind(Date.prototype.getUTCDate);
+var originalGetUTCDay = call.bind(Date.prototype.getUTCDay);
+var originalGetUTCHours = call.bind(Date.prototype.getUTCHours);
+var originalGetUTCMinutes = call.bind(Date.prototype.getUTCMinutes);
+var originalGetUTCSeconds = call.bind(Date.prototype.getUTCSeconds);
+var originalGetUTCMilliseconds = call.bind(Date.prototype.getUTCMilliseconds);
+var dayName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+var monthName = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+var daysInMonth = function daysInMonth(month, year) {
+    return originalGetDate(new Date(year, month, 0));
+};
+
+defineProperties(Date.prototype, {
+    getFullYear: function getFullYear() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var year = originalGetFullYear(this);
+        if (year < 0 && originalGetMonth(this) > 11) {
+            return year + 1;
+        }
+        return year;
+    },
+    getMonth: function getMonth() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var year = originalGetFullYear(this);
+        var month = originalGetMonth(this);
+        if (year < 0 && month > 11) {
+            return 0;
+        }
+        return month;
+    },
+    getDate: function getDate() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var year = originalGetFullYear(this);
+        var month = originalGetMonth(this);
+        var date = originalGetDate(this);
+        if (year < 0 && month > 11) {
+            if (month === 12) {
+                return date;
+            }
+            var days = daysInMonth(0, year + 1);
+            return (days - date) + 1;
+        }
+        return date;
+    },
+    getUTCFullYear: function getUTCFullYear() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var year = originalGetUTCFullYear(this);
+        if (year < 0 && originalGetUTCMonth(this) > 11) {
+            return year + 1;
+        }
+        return year;
+    },
+    getUTCMonth: function getUTCMonth() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var year = originalGetUTCFullYear(this);
+        var month = originalGetUTCMonth(this);
+        if (year < 0 && month > 11) {
+            return 0;
+        }
+        return month;
+    },
+    getUTCDate: function getUTCDate() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var year = originalGetUTCFullYear(this);
+        var month = originalGetUTCMonth(this);
+        var date = originalGetUTCDate(this);
+        if (year < 0 && month > 11) {
+            if (month === 12) {
+                return date;
+            }
+            var days = daysInMonth(0, year + 1);
+            return (days - date) + 1;
+        }
+        return date;
+    }
+}, hasNegativeMonthYearBug);
+
+defineProperties(Date.prototype, {
+    toUTCString: function toUTCString() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var day = originalGetUTCDay(this);
+        var date = originalGetUTCDate(this);
+        var month = originalGetUTCMonth(this);
+        var year = originalGetUTCFullYear(this);
+        var hour = originalGetUTCHours(this);
+        var minute = originalGetUTCMinutes(this);
+        var second = originalGetUTCSeconds(this);
+        return dayName[day] + ', ' +
+            (date < 10 ? '0' + date : date) + ' ' +
+            monthName[month] + ' ' +
+            year + ' ' +
+            (hour < 10 ? '0' + hour : hour) + ':' +
+            (minute < 10 ? '0' + minute : minute) + ':' +
+            (second < 10 ? '0' + second : second) + ' GMT';
+    }
+}, hasNegativeMonthYearBug || hasToUTCStringFormatBug);
+
+// Opera 12 has `,`
+defineProperties(Date.prototype, {
+    toDateString: function toDateString() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var day = this.getDay();
+        var date = this.getDate();
+        var month = this.getMonth();
+        var year = this.getFullYear();
+        return dayName[day] + ' ' +
+            monthName[month] + ' ' +
+            (date < 10 ? '0' + date : date) + ' ' +
+            year;
+    }
+}, hasNegativeMonthYearBug || hasToDateStringFormatBug);
+
+// can't use defineProperties here because of toString enumeration issue in IE <= 8
+if (hasNegativeMonthYearBug || hasToStringFormatBug) {
+    Date.prototype.toString = function toString() {
+        if (!this || !(this instanceof Date)) {
+            throw new TypeError('this is not a Date object.');
+        }
+        var day = this.getDay();
+        var date = this.getDate();
+        var month = this.getMonth();
+        var year = this.getFullYear();
+        var hour = this.getHours();
+        var minute = this.getMinutes();
+        var second = this.getSeconds();
+        var timezoneOffset = this.getTimezoneOffset();
+        var hoursOffset = Math.floor(Math.abs(timezoneOffset) / 60);
+        var minutesOffset = Math.floor(Math.abs(timezoneOffset) % 60);
+        return dayName[day] + ' ' +
+            monthName[month] + ' ' +
+            (date < 10 ? '0' + date : date) + ' ' +
+            year + ' ' +
+            (hour < 10 ? '0' + hour : hour) + ':' +
+            (minute < 10 ? '0' + minute : minute) + ':' +
+            (second < 10 ? '0' + second : second) + ' GMT' +
+            (timezoneOffset > 0 ? '-' : '+') +
+            (hoursOffset < 10 ? '0' + hoursOffset : hoursOffset) +
+            (minutesOffset < 10 ? '0' + minutesOffset : minutesOffset);
+    };
+    if (supportsDescriptors) {
+        $Object.defineProperty(Date.prototype, 'toString', {
+            configurable: true,
+            enumerable: false,
+            writable: true
+        });
+    }
+}
+
 // ES5 15.9.5.43
 // http://es5.github.com/#x15.9.5.43
 // This function returns a String value represent the instance in time
@@ -1038,39 +1295,33 @@ var hasSafari51DateBug = Date.prototype.toISOString && new Date(-1).toISOString(

 defineProperties(Date.prototype, {
    toISOString: function toISOString() {
-        var result, length, value, year, month;
        if (!isFinite(this)) {
            throw new RangeError('Date.prototype.toISOString called on non-finite value.');
        }

-        year = this.getUTCFullYear();
+        var year = originalGetUTCFullYear(this);

-        month = this.getUTCMonth();
+        var month = originalGetUTCMonth(this);
        // see https://github.com/es-shims/es5-shim/issues/111
        year += Math.floor(month / 12);
        month = (month % 12 + 12) % 12;

        // the date time string format is specified in 15.9.1.15.
-        result = [month + 1, this.getUTCDate(), this.getUTCHours(), this.getUTCMinutes(), this.getUTCSeconds()];
+        var result = [month + 1, originalGetUTCDate(this), originalGetUTCHours(this), originalGetUTCMinutes(this), originalGetUTCSeconds(this)];
        year = (
            (year < 0 ? '-' : (year > 9999 ? '+' : '')) +
            strSlice('00000' + Math.abs(year), (0 <= year && year <= 9999) ? -4 : -6)
        );

-        length = result.length;
-        while (length--) {
-            value = result[length];
-            // pad months, days, hours, minutes, and seconds to have two
-            // digits.
-            if (value < 10) {
-                result[length] = '0' + value;
-            }
+        for (var i = 0; i < result.length; ++i) {
+          // pad months, days, hours, minutes, and seconds to have two digits.
+          result[i] = strSlice('00' + result[i], -2);
        }
        // pad milliseconds to have three digits.
        return (
-            year + '-' + array_slice.call(result, 0, 2).join('-') +
-            'T' + array_slice.call(result, 2).join(':') + '.' +
-            strSlice('000' + this.getUTCMilliseconds(), -3) + 'Z'
+            year + '-' + arraySlice(result, 0, 2).join('-') +
+            'T' + arraySlice(result, 2).join(':') + '.' +
+            strSlice('000' + originalGetUTCMilliseconds(this), -3) + 'Z'
        );
    }
 }, hasNegativeDateBug || hasSafari51DateBug);
@@ -1140,7 +1391,6 @@ if (doesNotParseY2KNewYear || acceptsInvalidDates || !supportsExtendedYears) {
    /* global Date: true */
    /* eslint-disable no-undef */
    var maxSafeUnsigned32Bit = Math.pow(2, 31) - 1;
-    var secondsWithinMaxSafeUnsigned32Bit = Math.floor(maxSafeUnsigned32Bit / 1e3);
    var hasSafariSignedIntBug = isActualNaN(new Date(1970, 0, 1, 0, 0, 0, maxSafeUnsigned32Bit + 1).getTime());
    Date = (function (NativeDate) {
    /* eslint-enable no-undef */
@@ -1513,7 +1763,7 @@ if (
        var maxSafe32BitInt = Math.pow(2, 32) - 1;

        StringPrototype.split = function (separator, limit) {
-            var string = this;
+            var string = String(this);
            if (typeof separator === 'undefined' && limit === 0) {
                return [];
            }
@@ -1532,7 +1782,6 @@ if (
                // Make `global` and avoid `lastIndex` issues by working with a copy
                separator2, match, lastIndex, lastLength;
            var separatorCopy = new RegExp(separator.source, flags + 'g');
-            string += ''; // Type-convert
            if (!compliantExecNpcg) {
                // Doesn't need flags gy, but they don't hurt
                separator2 = new RegExp('^' + separatorCopy.source + '$(?!\\s)', flags);
@@ -1550,7 +1799,7 @@ if (
                // `separatorCopy.lastIndex` is not reliable cross-browser
                lastIndex = match.index + match[0].length;
                if (lastIndex > lastLastIndex) {
-                    push(output, strSlice(string, lastLastIndex, match.index));
+                    pushCall(output, strSlice(string, lastLastIndex, match.index));
                    // Fix browsers whose `exec` methods don't consistently return `undefined` for
                    // nonparticipating capturing groups
                    if (!compliantExecNpcg && match.length > 1) {
@@ -1565,7 +1814,7 @@ if (
                        /* eslint-enable no-loop-func */
                    }
                    if (match.length > 1 && match.index < string.length) {
-                        array_push.apply(output, array_slice.call(match, 1));
+                        array_push.apply(output, arraySlice(match, 1));
                    }
                    lastLength = match[0].length;
                    lastLastIndex = lastIndex;
@@ -1580,10 +1829,10 @@ if (
            }
            if (lastLastIndex === string.length) {
                if (lastLength || !separatorCopy.test('')) {
-                    push(output, '');
+                    pushCall(output, '');
                }
            } else {
-                push(output, strSlice(string, lastLastIndex));
+                pushCall(output, strSlice(string, lastLastIndex));
            }
            return output.length > splitLimit ? strSlice(output, 0, splitLimit) : output;
        };
@@ -1606,7 +1855,7 @@ var str_replace = StringPrototype.replace;
 var replaceReportsGroupsCorrectly = (function () {
    var groups = [];
    'x'.replace(/x(.)?/g, function (match, group) {
-        push(groups, group);
+        pushCall(groups, group);
    });
    return groups.length === 1 && typeof groups[0] === 'undefined';
 }());
@@ -1624,7 +1873,7 @@ if (!replaceReportsGroupsCorrectly) {
                searchValue.lastIndex = 0;
                var args = searchValue.exec(match) || [];
                searchValue.lastIndex = originalLastIndex;
-                push(args, arguments[length - 2], arguments[length - 1]);
+                pushCall(args, arguments[length - 2], arguments[length - 1]);
                return replaceValue.apply(this, args);
            };
            return str_replace.call(this, searchValue, wrappedReplaceValue);
@@ -1669,6 +1918,7 @@ defineProperties(StringPrototype, {
        return $String(this).replace(trimBeginRegexp, '').replace(trimEndRegexp, '');
    }
 }, hasTrimWhitespaceBug);
+var trim = call.bind(String.prototype.trim);

 var hasLastIndexBug = StringPrototype.lastIndexOf && 'abcあい'.lastIndexOf('あい', 2) !== -1;
 defineProperties(StringPrototype, {
@@ -1709,15 +1959,26 @@ if (parseInt(ws + '08') !== 8 || parseInt(ws + '0x16') !== 22) {
    parseInt = (function (origParseInt) {
        var hexRegex = /^[\-+]?0[xX]/;
        return function parseInt(str, radix) {
-            var string = $String(str).trim();
+            var string = trim(str);
            var defaultedRadix = $Number(radix) || (hexRegex.test(string) ? 16 : 10);
            return origParseInt(string, defaultedRadix);
        };
    }(parseInt));
 }

+// https://es5.github.io/#x15.1.2.3
+if (1 / parseFloat('-0') !== -Infinity) {
+    /* global parseFloat: true */
+    parseFloat = (function (origParseFloat) {
+        return function parseFloat(string) {
+            var inputString = trim(string);
+            var result = origParseFloat(inputString);
+            return result === 0 && strSlice(inputString, 0, 1) === '-' ? -0 : result;
+        };
+    }(parseFloat));
+}
+
 if (String(new RangeError('test')) !== 'RangeError: test') {
-    var originalErrorToString = Error.prototype.toString;
    var errorToStringShim = function toString() {
        if (typeof this === 'undefined' || this === null) {
            throw new TypeError("can't convert " + this + ' to object');
@@ -1746,6 +2007,39 @@ if (String(new RangeError('test')) !== 'RangeError: test') {
    Error.prototype.toString = errorToStringShim;
 }

+if (supportsDescriptors) {
+    var ensureNonEnumerable = function (obj, prop) {
+        if (isEnum(obj, prop)) {
+            var desc = Object.getOwnPropertyDescriptor(obj, prop);
+            desc.enumerable = false;
+            Object.defineProperty(obj, prop, desc);
+        }
+    };
+    ensureNonEnumerable(Error.prototype, 'message');
+    if (Error.prototype.message !== '') {
+      Error.prototype.message = '';
+    }
+    ensureNonEnumerable(Error.prototype, 'name');
+}
+
+if (String(/a/mig) !== '/a/gim') {
+    var regexToString = function toString() {
+        var str = '/' + this.source + '/';
+        if (this.global) {
+            str += 'g';
+        }
+        if (this.ignoreCase) {
+            str += 'i';
+        }
+        if (this.multiline) {
+            str += 'm';
+        }
+        return str;
+    };
+    // can't use defineProperties here because of toString enumeration issue in IE <= 8
+    RegExp.prototype.toString = regexToString;
+}
+
 }));

 /*!
@@ -1760,7 +2054,7 @@ if (String(new RangeError('test')) !== 'RangeError: test') {
 ;

 // UMD (Universal Module Definition)
-// see https://github.com/umdjs/umd/blob/master/returnExports.js
+// see https://github.com/umdjs/umd/blob/master/templates/returnExports.js
 (function (root, factory) {
    'use strict';

@@ -1779,10 +2073,10 @@ if (String(new RangeError('test')) !== 'RangeError: test') {
  }
 }(this, function () {

-var call = Function.prototype.call;
+var call = Function.call;
 var prototypeOfObject = Object.prototype;
 var owns = call.bind(prototypeOfObject.hasOwnProperty);
-var propertyIsEnumerable = call.bind(prototypeOfObject.propertyIsEnumerable);
+var isEnumerable = call.bind(prototypeOfObject.propertyIsEnumerable);
 var toStr = call.bind(prototypeOfObject.toString);

 // If JS engine supports accessors creating shortcuts.
@@ -1881,7 +2175,7 @@ if (!Object.getOwnPropertyDescriptor || getOwnPropertyDescriptorFallback) {
        // If object has a property then it's for sure `configurable`, and
        // probably `enumerable`. Detect enumerability though.
        descriptor = {
-            enumerable: propertyIsEnumerable(object, property),
+            enumerable: isEnumerable(object, property),
            configurable: true
        };

@@ -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."
+});
@@ -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."
+});
@@ -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>
@@ -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;

@@ -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>
@@ -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.
@@ -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.
@@ -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:
@@ -14,10 +14,12 @@ You can download the Video.js source and host it on your own servers, or use the

 ### 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>
 ```
@@ -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

@@ -23,9 +23,9 @@ Once you have your WebVTT file created, you can add it to Video.js using the tra
 <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' />
+ <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>
@@ -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."
+}
@@ -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."
+}
@@ -1,7 +1,7 @@
 {
  "name": "video.js",
  "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.4.2",
+  "version": "5.6.0",
  "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
  "license": "Apache-2.0",
  "keywords": [
@@ -28,10 +28,10 @@
    "object.assign": "^4.0.1",
    "safe-json-parse": "^4.0.0",
    "tsml": "1.0.1",
-    "videojs-font": "1.4.0",
-    "videojs-ie8": "1.1.1",
+    "videojs-font": "1.5.1",
+    "videojs-ie8": "1.1.2",
    "videojs-swf": "5.0.1",
-    "vtt.js": "git+https://github.com/gkatsev/vtt.js.git#vjs-v0.12.1",
+    "videojs-vtt.js": "^0.12.1",
    "xhr": "~2.2.0"
  },
  "devDependencies": {
@@ -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>
@@ -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>

@@ -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;
@@ -1 +1,2 @@
 $icon-font-path: 'font' !default;
+$icon-codepoints: false !default;
@@ -102,7 +102,7 @@

 .video-js .vjs-load-progress {
  // For IE8 we'll lighten the color
-  background: ligthen($secondary-background-color, 25%);
+  background: lighten($secondary-background-color, 25%);
  // Otherwise we'll rely on stacked opacities
  background: rgba($secondary-background-color, $secondary-background-transparency);
 }
@@ -111,7 +111,7 @@
 // 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%);
+  background: lighten($secondary-background-color, 50%);
  // Otherwise we'll rely on stacked opacities
  background: rgba($secondary-background-color, 0.75);
 }
@@ -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 {
@@ -112,12 +113,16 @@
 }

 .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;
@@ -30,7 +30,7 @@
  width: auto;

  position: absolute;
-  left: 2.2222222em;
+  left: 4em;
  top: 0;

  padding: 0;
@@ -2,7 +2,11 @@
@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";
@@ -0,0 +1,3 @@
+$icon-codepoints: true;
+
+@import "video-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;
@@ -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;
@@ -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
    });
  }
 }
@@ -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 */
@@ -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();
  }

 }
@@ -25,6 +25,9 @@ class OffTextTrackMenuItem extends TextTrackMenuItem {
      'mode': 'disabled'
    };

+    // MenuItem is selectable
+    options['selectable'] = true;
+
    super(player, options);
    this.selected(true);
  }
@@ -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
        }));
      }
@@ -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;
@@ -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);
  }

@@ -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;
@@ -52,6 +52,7 @@ class ErrorDisplay extends ModalDialog {

 ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
  fillAlways: true,
+  temporary: false,
  uncloseable: true
 });

@@ -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
  }
 }

@@ -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);
@@ -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);
@@ -224,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_);
    }

@@ -269,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';

@@ -720,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();
    }
@@ -1979,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
@@ -1996,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
@@ -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;
@@ -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;
@@ -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);
@@ -326,7 +326,7 @@ class Tech extends Component {

    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';
+      script.src = this.options_['vtt.js'] || '../node_modules/videojs-vtt.js/dist/vtt.js';
      this.el().parentNode.appendChild(script);
      window['WebVTT'] = true;
    }
@@ -1,5 +1,5 @@
 /**
- * @file html-track-element.js
+ * @file html-track-element-list.js
 */

 import * as browser from '../utils/browser.js';
@@ -1,3 +1,7 @@
+/**
+ * @file html-track-element.js
+ */
+
 import * as browser from '../utils/browser.js';
 import document from 'global/document';
 import EventTarget from '../event-target';
@@ -79,8 +79,9 @@ export function getEl(id){
 /**
 * Creates an element and applies properties.
 *
- * @param  {String=} tagName    Name of tag to be created.
- * @param  {Object=} properties Element properties to be applied.
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
 * @return {Element}
 * @function createEl
 */
@@ -52,8 +52,8 @@ if (typeof HTMLVideoElement === 'undefined') {
 * @mixes videojs
 * @method videojs
 */
-var videojs = function(id, options, ready){
-  var tag; // Element of ID
+let videojs = function(id, options, ready){
+  let tag; // Element of ID

  // Allow for element or ID to be passed in
  // String ID
@@ -95,7 +95,7 @@ var videojs = function(id, options, ready){

  // Element may have a player attr referring to an already created player instance.
  // If not, set up a new player and return the instance.
-  return tag['player'] || new Player(tag, options, ready);
+  return tag['player'] || Player.players[tag.playerId] || new Player(tag, options, ready);
 };

 // Add default styles
@@ -563,6 +563,17 @@ videojs.isEl = Dom.isEl;
 */
 videojs.isTextNode = Dom.isTextNode;

+/**
+ * Creates an element and applies properties.
+ *
+ * @method createEl
+ * @param  {String} [tagName='div'] Name of tag to be created.
+ * @param  {Object} [properties={}] Element properties to be applied.
+ * @param  {Object} [attributes={}] Element attributes to be applied.
+ * @return {Element}
+ */
+videojs.createEl = Dom.createEl;
+
 /**
 * Check if an element has a CSS class
 *
@@ -4,7 +4,7 @@ import TestHelpers from './test-helpers.js';
 q.module('Button');

 test('should localize its text', function(){
-  expect(1);
+  expect(2);

  var player, testButton, el;

@@ -21,5 +21,6 @@ test('should localize its text', function(){
  testButton.controlText_ = 'Play';
  el = testButton.createEl();

+  ok(el.nodeName.toLowerCase().match('button'));
  ok(el.innerHTML.match('Juego'));
 });
@@ -0,0 +1,19 @@
+import ClickableComponent from '../../src/js/clickable-component.js';
+import TestHelpers from './test-helpers.js';
+
+q.module('ClickableComponent');
+
+test('should create a div with role="button"', function(){
+  expect(2);
+
+  var player, testClickableComponent, el;
+
+  player = TestHelpers.makePlayer({
+  });
+
+  testClickableComponent = new ClickableComponent(player);
+  el = testClickableComponent.createEl();
+
+  equal(el.nodeName.toLowerCase(), 'div', 'the name of the element is "div"');
+  equal(el.getAttribute('role').toLowerCase(), 'button', 'the role of the element is "button"');
+});
@@ -30,6 +30,15 @@ test('should create player instance that inherits from component and dispose it'
  ok(player.el() === null, 'element disposed');
 });

+test('dispose should not throw if styleEl is missing', function(){
+  var player = TestHelpers.makePlayer();
+
+  player.styleEl_.parentNode.removeChild(player.styleEl_);
+
+  player.dispose();
+  ok(player.el() === null, 'element disposed');
+});
+
 // technically, all uses of videojs.options should be replaced with
 // Player.prototype.options_ in this file and a equivalent test using
 // videojs.options should be made in video.test.js. Keeping this here
@@ -30,6 +30,50 @@ test('should return a video player instance', function(){
  var playerAgain = videojs('test_vid_id');
  ok(player === playerAgain, 'did not create a second player from same tag');

+  equal(player, playerAgain, 'we did not make a new player');
+
+  var tag2 = document.getElementById('test_vid_id2');
+  var player2 = videojs(tag2, { techOrder: ['techFaker'] });
+  ok(player2.id() === 'test_vid_id2', 'created player from element');
+});
+
+test('should return a video player instance from el html5 tech', function() {
+  var fixture = document.getElementById('qunit-fixture');
+  fixture.innerHTML += '<video id="test_vid_id"></video><video id="test_vid_id2"></video>';
+
+  var vid = document.querySelector('#test_vid_id');
+
+  var player = videojs(vid);
+  ok(player, 'created player from tag');
+  ok(player.id() === 'test_vid_id');
+  ok(videojs.getPlayers()['test_vid_id'] === player, 'added player to global reference');
+
+  var playerAgain = videojs(vid);
+  ok(player === playerAgain, 'did not create a second player from same tag');
+
+  equal(player, playerAgain, 'we did not make a new player');
+
+  var tag2 = document.getElementById('test_vid_id2');
+  var player2 = videojs(tag2, { techOrder: ['techFaker'] });
+  ok(player2.id() === 'test_vid_id2', 'created player from element');
+});
+
+test('should return a video player instance from el techfaker', function() {
+  var fixture = document.getElementById('qunit-fixture');
+  fixture.innerHTML += '<video id="test_vid_id"></video><video id="test_vid_id2"></video>';
+
+  var vid = document.querySelector('#test_vid_id');
+
+  var player = videojs(vid, {techOrder: ['techFaker']});
+  ok(player, 'created player from tag');
+  ok(player.id() === 'test_vid_id');
+  ok(videojs.getPlayers()['test_vid_id'] === player, 'added player to global reference');
+
+  var playerAgain = videojs(vid);
+  ok(player === playerAgain, 'did not create a second player from same tag');
+
+  equal(player, playerAgain, 'we did not make a new player');
+
  var tag2 = document.getElementById('test_vid_id2');
  var player2 = videojs(tag2, { techOrder: ['techFaker'] });
  ok(player2.id() === 'test_vid_id2', 'created player from element');
@@ -86,6 +130,7 @@ test('should expose DOM functions', function() {
  let methods = {
    isEl: 'isEl',
    isTextNode: 'isTextNode',
+    createEl: 'createEl',
    hasClass: 'hasElClass',
    addClass: 'addElClass',
    removeClass: 'removeElClass',
Autor	SHA1	Mensagem	Data
Gary Katsevman	315e185730	v5.6.0 dist	2016-01-26 12:10:16 -05:00
Gary Katsevman	58f76136e5	v5.6.0	2016-01-26 12:09:40 -05:00
Gary Katsevman	47f639fb41	@gkatsev updated to latest videojs-ie8 shim. closes #3042	2016-01-26 12:08:46 -05:00
Jamie	bb606cdcbd	@hubdotcom changed URLs in README to be protocol-relative. closes #3040	2016-01-26 11:34:36 -05:00
Patrick	876e48547c	@CoWinkKeyDinkInc fixed table in Tracks guide. Replaced some single quotes with double quotes. closes #2946	2016-01-25 20:11:26 -05:00
n23430	df02e7a709	@aril-spetalen added language support for Norwegian (nb and nn). closes #3021	2016-01-25 20:01:15 -05:00
Vitor Faiante	9cdfb75187	@vitor-faiante updated the guides. closes #2781	2016-01-25 19:50:02 -05:00
Gary Katsevman	8a17313a3b	@gkatsev checked muted status when updating volume bar level. closes #3037	2016-01-25 19:41:58 -05:00
Owen Edwards	6317395e0c	@OwenEdwards fixed double-localization of mute toggle control text. closes #3017	2016-01-25 19:38:28 -05:00
45aff0062cf1b0e55a6532b0a513db6be3952d17	b9f251650b	@mister-ben made $primary-foreground-color a !default sass var. closes #3003	2016-01-25 19:34:53 -05:00
Owen Edwards	0ffb27abb0	@OwenEdwards Fixed volume menu keyboard access. closes #3034	2016-01-25 19:18:12 -05:00
Owen Edwards	e05931dd19	@OwenEdwards Fixed menu keyboard access and ARIA labeling for screen readers. closes #3033	2016-01-25 19:05:10 -05:00
Owen Edwards	16f0179c07	@OwenEdwards added ClickableComponent. Fixed keyboard operation of buttons. closes #3032	2016-01-25 18:30:12 -05:00
Gary Katsevman	81caccd154	v5.5.3	2016-01-15 15:33:46 -05:00
rcrooks	d448acd224	@rcrooks fixed a couple of docs link and a jsdoc comment. closes #2987	2016-01-15 15:33:15 -05:00
45aff0062cf1b0e55a6532b0a513db6be3952d17	c901fcee6b	@mister-ben updated CDN urls in setup guide. closes #2984	2016-01-15 15:31:08 -05:00
Gary Katsevman	6977b0e3fe	@gkasev updated vjs to correctly return already created player when given an element. closes #3006	2016-01-15 15:27:35 -05:00
Gary Katsevman	b48797bf17	v5.5.2	2016-01-14 14:03:00 -05:00
Gary Katsevman	dcf2a300ef	make sure that styleEl_ is in DOM before removing on dispose. closes #3004	2016-01-14 14:01:30 -05:00
Gary Katsevman	088f47af2e	v5.5.1	2016-01-08 18:59:50 -05:00
Gary Katsevman	984085a048	@gkatsev fixed sass if else for icons. closes #2988	2016-01-08 18:58:56 -05:00
Gary Katsevman	67840aabbe	v5.5.0	2016-01-07 23:39:07 -05:00
Gary Katsevman	93f2f83723	@gkatsev updated css to have ascii codepoints for fonticons. Expose new scss file. closes #2973	2016-01-07 23:36:09 -05:00
jforbes	867fec910f	@forbesjo updated player to not autoplay if there is no source. closes #2971	2016-01-07 23:23:38 -05:00
Greg Smith	aa4700b098	@incompl updated build command in CONTRIBUTING.md. closes #2967	2016-01-07 23:13:15 -05:00
jforbes	b84be556a6	@forbesjo fixed errorDisplay erroring on subsequent openings. closes #2966	2016-01-07 23:10:43 -05:00
rcrooks	0f219b1f1d	@rcrooks fixed some broken links in guides. closes #2965	2016-01-07 23:08:12 -05:00
Pete Huitsing	49cc73f980	@huitsing updated docstrings for autoplay and loop methods. closes #2960	2016-01-07 23:05:48 -05:00
Pat O'Neill	8ad286a768	@misteroneill exposed createEl on videojs. closes #2926	2016-01-07 23:03:23 -05:00
Derk-Jan Hartman	5f239d7cf1	@hartman fixed usage of lighten in progress component. Fixes #2793 . closes #2875	2016-01-07 23:00:09 -05:00
Gary Katsevman	35203f613f	v5.4.6	2015-12-22 17:00:46 -05:00
Gary Katsevman	692608270e	@gkatsev fixed vertical slider alignment in volume menu button. closes #2943	2015-12-22 16:58:58 -05:00
Gary Katsevman	d99ce79954	v5.4.5	2015-12-15 14:47:29 -05:00
rcrooks	01a7e7509e	@rcrooks fixed simple embed example. closes #2915	2015-12-15 14:46:16 -05:00
Derk-Jan Hartman	09f182db60	@hartman updated options guide doc. closes #2908	2015-12-15 14:43:30 -05:00
brandonocasey	7838fe2ec3	@BrandonOCasey updated sandbox to to use newer CDN urls. closes #2917	2015-12-15 14:38:09 -05:00
Gary Katsevman	45d43ec904	@gkatsev updated styles for inline menu and volume bar. closes #2913	2015-12-15 14:26:18 -05:00
Gary Katsevman	c61e9e49ab	@gkatsev added mouse/touch listeners to volume menu button. closes #2638	2015-12-15 14:17:43 -05:00
Matthew McClure	4cb14eb420	Update plugin documentation to reflect icon usage	2015-12-10 10:38:49 -08:00
Gary Katsevman	1d88ef066d	v5.4.4	2015-12-09 18:14:48 -05:00
Gary Katsevman	16f2e4113a	@gkatsev switched to use custom vtt.js from npm. closes #2905	2015-12-09 18:12:46 -05:00
Gary Katsevman	4424a06a3d	v5.4.3	2015-12-08 20:32:12 -05:00
Gary Katsevman	08f03c160c	@gkatsev updated options customizer and github-release options. closes #2903	2015-12-08 20:30:48 -05:00