v5.4.6 dist

CHANGELOG.md

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

build/grunt.js

@@ -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.
@@ -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'
             }],
           ]

build/options-customizer.js

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

component.json

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

dist/alt/video.novtt.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.4.2 <http://videojs.com/>
+ * Video.js 5.4.6 <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
  */
@@ -19071,7 +19097,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.4.2';
+videojs.VERSION = '5.4.6';
 
 /**
  * The global options object. These are the settings that take effect

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.css

@@ -506,7 +506,7 @@ body.vjs-full-window {
   height: 100%;
   width: auto;
   position: absolute;
-  left: 2.2222222em;
+  left: 4em;
   top: 0;
   padding: 0;
   margin: 0;
@@ -792,7 +792,7 @@ body.vjs-full-window {
   align-items: center; }
 
 .video-js .vjs-volume-bar {
-  margin: 1.35em; }
+  margin: 1.35em 0.45em; }
 
 .vjs-volume-bar.vjs-slider-horizontal {
   width: 5em;
@@ -800,7 +800,8 @@ body.vjs-full-window {
 
 .vjs-volume-bar.vjs-slider-vertical {
   width: 0.3em;
-  height: 5em; }
+  height: 5em;
+  margin: 1.35em auto; }
 
 .video-js .vjs-volume-level {
   position: absolute;

dist/video.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Video.js 5.4.2 <http://videojs.com/>
+ * Video.js 5.4.6 <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
  */
@@ -19075,7 +19101,7 @@ setup.autoSetupTimeout(1, videojs);
  *
  * @type {String}
  */
-videojs.VERSION = '5.4.2';
+videojs.VERSION = '5.4.6';
 
 /**
  * The global options object. These are the settings that take effect

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/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.

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.2",
+  "version": "5.4.6",
   "copyright": "Copyright Brightcove, Inc. <https://www.brightcove.com/>",
   "license": "Apache-2.0",
   "keywords": [
@@ -31,7 +31,7 @@
     "videojs-font": "1.4.0",
     "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/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/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/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;
     }