From 8bc861fb861d4126f80fd11ed17d1f550498c559 Mon Sep 17 00:00:00 2001
From: David LaPalomento <dlapalomento@gmail.com>
Date: Wed, 12 Mar 2014 17:16:30 -0400
Subject: [PATCH 1/2] Don't force sliders to get evaluated on load Since the
 load and play progress sliders are guaranteed to start from zero, set that
 through CSS. Calling Slider.prototype.update forces a re-flow because element
 dimensions are queried and style rules changed. That reflow consistently took
 around 60ms on my laptop which would mean dropped frames and "jerkiness" on
 initialization.

---
 src/css/video-js.less | 2 ++
 src/js/slider.js      | 7 +------
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 9663396ebe..622d43dbf0 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -368,6 +368,8 @@ fonts to show/hide properly.
   height: 100%;
   margin: 0;
   padding: 0;
+  /* updated by javascript during playback */
+  width: 0;
   /* Needed for IE6 *///
   left: 0;
   top: 0;
diff --git a/src/js/slider.js b/src/js/slider.js
index c58fbc4886..cc3654f84a 100644
--- a/src/js/slider.js
+++ b/src/js/slider.js
@@ -16,8 +16,6 @@ vjs.Slider = vjs.Component.extend({
     this.bar = this.getChild(this.options_['barName']);
     this.handle = this.getChild(this.options_['handleName']);
 
-    player.on(this.playerEvent, vjs.bind(this, this.update));
-
     this.on('mousedown', this.onMouseDown);
     this.on('touchstart', this.onMouseDown);
     this.on('focus', this.onFocus);
@@ -26,10 +24,7 @@ vjs.Slider = vjs.Component.extend({
 
     this.player_.on('controlsvisible', vjs.bind(this, this.update));
 
-    // This is actually to fix the volume handle position. http://twitter.com/#!/gerritvanaaken/status/159046254519787520
-    // this.player_.one('timeupdate', vjs.bind(this, this.update));
-
-    player.ready(vjs.bind(this, this.update));
+    player.on(this.playerEvent, vjs.bind(this, this.update));
 
     this.boundEvents = {};
   }

From d5957da3b282166c882c5d81e64936dec118ecf6 Mon Sep 17 00:00:00 2001
From: David LaPalomento <dlapalomento@gmail.com>
Date: Mon, 31 Mar 2014 16:22:43 -0400
Subject: [PATCH 2/2] Peg the volume control to 1.0 on init Setup styles so
 that the volume control initially renders at full volume. This matches
 browser behavior where volume is available and saves Javascript from having
 to manually update the volume control on init. After the initial draw, the
 volume control is updated dynamically the same way it was before.

---
 src/css/video-js.less                | 5 +++++
 src/js/control-bar/volume-control.js | 1 -
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/css/video-js.less b/src/css/video-js.less
index 622d43dbf0..7d7d9baaca 100644
--- a/src/css/video-js.less
+++ b/src/css/video-js.less
@@ -303,6 +303,7 @@ fonts to show/hide properly.
   top: 0;
   left: 0;
   height: 0.5em;
+  width: 100%;
 
   background: @slider-bar-color
     url(@slider-bar-pattern)
@@ -311,6 +312,10 @@ fonts to show/hide properly.
 .vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
   width: 0.5em;
   height: 0.5em;
+  /* Assumes volume starts at 1.0. If you change the size of the
+     handle relative to the volume bar, you'll need to update this value
+     too. */
+  left: 90%;
 }
 
 .vjs-default-skin .vjs-volume-handle:before {
diff --git a/src/js/control-bar/volume-control.js b/src/js/control-bar/volume-control.js
index 14089d97dc..64ec52d247 100644
--- a/src/js/control-bar/volume-control.js
+++ b/src/js/control-bar/volume-control.js
@@ -49,7 +49,6 @@ vjs.VolumeBar = vjs.Slider.extend({
     vjs.Slider.call(this, player, options);
     player.on('volumechange', vjs.bind(this, this.updateARIAAttributes));
     player.ready(vjs.bind(this, this.updateARIAAttributes));
-    setTimeout(vjs.bind(this, this.update), 0); // update when elements is in DOM
   }
 });