Control bar updates

src/css/video-js.less

@@ -4,20 +4,21 @@ Version GENERATED_AT_BUILD
 Create your own skin at http://designer.videojs.com
 */
 
-// To customize the player skin, change the values of the variables or edit the 
+// To customize the player skin, change the values of the variables or edit the
 // CSS below.
 // (This file uses LESS. Learn more at http://lesscss.org/)
 
-// The base font size controls the size of everything, not just text. All 
+// The base font size controls the size of everything, not just text. All
 // diminensions use em-based sizes so that the scale along with the font size.
 // Try increasing it to 20px and see what happens.
 @base-font-size: 10px;
+@touch-device-font-size: 15px;
 
 // The main font color controls the color of the text and the icons (font icons)
 @main-font-color: #CCCCCC; // e.g. rgb(255, 255, 255) or #ffffff
 
-// The default color of control backgrounds is mostly black but with a little 
-// bit of blue so it can still be seen on all black video frames, which are 
+// The default color of control backgrounds is mostly black but with a little
+// bit of blue so it can still be seen on all black video frames, which are
 // common.
 @control-bg-color: #07141E; // e.g. rgb(255, 255, 255) or #ffffff
 @control-bg-alpha: 0.7; // 1.0 = 100% opacity, 0.0 = 0% opacity
@@ -32,12 +33,12 @@ Create your own skin at http://designer.videojs.com
 @slider-background-color: #333333;
 @slider-background-alpha: 0.9; // 1.0 = 100% opacity, 0.0 = 0% opacity
 
-// The "Big Play Button" is the play button that shows before the video plays. 
-// To center it set the align values to center and middle. The typical location 
+// The "Big Play Button" is the play button that shows before the video plays.
+// To center it set the align values to center and middle. The typical location
 // of the button is the center, but there is trend towards moving it to a corner
 // where it gets out of the way of valuable content in the poster image.
 @big-play-align: left; // left, center, or right
-@big-play-vertical-align: top; // top, middle, or bottom 
+@big-play-vertical-align: top; // top, middle, or bottom
 // The button colors match the control colors by default but you can customize
 // them by replace the variables (@control-bg-color) with your own color values.
 @big-play-bg-color: @control-bg-color;
@@ -58,9 +59,9 @@ Create your own skin at http://designer.videojs.com
 
 /* SKIN
 ================================================================================
-The main class name for all skin-specific styles. To make your own skin, 
-replace all occurances of 'vjs-default-skin' with a new name. Then add your new 
-skin name to your video tag instead of the default skin. 
+The main class name for all skin-specific styles. To make your own skin,
+replace all occurances of 'vjs-default-skin' with a new name. Then add your new
+skin name to your video tag instead of the default skin.
 e.g. <video class="video-js my-skin-name">
 */
 .vjs-default-skin {
@@ -98,7 +99,7 @@ The control icons are from a custom font. Each icon corresponds to a character
 @captions-icon: "\e008";
 
 /* Base UI Component Classes
--------------------------------------------------------------------------------- 
+--------------------------------------------------------------------------------
 */
 
 /* Slider - used for Volume bar and Seek bar */
@@ -141,13 +142,13 @@ The control icons are from a custom font. Each icon corresponds to a character
 
 /* Control Bar
 --------------------------------------------------------------------------------
-The default control bar that is a container for most of the controls. 
+The default control bar that is a container for most of the controls.
 */
 .vjs-default-skin .vjs-control-bar {
   /* Start hidden *///
   display: none;
   position: absolute;
-  /* Place control bar at the bottom of the player box/video. 
+  /* Place control bar at the bottom of the player box/video.
      If you want more margin below the control bar, add more height. *///
   bottom: 0;
   /* Use left/right to stretch to 100% width of player div *///
@@ -159,6 +160,36 @@ The default control bar that is a container for most of the controls.
   .background-color-with-alpha(@control-bg-color, @control-bg-alpha);
 }
 
+/* Show the control bar only once the video has started playing */
+.vjs-default-skin.vjs-has-started .vjs-control-bar {
+  display: block;
+  /* Visibility needed to make sure things hide in older browsers too. */
+  visibility: visible;
+  opacity: 1;
+
+  @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
+  .transition(@trans);
+}
+
+/* Hide the control bar when the video is playing and the user is inactive  */
+.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+
+  @trans: visibility 1.0s, opacity 1.0s;
+  .transition(@trans);
+}
+
+.vjs-default-skin.vjs-controls-disabled .vjs-control-bar {
+  display: none;
+}
+
+.vjs-default-skin.vjs-using-native-controls .vjs-control-bar {
+  display: none;
+}
+
+
 /* General styles for individual controls. *///
 .vjs-default-skin .vjs-control {
   outline: none;
@@ -191,15 +222,15 @@ The default control bar that is a container for most of the controls.
   text-shadow: 0em 0em 1em rgba(255, 255, 255, 1);
 }
 
-.vjs-default-skin .vjs-control:focus { 
+.vjs-default-skin .vjs-control:focus {
   /*  outline: 0; *///
   /* keyboard-only users cannot see the focus on several of the UI elements when
   this is set to 0 */
 }
 
 /* Hide control text visually, but have it available for screenreaders */
-.vjs-default-skin .vjs-control-text { 
-  .hide-visually; 
+.vjs-default-skin .vjs-control-text {
+  .hide-visually;
 }
 
 /* Play/Pause
@@ -388,7 +419,7 @@ The default control bar that is a container for most of the controls.
 
 /* Big Play Button (play button at start)
 --------------------------------------------------------------------------------
-Positioning of the play button in the center or other corners can be done more 
+Positioning of the play button in the center or other corners can be done more
 easily in the skin designer. http://designer.videojs.com/
 */
 .vjs-default-skin .vjs-big-play-button {
@@ -420,6 +451,20 @@ easily in the skin designer. http://designer.videojs.com/
   .transition(all 0.4s);
 }
 
+/* Hide if controls are disabled */
+.vjs-default-skin.vjs-controls-disabled .vjs-big-play-button {
+  display: none;
+}
+/* Hide when video starts playing */
+.vjs-default-skin.vjs-has-started .vjs-big-play-button {
+  display: none;
+}
+/* Hide on mobile devices. Remove when we stop using native controls
+    by default on mobile  */
+.vjs-default-skin.vjs-using-native-controls .vjs-big-play-button {
+  display: none;
+}
+
 .vjs-default-skin:hover .vjs-big-play-button,
 .vjs-default-skin .vjs-big-play-button:focus {
   outline: 0;
@@ -609,18 +654,18 @@ REQUIRED STYLES (be careful overriding)
 ================================================================================
 When loading the player, the video tag is replaced with a DIV,
 that will hold the video tag or object tag for other playback methods.
-The div contains the video playback element (Flash or HTML5) and controls, 
+The div contains the video playback element (Flash or HTML5) and controls,
 and sets the width and height of the video.
 
-** If you want to add some kind of border/padding (e.g. a frame), or special 
-positioning, use another containing element. Otherwise you risk messing up 
+** If you want to add some kind of border/padding (e.g. a frame), or special
+positioning, use another containing element. Otherwise you risk messing up
 control positioning and full window mode. **
 */
 .video-js {
   background-color: #000;
   position: relative;
   padding: 0;
-  /* Start with 10px for base font size so other dimensions can be em based and 
+  /* Start with 10px for base font size so other dimensions can be em based and
      easily calculable. */
   font-size: @base-font-size;
   /* Allow poster to be vertially aligned. */
@@ -649,7 +694,7 @@ control positioning and full window mode. **
   height: 100%;
 }
 
-/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when 
+/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
    checking fullScreenEnabled. */
 .video-js:-moz-full-screen { position: absolute; }
 
@@ -675,9 +720,12 @@ body.vjs-full-window {
   _position: absolute;
 }
 .video-js:-webkit-full-screen {
-  width: 100% !important; 
+  width: 100% !important;
   height: 100% !important;
 }
+.video-js.vjs-fullscreen.vjs-user-inactive {
+  cursor: none;
+}
 
 /* Poster Styles */
 .vjs-poster {
@@ -699,6 +747,11 @@ body.vjs-full-window {
   width: 100%;
 }
 
+/* Hide the poster when native controls are used otherwise it covers them */
+.video-js.vjs-using-native-controls .vjs-poster {
+  display: none;
+}
+
 /* Text Track Styles */
 /* Overall track holder for both captions and subtitles */
 .video-js .vjs-text-track-display {
@@ -722,26 +775,6 @@ body.vjs-full-window {
 .video-js .vjs-captions { color: #fc6 /* Captions are yellow */; }
 .vjs-tt-cue { display: block; }
 
-/* Fading sytles, used to fade control bar. */
-.vjs-fade-in {
-  display: block !important;
-  /* Visibility needed to make sure things hide in older browsers too. */
-  visibility: visible;
-  opacity: 1;
-
-  @trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
-  .transition(@trans);
-}
-.vjs-fade-out {
-  display: block !important;
-  visibility: hidden;
-  opacity: 0;
-
-  @trans: visibility 1.5s, opacity 1.5s;
-  .transition(@trans);
-  /* Wait a moment before fading out the control bar */
-  .transition-delay(2s);
-}
 /* Hide disabled or unsupported controls */
 .vjs-default-skin .vjs-hidden { display: none; }
 
@@ -751,9 +784,9 @@ body.vjs-full-window {
   visibility: visible;
 }
 
-// MIXINS 
+// MIXINS
 // =============================================================================
-// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules 
+// Mixins are a LESS feature and are used to add vendor prefixes to CSS rules
 // when needed.
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
@@ -813,7 +846,7 @@ body.vjs-full-window {
 .user-select (@string: none) {
   /* user-select *///
   -webkit-user-select: @string;
-     -moz-user-select: @string;  
+     -moz-user-select: @string;
       -ms-user-select: @string;
           user-select: @string;
 }
@@ -822,14 +855,14 @@ body.vjs-full-window {
 // http://h5bp.com/v
 .hide-visually () {
   /* hide-visually *///
-  border: 0; 
-  clip: rect(0 0 0 0); 
-  height: 1px; 
-  margin: -1px; 
-  overflow: hidden; 
-  padding: 0; 
-  position: 
-  absolute; 
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position:
+  absolute;
   width: 1px;
 }
 
@@ -882,27 +915,27 @@ body.vjs-full-window {
 // * We want this file to continue to be accessible by people who don't know
 //   LESS but know CSS. This means finding the balance between using the most
 //   valuable LESS features (e.g. variables) and keeping it looking like CSS.
-//   So it's best to avoid advanced LESS features like conditional statements. 
-//   (we're using one for the big play button position because that's a hot 
+//   So it's best to avoid advanced LESS features like conditional statements.
+//   (we're using one for the big play button position because that's a hot
 //   topic)
-// 
+//
 // * We care about the readability of the CSS output of LESS, which means we
 //   have to be careful about what features of LESS we use. (if you're building
 //   your own skin this may not apply)
-//     1. Comments inside of rules (strangely) have an extra line added after 
-//        them in the CSS output. To avoid this we can add a LESS comment after 
+//     1. Comments inside of rules (strangely) have an extra line added after
+//        them in the CSS output. To avoid this we can add a LESS comment after
 //        the CSS comment.
 //          /* comment *///
-// 
+//
 //     2. In a rule with nested rules, any comments outside of a rule are moved
 //        to the top of the parent rule. i.e. it might look like:
 //          /* title of rule 1 */
 //          /* title of rule 2 */
 //          .rule1 {}
 //          .rule2 {}
-//        This is why we aren't using nested rules inside of the 
+//        This is why we aren't using nested rules inside of the
 //        vjs-default-skin class.
 
-/* ----------------------------------------------------------------------------- 
-The original source of this file lives at 
+/* -----------------------------------------------------------------------------
+The original source of this file lives at
 https://github.com/videojs/video.js/blob/master/src/css/video-js.less */

src/js/big-play-button.js

@@ -1,24 +1,13 @@
 /* Big Play Button
 ================================================================================ */
 /**
- * Initial play button. Shows before the video has played.
+ * Initial play button. Shows before the video has played. The hiding of the
+ * big play button is done via CSS and player states.
  * @param {vjs.Player|Object} player
  * @param {Object=} options
  * @constructor
  */
-vjs.BigPlayButton = vjs.Button.extend({
-  /** @constructor */
-  init: function(player, options){
-    vjs.Button.call(this, player, options);
-
-    if (!player.controls()) {
-      this.hide();
-    }
-
-    player.on('play', vjs.bind(this, this.hide));
-    // player.on('ended', vjs.bind(this, this.show));
-  }
-});
+vjs.BigPlayButton = vjs.Button.extend();
 
 vjs.BigPlayButton.prototype.createEl = function(){
   return vjs.Button.prototype.createEl.call(this, 'div', {
@@ -29,10 +18,5 @@ vjs.BigPlayButton.prototype.createEl = function(){
 };
 
 vjs.BigPlayButton.prototype.onClick = function(){
-  // Go back to the beginning if big play button is showing at the end.
-  // Have to check for current time otherwise it might throw a 'not ready' error.
-  //if(this.player_.currentTime()) {
-    //this.player_.currentTime(0);
-  //}
   this.player_.play();
 };

src/js/button.js

@@ -12,7 +12,9 @@ vjs.Button = vjs.Component.extend({
     vjs.Component.call(this, player, options);
 
     var touchstart = false;
-    this.on('touchstart', function() {
+    this.on('touchstart', function(event) {
+      // Stop click and other mouse events from triggering also
+      event.preventDefault();
       touchstart = true;
     });
     this.on('touchmove', function() {
@@ -24,7 +26,6 @@ vjs.Button = vjs.Component.extend({
         self.onClick(event);
       }
       event.preventDefault();
-      event.stopPropagation();
     });
 
     this.on('click', this.onClick);