v5.5.2 dist

CHANGELOG.md

@@ -6,6 +6,35 @@ _(none)_
 
 --------------------
 
+## 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))
 

CONTRIBUTING.md

@@ -144,7 +144,7 @@ npm install
 Build a local copy of video.js and run tests
 
 ```bash
-grunt
+grunt dist
 grunt test
 ```
 

build/grunt.js

@@ -151,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'],
@@ -196,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'
         }
       }
     },
@@ -327,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'
             }],
           ]
@@ -455,6 +455,7 @@ module.exports = function(grunt) {
     'uglify',
 
     'sass',
+    'wrapcodepoints',
     'version:css',
     'cssmin',
 
@@ -479,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']);
 

component.json

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

dist/alt/video.novtt.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.4.3 <http://videojs.com/>
+ * Video.js 5.5.2 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/master/LICENSE>
@@ -7398,6 +7398,8 @@ module.exports = exports['default'];
 
 exports.__esModule = true;
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -7408,6 +7410,10 @@ var _buttonJs = _dereq_('../button.js');
 
 var _buttonJs2 = _interopRequireDefault(_buttonJs);
 
+var _utilsFnJs = _dereq_('../utils/fn.js');
+
+var Fn = _interopRequireWildcard(_utilsFnJs);
+
 var _componentJs = _dereq_('../component.js');
 
 var _componentJs2 = _interopRequireDefault(_componentJs);
@@ -7428,6 +7434,10 @@ var _volumeControlVolumeBarJs = _dereq_('./volume-control/volume-bar.js');
 
 var _volumeControlVolumeBarJs2 = _interopRequireDefault(_volumeControlVolumeBarJs);
 
+var _globalDocument = _dereq_('global/document');
+
+var _globalDocument2 = _interopRequireDefault(_globalDocument);
+
 /**
  * Button for volume menu
  *
@@ -7528,6 +7538,9 @@ var VolumeMenuButton = (function (_MenuButton) {
     menu.addChild(vb);
 
     this.volumeBar = vb;
+
+    this.attachVolumeBarEvents();
+
     return menu;
   };
 
@@ -7542,6 +7555,19 @@ var VolumeMenuButton = (function (_MenuButton) {
     _MenuButton.prototype.handleClick.call(this);
   };
 
+  VolumeMenuButton.prototype.attachVolumeBarEvents = function attachVolumeBarEvents() {
+    this.on(['mousedown', 'touchdown'], this.handleMouseDown);
+  };
+
+  VolumeMenuButton.prototype.handleMouseDown = function handleMouseDown(event) {
+    this.on(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+    this.on(_globalDocument2['default'], ['mouseup', 'touchend'], this.handleMouseUp);
+  };
+
+  VolumeMenuButton.prototype.handleMouseUp = function handleMouseUp(event) {
+    this.off(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+  };
+
   return VolumeMenuButton;
 })(_menuMenuButtonJs2['default']);
 
@@ -7552,7 +7578,7 @@ _componentJs2['default'].registerComponent('VolumeMenuButton', VolumeMenuButton)
 exports['default'] = VolumeMenuButton;
 module.exports = exports['default'];
 
-},{"../button.js":63,"../component.js":65,"../menu/menu-button.js":102,"../menu/menu.js":104,"./mute-toggle.js":69,"./volume-control/volume-bar.js":92}],96:[function(_dereq_,module,exports){
+},{"../button.js":63,"../component.js":65,"../menu/menu-button.js":102,"../menu/menu.js":104,"../utils/fn.js":130,"./mute-toggle.js":69,"./volume-control/volume-bar.js":92,"global/document":1}],96:[function(_dereq_,module,exports){
 /**
  * @file error-display.js
  */
@@ -7638,6 +7664,7 @@ var ErrorDisplay = (function (_ModalDialog) {
 
 ErrorDisplay.prototype.options_ = _utilsMergeOptions2['default'](_modalDialog2['default'].prototype.options_, {
   fillAlways: true,
+  temporary: false,
   uncloseable: true
 });
 
@@ -9225,7 +9252,7 @@ var Player = (function (_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_);
     }
 
@@ -9726,7 +9753,7 @@ var Player = (function (_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();
     }
@@ -11053,7 +11080,7 @@ var Player = (function (_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
@@ -11071,7 +11098,7 @@ var Player = (function (_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
@@ -17330,8 +17357,9 @@ 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
  */
@@ -19071,7 +19099,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.4.3';
+videojs.VERSION = '5.5.2';
 
 /**
  * The global options object. These are the settings that take effect
@@ -19511,6 +19539,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
  *

dist/examples/simple-embed/index.html

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

dist/video.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.4.3 <http://videojs.com/>
+ * Video.js 5.5.2 <http://videojs.com/>
  * Copyright Brightcove, Inc. <https://www.brightcove.com/>
  * Available under Apache License Version 2.0
  * <https://github.com/videojs/video.js/blob/master/LICENSE>
@@ -7402,6 +7402,8 @@ module.exports = exports['default'];
 
 exports.__esModule = true;
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
@@ -7412,6 +7414,10 @@ var _buttonJs = _dereq_('../button.js');
 
 var _buttonJs2 = _interopRequireDefault(_buttonJs);
 
+var _utilsFnJs = _dereq_('../utils/fn.js');
+
+var Fn = _interopRequireWildcard(_utilsFnJs);
+
 var _componentJs = _dereq_('../component.js');
 
 var _componentJs2 = _interopRequireDefault(_componentJs);
@@ -7432,6 +7438,10 @@ var _volumeControlVolumeBarJs = _dereq_('./volume-control/volume-bar.js');
 
 var _volumeControlVolumeBarJs2 = _interopRequireDefault(_volumeControlVolumeBarJs);
 
+var _globalDocument = _dereq_('global/document');
+
+var _globalDocument2 = _interopRequireDefault(_globalDocument);
+
 /**
  * Button for volume menu
  *
@@ -7532,6 +7542,9 @@ var VolumeMenuButton = (function (_MenuButton) {
     menu.addChild(vb);
 
     this.volumeBar = vb;
+
+    this.attachVolumeBarEvents();
+
     return menu;
   };
 
@@ -7546,6 +7559,19 @@ var VolumeMenuButton = (function (_MenuButton) {
     _MenuButton.prototype.handleClick.call(this);
   };
 
+  VolumeMenuButton.prototype.attachVolumeBarEvents = function attachVolumeBarEvents() {
+    this.on(['mousedown', 'touchdown'], this.handleMouseDown);
+  };
+
+  VolumeMenuButton.prototype.handleMouseDown = function handleMouseDown(event) {
+    this.on(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+    this.on(_globalDocument2['default'], ['mouseup', 'touchend'], this.handleMouseUp);
+  };
+
+  VolumeMenuButton.prototype.handleMouseUp = function handleMouseUp(event) {
+    this.off(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+  };
+
   return VolumeMenuButton;
 })(_menuMenuButtonJs2['default']);
 
@@ -7556,7 +7582,7 @@ _componentJs2['default'].registerComponent('VolumeMenuButton', VolumeMenuButton)
 exports['default'] = VolumeMenuButton;
 module.exports = exports['default'];
 
-},{"../button.js":63,"../component.js":65,"../menu/menu-button.js":102,"../menu/menu.js":104,"./mute-toggle.js":69,"./volume-control/volume-bar.js":92}],96:[function(_dereq_,module,exports){
+},{"../button.js":63,"../component.js":65,"../menu/menu-button.js":102,"../menu/menu.js":104,"../utils/fn.js":130,"./mute-toggle.js":69,"./volume-control/volume-bar.js":92,"global/document":1}],96:[function(_dereq_,module,exports){
 /**
  * @file error-display.js
  */
@@ -7642,6 +7668,7 @@ var ErrorDisplay = (function (_ModalDialog) {
 
 ErrorDisplay.prototype.options_ = _utilsMergeOptions2['default'](_modalDialog2['default'].prototype.options_, {
   fillAlways: true,
+  temporary: false,
   uncloseable: true
 });
 
@@ -9229,7 +9256,7 @@ var Player = (function (_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_);
     }
 
@@ -9730,7 +9757,7 @@ var Player = (function (_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();
     }
@@ -11057,7 +11084,7 @@ var Player = (function (_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
@@ -11075,7 +11102,7 @@ var Player = (function (_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
@@ -17334,8 +17361,9 @@ 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
  */
@@ -19075,7 +19103,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.4.3';
+videojs.VERSION = '5.5.2';
 
 /**
  * The global options object. These are the settings that take effect
@@ -19515,6 +19543,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
  *

docs/examples/simple-embed/index.html

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

docs/guides/languages.md

@@ -153,7 +153,7 @@ Language Codes
 --------------
 The following is a list of official language codes.
 
-**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](../../lang) folder located in the project root.
+**NOTE:** For supported language translations, please see the [Languages Folder (/lang)](https://github.com/videojs/video.js/tree/master/lang) folder located in the project root.
 
 <table border="0" cellspacing="5" cellpadding="5">
   <tr>

docs/guides/options.md

@@ -135,4 +135,4 @@ notation.
 ```
 
 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.
+just need to remember to nest child components in a `children` array for each level.

docs/guides/plugins.md

@@ -45,3 +45,7 @@ If you've already initialized your video tag, you can activate a plugin at any t
     video.examplePlugin({ exampleOption: true });
 
 That's it. Head on over to the [Video.js wiki](https://github.com/videojs/video.js/wiki/Plugins) and add your plugin to the list so everyone else can check it out.
+
+## How should I use the Video.js icons in my plugin?
+
+If you'd like to use any of the icons available in the [Video.js icon set](http://videojs.github.io/font/), please target them via the CSS class names instead of codepoints. The codepoints *may* change between versions of the font, so using the class names ensures that your plugin will stay up to date with any font changes.

docs/guides/removing-players.md

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

docs/guides/skins.md

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "video.js",
   "description": "An HTML5 and Flash video player with a common API and skin for both.",
-  "version": "5.4.3",
+  "version": "5.5.2",
   "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-font": "1.5.1",
     "videojs-ie8": "1.1.1",
     "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": {

sandbox/index.html.example

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

sandbox/plugin.html.example

@@ -20,10 +20,10 @@
 <body>
   <p style="background-color:#eee; border: 1px solid #777; padding: 10px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">This page shows you how to create, register and initialize a Video.js plugin.</p>
 
-  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png">
-    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
-    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
-    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'>
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://vjs.zencdn.net/v/oceans.png">
+    <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
+    <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
+    <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'>
     <p>Video Playback Not Supported</p>
   </video>
 

src/css/_variables.scss

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

src/css/components/_progress.scss

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

src/css/components/_volume.scss

@@ -25,7 +25,7 @@
 }
 
 .video-js .vjs-volume-bar {
-  margin: 1.35em;
+  margin: 1.35em 0.45em;
 }
 
 .vjs-volume-bar.vjs-slider-horizontal {
@@ -36,6 +36,7 @@
 .vjs-volume-bar.vjs-slider-vertical {
   width: 0.3em;
   height: 5em;
+  margin: 1.35em auto;
 }
 
 .video-js .vjs-volume-level {

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

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

src/css/video-js.scss

@@ -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";

src/css/vjs.scss

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

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

@@ -2,11 +2,13 @@
  * @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 MuteToggle from './mute-toggle.js';
 import VolumeBar from './volume-control/volume-bar.js';
+import document from 'global/document';
 
 /**
  * Button for volume menu
@@ -100,6 +102,9 @@ class VolumeMenuButton extends MenuButton {
     menu.addChild(vb);
 
     this.volumeBar = vb;
+
+    this.attachVolumeBarEvents();
+
     return menu;
   }
 
@@ -113,6 +118,18 @@ class VolumeMenuButton extends MenuButton {
     super.handleClick();
   }
 
+  attachVolumeBarEvents() {
+    this.on(['mousedown', 'touchdown'], this.handleMouseDown);
+  }
+
+  handleMouseDown(event) {
+    this.on(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+    this.on(document, ['mouseup', 'touchend'], this.handleMouseUp);
+  }
+
+  handleMouseUp(event) {
+    this.off(['mousemove', 'touchmove'], Fn.bind(this.volumeBar, this.volumeBar.handleMouseMove));
+  }
 }
 
 VolumeMenuButton.prototype.volumeUpdate = MuteToggle.prototype.update;

src/js/error-display.js

@@ -52,6 +52,7 @@ class ErrorDisplay extends ModalDialog {
 
 ErrorDisplay.prototype.options_ = mergeOptions(ModalDialog.prototype.options_, {
   fillAlways: true,
+  temporary: false,
   uncloseable: true
 });
 

src/js/player.js

@@ -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_);
     }
 
@@ -720,7 +720,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 +1979,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 +1996,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

src/js/tech/tech.js

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

src/js/utils/dom.js

@@ -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
  */

src/js/video.js

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

test/unit/player.test.js

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

test/unit/video.test.js

@@ -86,6 +86,7 @@ test('should expose DOM functions', function() {
   let methods = {
     isEl: 'isEl',
     isTextNode: 'isTextNode',
+    createEl: 'createEl',
     hasClass: 'hasElClass',
     addClass: 'addElClass',
     removeClass: 'removeElClass',